<template> 
	<view class="content">
		<view style="padding: 0 0rpx;">
			<view class="moduleBox">
				<view class="moduleLabel">支付方式</view>
				<view class="flex-between" style="margin-top: 46rpx;">
					<view class="flex-center">
						<image src="/static/img/41.png" class="icon1"></image>
						<view class="text1">线下支付</view>
					</view>
					<image v-if="radioType == '1'" :src="path+'/assets/img/icon/selected.png'" class="img1"></image>
					<image v-else :src="path+'/assets/img/icon/noSelected.png'" @click="upPayClick('1')" class="img1"></image>
				</view>
				<view class="flex-between" style="margin-top: 46rpx;margin-bottom: 20rpx;">
					<view class="flex-center">
						<image src="/static/img/41.png" class="icon1"></image>
						<view class="text1">线上支付</view>
					</view>
					<image v-if="radioType == '2'" :src="path+'/assets/img/icon/selected.png'" class="img1"></image>
					<image v-else :src="path+'/assets/img/icon/noSelected.png'" @click="upPayClick('2')" class="img1"></image>
				</view>
			</view>
			<view class="moduleBox">
				<view class="moduleLabel">
					支付方式
					<text class="text2">请上传支付记录截图或照片</text>
				</view>
				<view style="margin-top: 35rpx;">
					<commonUpload @imgList="recordList"></commonUpload>
				</view>
			</view>
			<view class="moduleBox2">
				<view class="moduleBox3">
					<view class="moduleLabel">
						回收价格
					</view>
					<view style="line-height: 39rpx;margin-top: 46rpx;">
						<text class="text3">平台预估费用</text>
						<text class="text4">￥</text>
						<text class="text5">{{total_amount}}</text>
					</view>
					<view class="text3" style="margin-top: 46rpx;">实际结算费用</view>
					<view class="flex-between" style="margin-top: 36rpx;">
						<view>
							<text class="text6">￥</text>
							<text class="text7">{{actual_amount}}</text>
						</view>
						<image :src="path+'/assets/img/icon/edit2.png'" class="img2"></image>
					</view>
				</view>
				<view class="payLable">
					<view>费用说明：</view>
					<view>实际结算费用包含支付用户商品货款+平台技术服务费</view>
				</view>
			</view>
			
			<view class="moduleBox">
				<view class="moduleLabel">
					货物图片
					<text class="text2">请上传回收货物照片</text>
				</view>
				<view style="margin-top: 35rpx;">
					<commonUpload @imgList="goodsList"></commonUpload>
				</view>
			</view>
			<view style="height:130px"></view>
			<view class="footer">  
				<view class="protBox">
					<image v-if="!isRead" @click="selectRead" :src="path+'/assets/img/icon/noSelected.png'"></image>
					<image v-else @click="selectRead" :src="path+'/assets/img/icon/selected.png'"></image>
					<text>我已阅读并同意</text>
					<text class="protText" @click="toshow()">《用户回收协议》</text>
				</view>
				<!-- <view class="fsz28" @click="toshow()">
					<view>下单即同意</view>
					<view style="color: #31b977;">《回收协议》</view>
				</view> -->
				<view>
					<view class="evalueBox">
						<text class="text1">合计预估</text>
						<text class="text2">结算金额以实际为准</text>
					</view>
					<view class="priceBox" :style="{opacity: actual_amount?1:0}">
						<text class="text1">￥</text>
						<text class="text2">{{actual_amount}}</text>
					</view>
				</view>
				<view class="btn btn-default"  @click="createOrder()" >去下单</view> 
			</view>
			
			<lvv-popup position="bottom" ref="lvvpopref">
				<view style="width: 100%;height: 700upx;background: #F8F8F8;;position: absolute;left:0;bottom: 0;">
					<view class="pop-c"> 
						<view class="pop-t">
							<view class='li-b '>
								<view class='li-b-hd'>
									回收免责条款
								</view>
								<view class='li-b-ft'
								@click="toclose()">
									<image class='icon' src='/static/img/close.png'></image>
								</view>
							</view>
						</view>   
						<view class="neirong">  
							<text style="white-space: pre-wrap;font-size: 28rpx;color: #4c4c4c;">{{xieyi}}</text>	
						</view> 
					</view>
				</view>
			</lvv-popup>
		</view>
		<pay-keyboard :show_key="show_key" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
	</view>
</template>

<script>
	import commonUpload from '@/components/commonUpload.vue'
	import util from '../../common/util.js'
	import payKeyboard from '../../components/keyboard.vue'
	export default {
		components: { commonUpload, payKeyboard },
		data() {
			return {
				isRead: false,
				radioType: 1,
				orderId: '',
				orderDetail: {},
				total_amount: '',
				actual_amount: '',
				xieyi: '',
				payment_vouchers: [],
				goods_images: [],
				pay_password: '',
				show_key: false
			}
		},
		onShow() {
			
		},
		onHide() {  
		},
		onLoad(options) {
			this.orderDetail = uni.getStorageSync('orderDetail');
			this.total_amount = this.orderDetail.total_amount;
			this.actual_amount = this.orderDetail.total_amount;
			this.id = options.id;
			if(options.id){
				this.orderId = options.id;
			}
		}, 
		onReachBottom (){
			 
		},
		methods: { 
			hideFun(){
				this.show_key = false
			},
			getPassword(n){
				console.log("用户输入的密码",n.password)
				this.pay_password = n.password
				this.show_key = false
				this.createPayment();
			},
			recordList(res){
				this.payment_vouchers = res;
			},
			goodsList(res){
				this.goods_images = res
			},
			upPayClick(name){
				this.radioType = name
			},
			selectRead(){
				this.isRead = !this.isRead
			},
			createOrder(){
				this.show_key = true
			},
			createPayment(){
				let data = {
					"order_id": this.orderDetail.id,
					"actual_amount": this.actual_amount,
					"payment_method": this.radioType,
					"payment_vouchers": this.payment_vouchers,
					"goods_images": this.goods_images,
					"pay_password": this.pay_password
				}
				console.log(data);
				this.$api.createPayment(data,res=>{
					if(res.code == '1'){
						uni.showToast({ title: res.msg , icon: 'success' })
						setTimeout(()=>{
							uni.navigateBack({
							  delta: 1
							})
						},2000)
					}else{
						uni.showToast({ title: res.msg , icon: 'none' })
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
	    background: #eee;
	}
	
		.footer{ 
			padding: 20upx 30upx 30upx;
		justify-content: space-between;
		display:flex;
			background-color: #FFFFFF;position: fixed;
				width: 100%;
				bottom: 0px;z-index: 90;
				border:solid 1px #eee;
		}
		.footer .fsz28{
			text-align:center
		}
		.footer .btn{    background-color: #fe5047;
	   color: #ffffff;
	   height: 80rpx;
	   line-height: 80rpx;
	   font-size: 28rpx;
	   // border: solid 1px #fe5047;width: 132px;
		width: 224rpx;
		background: linear-gradient(45deg, #FFAD38 0%, #FF9023 100%);
		border-radius: 45rpx;
		border: none;
		}
	.protBox{
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		background: #F8F4F0;
		position: absolute;
		top: -60rpx;
		left: 0;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		padding-left: 40rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		image{
			width: 24rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}
		.protText{
			color: #FF852C;
		}
	}
	.evalueBox{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.text1{
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
		}
		.text2{
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			margin-left: 22rpx;
		}
	}
	.priceBox{
		margin-top: 6rpx;
		.text1{
			font-weight: 500;
			font-size: 30rpx;
			color: #FF852C;
		}
		.text2{
			font-weight: bold;
			font-size: 40rpx;
			color: #FF852C;
			margin-left: 9rpx;
		}
	}
	
	.moduleBox2{
		margin: 20rpx 36rpx;
		background: #fff;
		border-radius: 30rpx;
		background: #FFF9F0;
	}
	.moduleBox3{
		padding: 31rpx 35rpx 40rpx;
		border-radius: 20rpx;
		background: #fff;
		.moduleLabel{
			font-weight: bold;
			font-size: 30rpx;
			color: #282F38;
		}
		.text3{
			font-weight: 500;
			font-size: 28rpx;
			color: #282F38;
		}
		.text4{
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			margin-left: 28rpx;
		}
		.text5{
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}
		.img2{
			width: 28rpx;
			height: 28rpx;
		}
		.text6{
			font-weight: 500;
			font-size: 30rpx;
			color: #FF852C;
		}
		.text7{
			font-weight: bold;
			font-size: 40rpx;
			color: #FF852C;
		}
	}
	.moduleBox{
		margin: 20rpx 36rpx;
		background: #fff;
		border-radius: 30rpx;
		padding: 31rpx 35rpx 40rpx;
		.moduleLabel{
			font-weight: bold;
			font-size: 30rpx;
			color: #282F38;
		}
		.icon1{
			width: 26rpx;
			height: 26rpx;
		}
		.img1{
			width: 30rpx;
			height: 30rpx;
		}
		.text1{
			font-weight: bold;
			font-size: 28rpx;
			color: #282F38;
			margin-left: 16rpx;
		}
		.text2{
			font-weight: 500;
			font-size: 28rpx;
			color: #95979B;
			margin-left: 22rpx;
		}
		.text3{
			font-weight: 500;
			font-size: 28rpx;
			color: #282F38;
		}
		.text4{
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			margin-left: 28rpx;
		}
		.text5{
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}
		.img2{
			width: 28rpx;
			height: 28rpx;
		}
		.text6{
			font-weight: 500;
			font-size: 30rpx;
			color: #FF852C;
		}
		.text7{
			font-weight: bold;
			font-size: 40rpx;
			color: #FF852C;
		}
	}
	.payLable{
		font-weight: 400;
		font-size: 26rpx;
		color: #FF9526;
		padding: 33rpx;
	}
</style>