<template> 
	<view class="content">	
		<view class="hstop bglv">
			<view class="top_1">{{typeinfo.name}}</view>
			<view class="top_2"> 
				<view class="top_t2" >今日指导价</view>
			</view>
		</view>
		<view class="hs-box">  
			<view class="li-b"  v-for="(item, index) in detail" >
				<view class="li-b-hd">
					{{item.name}}
				</view>
				<view class="li-b-ft"> 
						{{item.price}}元/{{item.unit}} 
				</view>
			</view> 
		</view>  
		<view class="card mr8">
			<view class="title">预估重量</view>
			<view class="card-box" v-if="weightlist"> 
				<view class="li" v-for="(item, index) in weightlist" :key="index"  @click="changeWeight(index)" > 
					<view class="name" :class="[weight==index?'active':'']" >{{item}}</view> 
				</view>  
			</view>  
		</view>	
		 
		<view class="card mr8" v-if="typeinfo.note">
		 	<view class="title">注意事项</view> 
			<view class="note"><text style="white-space: pre-wrap;color:#e64340; ">{{typeinfo.note}}</text></view> 
		</view>  
		<view class="hs-box mr8">
			<view class="li-b "  >
				<view class="li-b-hd">
					预约时间
				</view>
				<view class="li-b-ft"  >
					<picker mode="multiSelector" @change="bindPickerChange" :value="index" :range="yuyue_time">
							
							<view class="hs-input" v-if="timeflag ==''">请选择
							<uni-icons type="right" size="22" style="display: block;float: right;margin-top: -1px;"></uni-icons>
							</view>
							<view class="hs-input" v-else>{{timeflag}}
							<uni-icons type="right" size="22" style="display: block;float: right;margin-top: -1px;"></uni-icons>
							</view>
					</picker> 
				</view>
			</view>
		</view> 
		<view class="hs-box mr8"> 
			<view class="li-b  "  >
				<view class="li-b-hd">
					回收地址
				</view>
				<view class="li-b-ft" @click="goAddress()">
					<text class="hs-input" v-if="useraddress && useraddress.id" style="width:225px;overflow: hidden;text-align: right;">{{ useraddress.address || '' }},{{ useraddress.room_number || '' }}</text>
						<text class="hs-input" v-else>请选择</text>	
					<uni-icons type="right" size="22" style="display: block;float: right;margin-top: -1px;"></uni-icons>
						
				</view>
			</view>
		</view> 
		<view class="hs-box mr8">
			<view class="li-b">
				<view class="li-b-hd">
					下单留言
				</view>
			</view>
			<view class="hs-textarea "> 
				<textarea v-model="remark" placeholder="选填" maxlength="50" /> 
			</view>
		</view>
		<view style="height:100px"></view>
		<view class="footer">  
			<view class="fsz28" @click="toshow()">
				<view>下单即同意</view>
				<view style="color: #31b977;">《回收协议》</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>
</template>

<script>
import lvvPopup from '@/components/lvv-popup/lvv-popup.vue'; 
	export default {
		components: { lvvPopup  },
		data() {
			return { 
				useraddress:{},
				id:0, 
				xieyi:'',
				address_id:0,
				weight:-1 ,
				typeinfo:'',
				detail:[],
				remark:'',
				weightlist:[],
				index:[0,0],
				timeflag:'',
				yuyue_time:[]
			}
		},
		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;
			 this.getdata()
			 
			
			var token = uni.getStorageSync('userToken');  
			if (token) {
				this.userDefaultaddress(); 
			}
			
		}, 
		onReachBottom (){
			 
		},
		methods: {  
			
			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 
					}
				})
			},
			createOrder(){ 
				  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.id,
					order_time:this.timeflag,
					weight:this.weightlist[this.weight],
					address_id:this.address_id,
					remark:this.remark,
				}
				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;
	}
	.hstop{ color:#fff; 
    height: 200rpx;}
	.top_1{padding: 31px 0px 0rpx 58rpx;
    font-size: 50rpx;
    color: #ff;
    width: 90%;
    overflow: hidden;
    height: 68px;}
	.top_2{    width: 100%;
    text-align: right;
    padding-right: 10px;}
	.top_t2{    color: #FFEB3B;
    bottom: 0px; 
    right: 0px; }
	.hs-box {
		background-color: #fff;
	}
	
	.card{ 
		padding: 0rpx 20rpx 20rpx 20rpx;
		    background-color: #FFFFFF; .title{padding-top:45rpx}
	} 
	.card-box{
		display: flex;
		flex-wrap: wrap;    margin-top: 12px;
		
		.li{
			flex: 0 0 33%;
			text-align: center;
			margin-bottom: 15rpx; 
			.name{
				font-size: 26rpx ;
				 border: solid 2px #c3c3c3;
				border-radius: 10rpx;
				margin: 5px;
				padding: 15px 0px;
				font-weight: 600;
				color: #888;
			}
		} 
	}.active{
 	border: solid 2px #31b977 ! important; 
 	color:   #31b977 ! important; font-weight:600;
 }
	.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;
	}
	
	 
	 
	.hs-item-hd{background-color: #fff;    padding: 5px 0px 1px 5px;
	   margin-top:20rpx}
	  .hs-hd-title { border-left: solid 3px #46b45d;padding-left: 4px;font-size: 30rpx;
	    color: #333;    font-weight: bold;}
	.li-b {
		padding: 20upx 26upx 20upx 0;
		width: 724upx;
		margin-left: 26upx;
		border-bottom: 2upx solid #f3f3f3;
		position: relative;
		background-color: #fff;
		color: #333;
		display: flex;
		min-height: 90upx;
		align-items: center;
		justify-content: space-between;
	}
	
	 
	
	.li-b:last-child {
		border: none;
	}
	
	.li-b-hd {
		display: flex; 
		align-items: center;
		font-size: 28upx;
		position: relative;
	} 
	.th-icon {
		width: 40upx;
		height: 40upx;
		display: inline-block; 
		margin-right: 8upx;
	}
	
	.th-title { 
		display: inline-block;
		position: relative; 
	}
	.note{font-size:32rpx;margin-top:12px;}
	.li-b-bd {
		display: flex;
		margin-left: 20upx;
		min-height: 30upx;
		overflow: hidden;
		align-items: center;
		padding-right: 50upx;
	}
	
  
	
	.hs-input {
		display: inline-block;
		float: left;
		font-size: 30upx;
	}
	
	.li-b-ft {
		display: flex;
		align-items: center;
	}
	
	.right-img .li-b-ft {
		right: 8upx;
		height: 50upx;
		position: absolute;
	}
	 
	 
	 
	 
	.icon {
		width: 50upx;
		height: 50upx; 
	}
	 
	
	.hs-textarea {
		padding: 0 26upx 20upx;
	}
	 
	.hs-textarea textarea {
		width: 100%;
		height: 100upx;
		font-size: 26upx;
		color: #333;
	} 
 .neirong{height: 252px;
    overflow-y: auto;
    padding: 10px 20px;}
	.input-value{padding:0px}.input-arrow{display:none}
</style>