<template>
  <div class="content">
    <back :title="titlename"></back>
    <!-- 寄件地址 -->
    <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="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" @click="link(2)">
            <img src="../assets/images/addlist.png" alt="" />
            <p>地址簿</p>
          </div>
        </div>
        <div class="sj" style="border-top:.01rem solid #ededed">
          <div class="sjaddress">
            <van-field
              v-model="wpinfo"
              name="物品信息"
              label="物品信息"
              placeholder="请填写"
            />
          </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>
    </div>
    <!-- 寄件属性 -->
    <div class="choose">
      <div>
        <div class="type_wp">
          <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="check">
      <van-checkbox icon-size=".24rem" v-model="check" shape=""
        >我同意《电子运单契约条款》</van-checkbox
      >
    </div>
    <!-- 寄件 -->
    <div class="btn-jj">
      <van-button type="info" color="#0c2469">立即寄件</van-button>
    </div>
    <!-- 弹窗付款方式 -->
    <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="#0c2469" 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: "批量寄",
      pricetype: "", //付款类型
      priceshow: false, //付款类型弹窗显示
      pricelist: ["月结", "日结", "到付"],
      addshow: false,
      name: "",
      phone: "",
      city: "",
      address: "",
      areashow: false,
      index: "",
      title: "",
      jjname: "",
      jjadd: "",
      sjname: "",
      sjadd: "",
      check: false,
      wpinfo: "" //物品信息
    };
  },
  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 } });
    }
  },
  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: .2rem 0rem;
				.jjaddress{
					display: flex;
					padding: .1rem 0rem;
					width: 4.8rem;
					>p{
						font-size: .24rem;
						font-weight: bold;
						display: inline-block;
						width:.5rem;
						height: .5re#0c2469;
						background: #0c2469;
						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: .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: .1rem .2rem;
			.sj{
				display: flex;
				justify-content: space-between;
				padding: .2rem 0rem;
				.sjaddress{
					display: flex;
					padding: .1rem 0rem;
					width: 4.8rem;
					/deep/.van-field{
						padding: 0rem;

						.van-field__value{
							input{
								text-align: right;
								padding: 0rem;
							}

						}
					}
					>p{
						font-size: #0c2469;
						font-weight: bold;
						display: inline-block;
						width:.5rem;
						height: .5rem;
						background: #0c2469;
						text-align: center;
						line-height: .5rem;
						color: white;
						border-radius: 50%;
						margin-right: .2rem;
					}
					div{
						//font-weight: bold;
						width: 4.8rem;
						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;
					div{
						text-align: center;
						padding: 0rem .05rem 0rem;
						img{
							width: .26rem;
							height: .26rem;
						}
						p {
							font-size:.1rem;
							color: #999999;

						}
					}
				}
			}

		}
	}
	.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>
