<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="!upPayCheck" :src="path+'/assets/img/icon/noSelected.png'" @click="upPayClick" class="img1"></image>
					<image v-else :src="path+'/assets/img/icon/selected.png'" @click="upPayClick" 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="!downPayCheck" :src="path+'/assets/img/icon/noSelected.png'" @click="downPayClick" class="img1"></image>
					<image v-else :src="path+'/assets/img/icon/selected.png'" @click="downPayClick" class="img1"></image>
				</view>
			</view>
			<view class="moduleBox">
				<view class="moduleLabel">
					支付方式
					<text class="text2">请上传支付记录截图或照片</text>
				</view>
				<view style="margin-top: 35rpx;">
					<commonUpload></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">323</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">323</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></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: evaluate?1:0}">
						<text class="text1">￥</text>
						<text class="text2">{{evaluate}}</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>
	</view>
</template>

<script>
	import lvvPopup from '@/components/lvv-popup/lvv-popup.vue';
	import commonUpload from '@/components/commonUpload.vue'
	import util from '../../common/util.js'
	export default {
		components: { lvvPopup,commonUpload  },
		data() {
			return { 
				useraddress:{},
				id:0, 
				xieyi:'',
				address_id:0,
				weight:-1 ,
				typeinfo:'',
				detail:[],
				remark:'',
				weightlist:[],
				index:[0,0],
				timeflag:'',
				yuyue_time:[],
				typelist: [],
				typeShow: false,
				value1: '',
				recyclingType: {},
				specifications: [],
				addressInfo: {},
				toDoorShow: false,
				showTime: Number(new Date()),
				toDoorTime: '',
				notesText: '',
				specsList: [],
				quantity: '',
				path: this.path,
				isRead: false,
				evaluate: '',
				
				upPayCheck: false,
				downPayCheck: false
			}
		},
		onShow() {
			 this.getdata()
			 let user_address = uni.getStorageSync('user_address');  
		 
			 if (user_address) {
			 	this.useraddress = user_address;
			 	this.address_id = user_address.id;  
			 	uni.removeStorageSync('user_address');  
			 }
		},
		onHide() {  
		},
		onLoad(options) {   
			this.id = options.id;
			if(options.id){
				this.recyclingType.id = options.id;
			}
			 this.getdata()
			this.getTypeData()  
			var token = uni.getStorageSync('userToken');  
			if (token) {
				this.userDefaultaddress(); 
			}
			
		}, 
		onReachBottom (){
			 
		},
		methods: { 
			upPayClick(){
				this.upPayCheck = !this.upPayCheck
			},
			downPayClick(){
				this.downPayCheck = !this.downPayCheck
			},
			selectRead(){
				this.isRead = !this.isRead;
			},
			doorTimeClick(){
				this.toDoorShow = true;
				// if(!this.toDoorTime){
				// 	this.showTime = util.formatDate(new Date(),'YYYY-MM-DD')
				// }
			},
			confirmTime(data){
				console.log(data)
				this.showTime = data.value;
				this.toDoorTime = util.formatDate(data.value,'YYYY-MM-DD HH:mm')
				this.toDoorShow = false;
			},
			cancelClick(){
				this.toDoorShow = false;
			},
			openSelect(item,index) {
				this.specifications[index].show = true;
				console.log(index, this.specifications[index])
			},
			selectConfirm(value,item,index) {
				console.log(value,item,index, 'dddddddddww')
				this.specifications[index].select = {
					key: item.name,
					val: value.value[0]
				}
				this.specifications[index].show = false;
				console.log(this.specifications)
				this.getPrice()
			},
			selectType(val) {
				console.log(val.value[0])
				this.recyclingType = val.value[0]
				this.typeShow = false
				this.getTypeSpecs(val.value[0].name)
			},
			getTypeData(){
				let data = { 
				}
				this.$api.indexpage(data,res=>{ 
					if(res.code == '1'){
						this.typelist = [res.data.type]
						res.data.type.some((item,index)=>{
							if(item.id == this.recyclingType.id){
								this.recyclingType = item;
							}
						})
					}
				})
			}, 
			getTypeSpecs(name){
				// /api/recover/recover/type_specs
				this.$api.type_specs({type_name: name}, res => {
					if (res.code ==1) {
						if(res.data){
							// this.useraddress = res.data;
							// this.address_id = this.useraddress.id;
							console.log(res.data,'dddd')
							this.specsList = res.data.specs;
							for (let key in res.data.specArr) {
							  this.specifications.push({
								  name: key,
								  arr: res.data.specArr[key],
								  show: false,
								  select: {}
							  })
							}
							console.log(this.specifications)
						}
						
					}
				});
			},
			userDefaultaddress() {
				this.$api.userDefaultAddress({}, res => {
					if (res.code ==1) {
						if(res.data){
							this.useraddress = res.data;
							this.address_id = this.useraddress.id;
						}
						
					}
				});
			},
			goAddress() {
				var token = uni.getStorageSync('userToken');  
				if (!token) {
					uni.navigateTo({
						url: '/pages/login/authorize'
					});  
				}else{
					uni.navigateTo({
						url: '/pages/address/list?type=order'
					});
				} 
			}, 
			toshow() {
				this.$refs.lvvpopref.show();
			}, 
			toclose() { 
				this.$refs.lvvpopref.close();
			},
			changeWeight(e){
				this.weight=e;console.log(e);
			}, 
			bindPickerChange(e) { 
				this.index = e.detail.value
				let left = e.detail.value[0]
				let right = e.detail.value[1] 
				if(this.yuyue_time[1].length ==0){ 
					this.timeflag = this.yuyue_time[0][left]    
				}else{ 
					this.timeflag = this.yuyue_time[0][left] +'-'+this.yuyue_time[1][right] 
				}
			},
			getdata(){
				let data = {
					id:this.id
				}
				this.$api.typeinit(data,res=>{ 
					if(res.code == '1'){
						this.yuyue_time = res.data.yuyue_time
						this.typeinfo= res.data.typeinfo
						this.weightlist= res.data.weight
						this.detail= res.data.detail  
						this.xieyi=res.data.xieyi 
					}
				})
			},
			areObjectsEqual(obj1, obj2) {
			    const keys1 = Object.keys(obj1);
			    const keys2 = Object.keys(obj2);
			    if (keys1.length !== keys2.length) {
			        return false;
			    }
			    for (let key of keys1) {
			        if (obj1[key] !== obj2[key]) {
			            return false;
			        }
			    }
			    return true;
			},
			getPrice(){
				let selecObj = {}
				this.specifications.some((item,index)=>{
					selecObj[item.select.key] = item.select.val
				})
				let priceId = ''
				this.specsList.some((item,index)=>{
					if(this.areObjectsEqual(item.spec_data,selecObj)){
						priceId = item.id
						if(this.quantity){
							this.evaluate = item.current_price*this.quantity
						}else{
							this.evaluate = ''
						}
					}
				})
				return priceId
			},
			createOrder(){ 
				console.log(this.specifications,'fff')
				if(!this.isRead){
					  uni.showToast({	icon: "none",	title: '请勾选用户回收协议'     }) 
					 return false;
				}
				// let selecObj = {}
				// this.specifications.some((item,index)=>{
				// 	selecObj[item.select.key] = item.select.val
				// })
				// let priceId = ''
				// this.specsList.some((item,index)=>{
				// 	if(this.areObjectsEqual(item.spec_data,selecObj)){
				// 		priceId = item.id
				// 	}
				// })
				let priceId = this.getPrice
				// console.log(selecObj,priceId);
				// if(this.weight =='-1'){ 
				// 	  uni.showToast({	icon: "none",	title: '请选择预约重量'     }) 
				// 	 return false;
				// }if(this.address_id ==0 || !this.address_id ){ 
				// 	  uni.showToast({	icon: "none",	title: '请选择回收地址'     })  
				// 		return false;
				// } if(this.timeflag ==''){ 
				// 	  uni.showToast({	icon: "none",	title: '请选择回收时间'    })  
				// 	return false;
				// } 
				let data = {
					id: this.recyclingType.id,//this.id,
					order_time: this.toDoorTime,//this.timeflag,
					// weight:this.weightlist[this.weight],
					address_id: this.useraddress.id,//this.address_id,
					remark: this.notesText, //this.remark,
					specsId: priceId,
					quantity: this.quantity
				}
				console.log(data,'gggggg')
				// return;
				this.$api.addorder(data,res=>{ 
					uni.showToast({
						title: res.msg,
						icon: 'none'
					}) 
					if(res.code == '1'){
						 
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/order/order'
							})
						}, 1500)
					} else {
						 
					}
				})
			}, 
		}
	}
</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>