<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>			
		</div>
		<!-- 寄件地址 -->
		<div class="sjinfo">
			<div>
				<div class="top"><p>1</p></div>
				<div class="sj">
					<div class="sjaddress">
						<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 cz">
						<div>
							<img src="../assets/images/whrite.png" alt="">
							<p>编辑</p>
						</div>
						<div>
							<img src="../assets/images/del.png" alt="">
							<p>删除</p>
						</div>
					</div>
				</div>
				<div class="sj" style="border-top:.01rem solid #ededed">
					<div class="sjaddress">
						<van-field v-model="wpinfo" name="物品信息" label="物品信息" placeholder="请填写"  @click="wp=true" readonly/>
					</div>
				</div>
			</div>
			
		</div>
		<!-- 寄件地址 -->
		<div class="sjinfo">
			<div>
				<div class="top"><p>2</p></div>
				<div class="sj">
					<div class="sjaddress">
						<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 cz">
						<div>
							<img src="../assets/images/whrite.png" alt="">
							<p>编辑</p>
						</div>
						<div>
							<img src="../assets/images/del.png" alt="">
							<p>删除</p>
						</div>
					</div>
				</div>
				<div class="sj" style="border-top:.01rem solid #ededed">
					<div class="sjaddress">
						<van-field v-model="wpinfo" name="物品信息" label="物品信息" placeholder="请填写" readonly @click="wp=true"/>
					</div>
					
				</div>
			</div>
			
		</div>
		<!-- 添加收件人 -->
		<div class="add_per">
			<div>
				<div class="add_per_info">
					<p style="background: #fa9c22;">收</p>
					<p>+添加收件人</p>
				</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="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 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>
		<!-- 选择物品 -->
		<van-popup v-model="wp" round closeable>
		  <div class="wpinfo">
			  <div>
				  <van-field name="radio" label="包裹类型">
				    <template #input>
				      <van-radio-group v-model="radio" direction="horizontal">
				        <van-radio name="物品" shape="square">物品</van-radio>
				        <van-radio name="文件" shape="square">文件</van-radio>
				      </van-radio-group>
				    </template>
				  </van-field>
				  <van-field name="stepper" label="预估数量(/KG)">
				    <template #input>
				      <van-stepper v-model="kg" />
				    </template>
				  </van-field>
				  <van-field name="stepper" label="文件数量(/件)">
				    <template #input>
				      <van-stepper v-model="num" />
				    </template>
				  </van-field>
				  <div style="margin-top: 16px;">
				    <van-button color="#00c4b8" block type="info" @click="wpconform">确定</van-button>
				  </div>
			  </div>
			  
		  </div>
		</van-popup>
	</div>	
</template>

<script>
	import areaList from "@/script/areas.js"
	export default{
		data(){
			return {
				titlename:"批量寄",
				addshow:false,
				name:"",
				phone:"",
				city:"",
				address:"",
				areashow:false,
				index:"",
				title:"",
				jjname:"",
				jjadd:"",
				sjname:"",
				sjadd:"",
				check:false,
				wpinfo:"",//物品信息
				wp:false,
				kg:1,
				num:1,
				radio:"",
				showPicker:false,//快递
				value:"",
				columns:["顺丰快递","中通快递","圆通快递"],
			}
		},
		created:function(){
			//this.areaList=area.areaList
		},
		methods:{
			// 选择快递公司
			onConfirm(e){
				this.value=e
				this.showPicker=false
			},
			// 选择物品确定
			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}})
			},
			// 物品选择
			wpconform(){
				console.log(this.radio)
				this.wpinfo=this.radio+'、'+this.kg+'kg、'+this.num+'件'
				this.wp=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 .2rem;
				.jj{
					display: flex;
					justify-content: space-between;
					padding: .15rem 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;
							width: 4.2rem;
							p:nth-of-type(1){
								font-size: .24rem;
								color: #333;
								margin-bottom: .2rem;
							}
							p:nth-of-type(2){
								font-size: .24rem;
							}
						}
					}
					.dzb{
						text-align: center;
						border-left: .01rem solid #ededed;
						min-width: 1.4rem;
						img{
							width:.39rem;
							height: .42rem;
							padding-top: .2rem;
						}
						p{
							font-size: .2rem;
						}
						
					}
				}
		    }
		
		}
		.sjinfo{
			font-size: .24rem;
			color: #999999;
			padding: 0rem .33rem .33rem .33rem;		
			>div{
                background: white;
                border-radius: .05rem;
                padding: .3rem .2rem .1rem;
				position: relative;
				.top{
					background: url(../assets/images/top.png) no-repeat left top;
					background-size: 100% 100%;
					position: absolute;
					left: 0px;
					top: 0px;
					width: .6rem;
					height: .5rem;
					color: white;
					text-align: center;
					p{
						position: relative;
						right: .1rem;
						top: .01rem;
					}
				}
				.sj{
					display: flex;
					justify-content: space-between;
					padding: .15rem 0rem;
					.sjaddress{
						width: 100%;
						display: flex;
						padding: .1rem 0rem;
						/deep/.van-field{
							padding: 0rem;

							.van-field__value{
								input{
									text-align: right;
									padding: 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: .2rem;
						}
						div{
							//font-weight: bold;
							//width: 4.2rem;
							p:nth-of-type(1){
								font-size: .24rem;
								color: #333;
								margin-bottom: .2rem;
							}
							p:nth-of-type(2){
								font-size: .24rem;
							}
						}
					}
					.dzb{
						text-align: center;
						border-left: .01rem solid #ededed;
						//padding-left: .3rem;
						min-width: 1.4rem;
						>img{
							width:.39rem;
							height: .42rem;
							padding-top: .2rem;
						}
						>p{
							font-size: .2rem;
						}
						
					}
					.cz{
						display: flex;
						justify-content: center;
						padding-left: 0rem;
						padding-top: .2rem;
						div{
							text-align: center;
							padding: 0rem .05rem 0rem;
							img{
								width: .26rem;
								height: .26rem;
							}
							p {
								font-size:.1rem;
								color: #999999;
								
							}
						}
					}
				}
						
			}				
		}
		.add_per{
			div{
				font-size: .3rem;
				color: #999999;
				font-weight: bold;
				padding: 0rem .33rem;
				margin-bottom: .3rem;
				border-radius: .05rem;
				.add_per_info{
					background: white;
					display: flex;
					color: #333;
					padding: .33rem .2rem;
					p:nth-of-type(1){
						font-size: 0.24rem;
						font-weight: bold;
						display: inline-block;
						width: 0.5rem;
						height: 0.5rem;
						text-align: center;
						line-height: 0.5rem;
						color: white;
						border-radius: 50%;
						margin-right: 0.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;
			margin-bottom: .3rem;
			>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;
		}
	}
	.wpinfo{
		width: 6.6rem;
		padding: .2rem;
		.van-field{
			.van-field__label{
				width:2rem;
				
			}
            .van-field__value{
				input{
					width:64px
				}
			}
		}
	}
</style>
