<template>
	<div class="content">
		
		<!-- 寄件地址 -->
		<div class="jjinfo">
			<div>
				<div class="jj">
					<div class="jjaddress">
						<p>寄</p>
						<div>
							<p v-if="jjname==''||jjname==' '">寄件地址</p>
							<p v-else>{{jjname}}</p>
							<p v-if="jjadd==''||jjadd==' '" @click="addtype(1)">填写寄件地址</p>
							<p v-else @click="addtype(1)">{{jjadd}}</p>
						</div>
					</div>
					<div class="dzb" @click="link(1)">
						<img src="../assets/images/addlist.png" alt="">
						<p>地址簿</p>
					</div>				
				</div>
				<div class="jj" style="border-top:.01rem solid #ededed">
					<div class="jjaddress">
						<p style="background: #fa9c22;">收</p>
						<div>
							<p v-if="sjname==''||sjname==' '">寄件地址</p>
							<p v-else>{{sjname}}</p>
							<p v-if="sjadd==''||sjadd==' '" @click="addtype(2)">填写收件地址</p>
							<p v-else @click="addtype(2)">{{sjadd}}</p>
						</div>
					</div>
					<div class="dzb" @click="link(2)">
						<img src="../assets/images/addlist.png" alt="">
						<p>地址簿</p>
					</div>
				</div>
			</div>
			
		</div>
		<!-- 快递公司 -->
		<div class="kdshow">
			<van-field readonly clickable name="picker" :value="value" label="快递公司" placeholder="请选择快递公司" @click="showPicker = true" />
			<van-popup v-model="showPicker" position="bottom">
			  <van-picker
			    show-toolbar
			    :columns="columns"
			    @confirm="onConfirm"
			    @cancel="showPicker = false"
			  />
			</van-popup>
		</div>
		<!-- 寄件属性 -->
		<div class="choose">
			<div>
				<div class="type_wp">
					<div>
						<p>物品类型</p>
						<p v-if="wptype==''" @click="wpshow=true">请选择</p>
						<p v-else @click="wpshow=true">{{wptype}}</p>
					</div>
					<div>
						<p>重量</p>
						<p>一件</p>
					</div>
				</div>
				<div class="type_price">
					<div>
						<p>付款方式</p>
                        <p v-if="pricetype==''" @click="priceshow=true">请选择</p>
						<p v-else @click="priceshow=true">{{pricetype}}</p>
					</div>
					<div>
						<p>声明价值</p>
						<p>0元</p>
					</div>
				</div>
			</div>			
		</div>
		<!-- 备注 -->
		<div class="bz">
			<div>
				<van-field v-model="bz" name="备注" label="备注" placeholder="包装运输等要求"/>
			</div>		
		</div>
		<!-- 我同意 -->
		<div class="check">
			<van-checkbox icon-size=".24rem" v-model="check" shape="">我同意《电子运单契约条款》</van-checkbox>
		</div>
		<!-- 寄件 -->
		<div class="btn-jj">
			<van-button type="info" color="#00c4b8">立即寄件</van-button>
		</div>
		<!-- 弹窗物品类型 -->
		<van-popup v-model="wpshow" position="bottom">
		  <van-picker title="物品类型" show-toolbar :columns="wplist" @confirm="onConfirm1" @cancel="wpshow=false"/>
		</van-popup>
		<!-- 弹窗付款方式 -->
		<van-popup v-model="priceshow" position="bottom">
		  <van-picker title="付款方式" show-toolbar :columns="pricelist" @confirm="onConfirm2" @cancel="priceshow=false"/>
		</van-popup>
		<!-- 填写地址 -->
		<van-popup round v-model="addshow" class="whrite_add" closeable closed="close">
			<div>
				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">{{title}}</p>
				<van-form @submit="onSubmit">
				  <van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名"/>
				  <van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"/>
				  <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" />
				  <van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址"/>
				  <div style="margin-top: 16px;">
				    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
				  </div>
				</van-form>
			</div>
		  
		</van-popup>
		<!-- 城市选择 -->
		<van-popup v-model="areashow" position="bottom">
		  <van-area
		    :area-list="areaList"
		    @confirm="onConfirm3"
		    @cancel="areashow = false"
		  />
		</van-popup>
		
	</div>	
</template>

<script>
	import areaList from "@/script/areas.js"
	export default{
		data(){
			return {
				titlename:"寄件",
				wptype:"",//物品类型
				wpshow:false,//物品类型弹窗显示
				wplist:["物品1","物品二"],
				pricetype:"",//付款类型
				priceshow:false,//付款类型弹窗显示
				pricelist:["月结","日结","到付"],
				addshow:false,
				name:"",
				phone:"",
				city:"",
				address:"",
				areashow:false,
				index:"",
				title:"",
				jjname:"",
				jjadd:"",
				sjname:"",
				sjadd:"",
				bz:"",
				check:false,
				showPicker:false,//快递
				value:"",
				columns:["顺丰快递","中通快递","圆通快递"],
			}
		},
		created:function(){
			//this.areaList=area.areaList
		},
		methods:{
			// 选择物品确定
			onConfirm1(e){//确定
				this.wptype=e
				this.wpshow=false
				console.log(e)
			},
			// 选择付款方式确定
			onConfirm2(e){//确定
				this.pricetype=e
				this.priceshow=false
				console.log(e)
			},
			// 填写地址确定
			onConfirm3(e){//确定
				this.city=e[0].name+' '+e[1].name+' '+e[2].name
				this.areashow=false
				console.log(e)
			},
			// 寄件地址1与收件地址2
			addtype(obj){
				this.index=obj
				if(obj==1){
					this.title="寄件地址"
				}
				if(obj==2){
					this.title="收件地址"
				}
				this.addshow=true
			},
			// 填写地址确定
			onSubmit(){
				if(this.index==1){
					this.jjname=this.name+' '+this.phone
					this.jjadd=this.city+' '+this.address
				}
				if(this.index==2){
					this.sjname=this.name+' '+this.phone
                    this.sjadd=this.city+' '+this.address
				}
				this.addshow=false
				this.name=""
				this.phone=""
				this.city=""
				this.address=""
			},
			close(){
				this.name=""
				this.phone=""
				this.city=""
				this.address=""
			},
			// 地址簿跳转
			link(obj){
				this.$router.push({path:'/Addressbook',query:{active:obj}})
			},
			// 选择快递公司
			onConfirm(e){
				this.value=e
				this.showPicker=false
			},
		},
		computed:{
			areaList(){
				return areaList
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		.jjinfo{
			font-size: .24rem;
			color: #999999;
			padding: .33rem;
			>div{
				background: white;
				border-radius: .05rem;
				padding: .1rem .3rem;
				.jj{
					display: flex;
					justify-content: space-between;
					padding: .2rem 0rem;
					.jjaddress{
						display: flex;
						padding: .1rem 0rem;
						>p{
							font-size: .24rem;
							font-weight: bold;
							display: inline-block;
							width:.5rem;
							height: .5rem;
							background: #00c4b8;
							text-align: center;
							line-height: .5rem;
							color: white;
							border-radius: 50%;
							margin-right: .3rem;
						}
						div{
							//font-weight: bold;
							max-width: 4.2rem;
							p:nth-of-type(1){
								font-size: .24rem;
								color: #333;
								margin-bottom: .2rem;
							}
							p:nth-of-type(2){
								font-size: .3rem;
							}
						}
					}
					.dzb{
						text-align: center;
						border-left: .01rem solid #ededed;
						padding-left: .3rem;
						
						img{
							width:.39rem;
							height: .42rem;
							padding-top: .2rem;
						}
						p{
							font-size: .2rem;
						}
						
					}
				}
		    }
		
		}
		.kdshow{
			font-size: .3rem;
			padding: .3rem 0px;
			width: 6.84rem;
			background: white;
			border-radius: .05rem;
			margin: 0rem auto .2rem;
			/deep/.van-cell{
				padding: 0px .3rem;
				overflow: unset;
				input{
					text-align: right;
					height: .5rem;
					padding-right: .25rem;
				}
			}
			/deep/.van-cell::after{
				content: "";
				display: inline-block;
				border-right: .01rem solid #b0b0b0;
				border-bottom: .01rem solid #b0b0b0;
				transform: rotate(-45deg);
				left: unset;
				position: absolute;
				right: .3rem;
				bottom: .15rem;
				width: .2rem;
				height: .2rem;
			}
		}
		.choose{
			font-size: .3rem;
			color: #999999;
			font-weight: bold;
			padding: 0rem .33rem;
			>div{
				background: white;
				
				padding: .3rem .3rem;
				border-radius: .05rem;
				.type_wp{
					display: flex;
					justify-content: center;
					div{
						flex: 1;
						text-align: center;
						p:nth-of-type(2){
							color: #333;
							margin-top: .2rem;
							font-size: .36rem;
							//position: relative;
						}
						
					} 
					div:nth-of-type(1){
						border-right: .01rem solid #ededed;
						p:nth-of-type(2):after{
							content: "";
							display: inline-block;
							width: .15rem;
							height: .15rem;
							border-bottom: .01rem solid #999;
							border-right: .01rem solid #999;
							transform: rotate(45deg);
							margin-left: .15rem;
							position: relative;
							top: -.08rem;
						}
					}
				}
				.type_price{
					display: flex;
					justify-content: center;
					border-top: .01rem solid #ededed;
					margin-top: .3rem;
					padding-top: .3rem;
					div{
						flex: 1;
						text-align: center;
						p:nth-of-type(2){
							color: #333;
							margin-top: .2rem;
							font-size: .36rem;
						}
					}
					div:nth-of-type(1){
						border-right: .01rem solid #ededed;
						p:nth-of-type(2):after{
							content: "";
							display: inline-block;
							width: .15rem;
							height: .15rem;
							border-bottom: .01rem solid #999;
							border-right: .01rem solid #999;
							transform: rotate(45deg);
							margin-left: .15rem;
							position: relative;
							top: -.08rem;
						}
					}
				}
			}
			
		}
	    .bz{
			padding: .33rem;
		    font-size: .3rem;
			/deep/.van-field__value{
				input{
					text-align: right;
				}
				
			}
		}
		.check{
			font-size: .24rem;
			
			text-align: center;
			
			/deep/.van-checkbox{
				justify-content: center;
				.van-checkbox__label{
					color: #999;
				}
			}
		}
		.btn-jj{
			padding: .33rem;
			button{
				width: 100%;
			}
		}
	}
	.whrite_add{
		width: 6.6rem;
		padding: .4rem .2rem;
		/deep/.van-field__value{
			input{
				text-align: right;
			}
			
		}
		/deep/.van-popup__close-icon--top-right{
			top: 5px;
			right: 10px;
		}
	}
</style>
