<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="link(1)">
                请用英文填写寄件地址
              </p>
              <p v-else @click="link(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="link(2)">
                请用英文填写收件信息
              </p>
              <p v-else @click="link(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="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>
              <template v-if="wptype == '物品'">重量(公斤)</template>
              <template v-if="wptype == '文件'">数量(件数)</template>
            </p>
            <p>
              <van-field name="stepper" style="padding: 0px;">
                <template #input>
                  <van-stepper v-model="stepper"></van-stepper>
                </template>
              </van-field>
            </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="sbxx" name="申报信息" label="申报信息" @click="links" placeholder="必填"/>
			</div> -->
      <div>
        <van-field
          type="number"
          v-model="bjprice"
          name="保价"
          label="保价"
          placeholder="最高赠7倍运费,建议保价"
        />
      </div>
    </div>
    <!-- 预计送达时间 -->
    <!-- <div class="sdtime">
			<div>
				<p>预计送达时间</p>
				<div>
					<p class="active">
						<span>3日18:00前</span>
						<span>￥36起</span>
					</p>
					<p>
						<span>3日18:00前</span>
						<span>￥36起</span>
					</p>
				</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" @click="save()"
        >立即寄件</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
      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="请用英文输入详细地址"
          />
          <van-field
            v-model="emailAddress"
            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";
import { Stepper, Toast } from "vant";
export default {
  data() {
    return {
      titlename: "国际件",
      wptype: "物品", //物品类型
      wpshow: false, //物品类型弹窗显示
      wplist: ["物品", "文件"],
      addshow: false,
      name: "",
      phone: "",
      city: "",
      address: "",
      areashow: false,
      index: "",
      title: "",
      jjname: "",
      jjadd: "",
      sjname: "",
      sjadd: "",
      sbxx: "",
      check: false,
      bjprice: "",
      stepper: "",
      emailAddress: "" //邮箱地址
    };
  },
  created: function() {
    this.isLogin();
    //this.areaList=area.areaList
    if (JSON.stringify(this.$store.state.foreignJjInfo) != "{}") {
      this.jjname = this.$store.state.foreignJjInfo.jjname;
      this.jjadd = this.$store.state.foreignJjInfo.jjadd;
      /* this.personName = this.$store.state.foreignJjInfo.personName
			this.countryCode = this.$store.state.foreignJjInfo.countryCode
			this.emailAddress = this.$store.state.foreignJjInfo.emailAddress
			this.postalCode = this.$store.state.foreignJjInfo.postalCode
			this.companyName = this.$store.state.foreignJjInfo.companyName
			this.phone = this.$store.state.foreignJjInfo.phone
			this.address = this.$store.state.foreignJjInfo.address
			this.city = this.$store.state.foreignJjInfo.city */
    }
    if (JSON.stringify(this.$store.state.foreignSjInfo) != "{}") {
      this.sjname = this.$store.state.foreignSjInfo.sjname;
      this.sjadd = this.$store.state.foreignSjInfo.sjadd;
      // this.personName = this.$store.state.foreignSjInfo.personName
      // this.countryCode = this.$store.state.foreignSjInfo.countryCode
      // this.emailAddress = this.$store.state.foreignSjInfo.emailAddress
      // this.postalCode = this.$store.state.foreignSjInfo.postalCode
      // this.companyName = this.$store.state.foreignSjInfo.companyName
      // this.phone = this.$store.state.foreignSjInfo.phone
      // this.address = this.$store.state.foreignSjInfo.address
      // this.city = this.$store.state.foreignSjInfo.city
    }
  },
  methods: {
    // 选择物品确定
    onConfirm1(e) {
      //确定
      this.wptype = e;
      this.wpshow = false;
    },
    // 填写地址确定
    onConfirm3(e) {
      //确定
      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
      this.areashow = false;
    },
    // 寄件地址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.emailAddress;
        this.jjadd = this.city + " " + this.address;
      }
      if (this.index == 2) {
        this.sjname = this.name + " " + this.phone + " " + this.emailAddress;
        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: "/Foreignaddress", query: { active: obj } });
    },
    // 申报信息跳转
    links(obj) {
      this.$router.push({ path: "/Sbxx" });
    },
    // 选择快递公司
    onConfirm(e) {
      this.value = e;
      this.showPicker = false;
    },
    //立即寄件交互
    save() {
      if (
        this.jjname == "" ||
        this.jjname == undefined ||
        this.jjadd == "" ||
        this.jjadd == undefined
      ) {
        Toast("请填写寄件人信息");
        return;
      }

      if (
        this.sjname == "" ||
        this.sjname == undefined ||
        this.sjadd == "" ||
        this.sjadd == undefined
      ) {
        Toast("请填写收件人信息");
        return;
      }

      /* if(this.expressInfo == '' || this.expressInfo == undefined){
				Toast('请选择快递公司')
				return
			} */

      if (this.wptype == "" || this.wptype == undefined) {
        Toast("请选择物品类型");
        return;
      }

      if (this.stepper == "" || this.stepper == undefined) {
        Toast("请选择重量/数量");
        return;
      }

      /* if(this.pricetype == '' || this.pricetype == undefined){
				Toast('请选择付款方式')
				return
			} */
      // let payWay = ''
      // let mainType = ''
      // if(this.pricetype == "自费(个人件)"){
      // 	payWay = '自费'
      // 	mainType = '个人件'
      // }
      // if(this.pricetype == "月结(公司件)"){
      // 	payWay = '月结'
      // 	mainType = '公司件'
      // }

      if (this.check == false) {
        Toast("请点击同意《电子运单契约条款》");
        return;
      }

      Toast.loading({
        message: "保存中...",
        forbidClick: true,
        duration: 0
      });

      this.$http
        .post(
          this.$store.state.host + "/sendMail/saveMail.do",
          {
            userId: localStorage.getItem("userId"),
            sender: this.$store.state.foreignJjInfo.personName,
            senderPhone: this.$store.state.foreignJjInfo.phone,
            sendAddr: this.$store.state.foreignJjInfo.city,
            sendAddress: this.$store.state.foreignJjInfo.address,
            sendCountryCode: this.$store.state.foreignJjInfo.countryCode,
            sendEmailAddress: this.$store.state.foreignJjInfo.emailAddress,
            sendPostalCode: this.$store.state.foreignJjInfo.postalCode,
            sendCompanyName: this.$store.state.foreignJjInfo.companyName,
            receiver: this.$store.state.foreignSjInfo.personName,
            receiverPhone: this.$store.state.foreignSjInfo.phone,
            receiveAddr: this.$store.state.foreignSjInfo.city,
            receiveAddress: this.$store.state.foreignSjInfo.address,
            receiveCountryCode: this.$store.state.foreignSjInfo.countryCode,
            receiveEmailAddress: this.$store.state.foreignSjInfo.emailAddress,
            receivePostalCode: this.$store.state.foreignSjInfo.postalCode,
            receiveCompanyName: this.$store.state.foreignSjInfo.companyName,
            expressInfo: 3,
            itemType: this.wptype,
            mainType: "",
            weight: this.stepper,
            itemNum: this.stepper,
            payWay: "",
            expressType: "外部件",
            declaredValue: this.bjprice,
            itemRemark: "",
            expressPhone: ""
          },
          { emulateJSON: true }
        )
        .then(
          res => {
            //发送成功
            if (res.body.msg == "success") {
              Toast("下单成功，快递员将尽快上门取件！");
              let that = this;
              setTimeout(function() {
                that.$router.push({ path: "/" });
              }, 1000);
            } else {
              Toast("寄件失败");
            }
          },
          res => {
            //发送失败
            Toast("网络错误");
          }
        );
      Toast.clear();
    }
  },
  computed: {
    areaList() {
      return areaList;
    }
  }
};
</script>

<style scoped lang="less">
.content {
  .jjinfo {
    font-size: 0.24rem;
    color: #999999;
    padding: 0.33rem;

    > div {
      background: white;
      border-radius: 0.05rem;
      padding: 0.1rem 0.3rem;

      .jj {
        display: flex;
        justify-content: space-between;
        padding: 0.2rem 0rem;

        .jjaddress {
          display: flex;
          padding: 0.1rem 0rem;

          > p {
            font-size: 0.24rem;
            font-weight: bold;
            display: inline-block;
            width: 0.5rem;
            height: 0.5rem;
            background: #0c2469;
            text-align: center;
            line-height: 0.5rem;
            color: white;
            border-radius: 50%;
            margin-right: 0.3rem;
          }

          div {
            //font-weight: bold;
            max-width: 4.2rem;

            p:nth-of-type(1) {
              font-size: 0.24rem;
              color: #333;
              margin-bottom: 0.2rem;
            }

            p:nth-of-type(2) {
              font-size: 0.3rem;
            }
          }
        }

        .dzb {
          text-align: center;
          border-left: 0.01rem solid #ededed;
          padding-left: 0.3rem;

          img {
            width: 0.39rem;
            height: 0.42rem;
            padding-top: 0.2rem;
          }

          p {
            font-size: 0.2rem;
          }
        }
      }
    }
  }

  .kdshow {
    font-size: 0.3rem;
    padding: 0.3rem 0px;
    width: 6.84rem;
    background: white;
    border-radius: 0.05rem;
    margin: 0rem auto 0.2rem;

    /deep/.van-cell {
      padding: 0px 0.3rem;
      overflow: unset;

      input {
        text-align: right;
        height: 0.5rem;
        padding-right: 0.25rem;
      }
    }

    /deep/.van-cell::after {
      content: "";
      display: inline-block;
      border-right: 0.01rem solid #b0b0b0;
      border-bottom: 0.01rem solid #b0b0b0;
      transform: rotate(-45deg);
      left: unset;
      position: absolute;
      right: 0.3rem;
      bottom: 0.15rem;
      width: 0.2rem;
      height: 0.2rem;
    }
  }

  .choose {
    font-size: 0.3rem;
    color: #999999;
    font-weight: bold;
    padding: 0rem 0.33rem;

    > div {
      background: white;

      padding: 0.3rem 0.3rem;
      border-radius: 0.05rem;

      .type_wp {
        display: flex;
        justify-content: center;

        div {
          flex: 1;
          text-align: center;

          p:nth-of-type(2) {
            color: #333;
            margin-top: 0.2rem;
            font-size: 0.36rem;
            //position: relative;
          }
        }

        div:nth-of-type(1) {
          border-right: 0.01rem solid #ededed;

          p:nth-of-type(2):after {
            content: "";
            display: inline-block;
            width: 0.15rem;
            height: 0.15rem;
            border-bottom: 0.01rem solid #999;
            border-right: 0.01rem solid #999;
            transform: rotate(45deg);
            margin-left: 0.15rem;
            position: relative;
            top: -0.08rem;
          }
        }
      }

      .type_price {
        display: flex;
        justify-content: center;
        border-top: 0.01rem solid #ededed;
        margin-top: 0.3rem;
        padding-top: 0.3rem;

        div {
          flex: 1;
          text-align: center;

          p:nth-of-type(2) {
            color: #333;
            margin-top: 0.2rem;
            font-size: 0.36rem;
          }
        }

        div:nth-of-type(1) {
          border-right: 0.01rem solid #ededed;

          p:nth-of-type(2):after {
            content: "";
            display: inline-block;
            width: 0.15rem;
            height: 0.15rem;
            border-bottom: 0.01rem solid #999;
            border-right: 0.01rem solid #999;
            transform: rotate(45deg);
            margin-left: 0.15rem;
            position: relative;
            top: -0.08rem;
          }
        }
      }
    }
  }

  .bz {
    padding: 0.33rem;
    font-size: 0.3rem;

    /deep/.van-field__value {
      input {
        text-align: right;
      }
    }
  }

  .sdtime {
    padding: 0rem 0.33rem 0.33rem;
    font-size: 0.3rem;

    > div {
      background: white;
      padding: 0.2rem 0.33rem;

      > p {
        color: #646566;
        padding-bottom: 0.2rem;
      }

      div {
        display: flex;

        p {
          border: 0.01rem solid #cecaca;
          border-radius: 0.05rem;
          width: 30%;
          display: block;
          margin-right: 3%;

          span {
            display: block;
            text-align: center;
          }

          span:nth-of-type(1) {
            color: #cecaca;
            padding: 0.15rem 0rem;
            font-weight: bold;
          }

          span:nth-of-type(2) {
            background: #cecaca;
            padding: 0.05rem 0rem;
            color: white;
          }
        }

        p.active {
          border: 0.01rem solid #e50909;

          span:nth-of-type(1) {
            color: #e50909;
          }

          span:nth-of-type(2) {
            background: #e50909;
          }
        }
      }
    }
  }

  .check {
    font-size: 0.24rem;

    text-align: center;

    /deep/.van-checkbox {
      justify-content: center;

      .van-checkbox__label {
        color: #999;
      }
    }
  }

  .btn-jj {
    padding: 0.33rem;

    button {
      width: 100%;
    }
  }
}

.whrite_add {
  width: 6.6rem;
  padding: 0.4rem 0.2rem;

  /deep/.van-field__value {
    input {
      text-align: right;
    }
  }

  /deep/.van-popup__close-icon--top-right {
    top: 5px;
    right: 10px;
  }
}
</style>
