<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 }} {{ jjInfo.senderMobile }}</p>
              <p v-if="jjadd == '' || jjadd == ' '" @click="addtype(1)">
                填写寄件地址
              </p>
              <p v-else @click="addtype(1, 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" v-for="(item, index) in sjList">
      <div>
        <div class="top">
          <p>{{ index + 1 }}</p>
        </div>
        <div class="sj">
          <div class="sjaddress">
            <p style="background: #fa9c22;">收</p>
            <div>
              <p v-if="item.sjname == '' || item.sjname == ' '">收件地址</p>
              <p v-else>{{ item.sjname }} {{ item.receiveMobile }}</p>
              <p
                v-if="item.sjadd == '' || item.sjadd == ' '"
                @click="addtype(2)"
              >
                填写收件地址
              </p>
              <p v-else @click="addtype(2, index)">{{ item.sjadd }}</p>
            </div>
          </div>
          <div class="dzb cz">
            <div>
              <img src="../assets/images/whrite.png" alt="" />
              <p @click="addtype(2, index)">编辑</p>
            </div>
            <div>
              <img src="../assets/images/del.png" alt="" />
              <p @click="del(index)">删除</p>
            </div>
          </div>
        </div>
        <div class="sj" style="border-top:.01rem solid #ededed">
          <div class="sjaddress">
            <van-field
              v-model="item.wpinfo"
              name="物品信息"
              label="物品信息"
              placeholder="请填写"
              @click="wpShow(index)"
              readonly
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 添加收件人 -->
    <div class="add_per">
      <div>
        <div class="add_per_info">
          <p style="background: #fa9c22;">收</p>
          <p @click="link(2)">+添加收件人</p>
        </div>
      </div>
    </div>
    <!-- 快递公司 -->
    <div class="kdshow">
      <van-field
        readonly
        clickable
        name="picker"
        :value="expressInfoShow"
        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="#0c2469" @click="save()"
        >立即寄件</van-button
      >
    </div>
    <!-- 填写地址 -->
    <van-popup
      round
      v-model="addshow"
      class="whrite_add"
      closeable
      @closed="close"
      :close-on-click-overlay="false"
    >
      <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="请输入姓名"
            :rules="[{ required: false }]"
          />
          <van-field
            v-model="phone"
            maxlength="11"
            type="number"
            name="手机"
            label="手机"
            placeholder="请输入手机"
            :rules="[{ required: false }]"
          />
          <van-field
            v-model="telPhone"
            maxlength="20"
            type="text"
            name="座机"
            label="座机"
            placeholder="请输入座机"
            :rules="[{ required: false }]"
          />
          <van-field
            readonly
            clickable
            name="area"
            :value="city"
            label="省市区"
            placeholder="请选择省市区"
            @click="areashow = true"
            :rules="[{ required: false }]"
          />
          <van-field
            v-model="address"
            name="详细地址"
            maxlength="50"
            label="详细地址"
            placeholder="请输入详细地址"
            :rules="[{ required: false }]"
          />
          <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>
    <!-- 选择物品 -->
    <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
            v-if="radio == '物品'"
            name="stepper"
            label="预估重量(/KG)"
          >
            <template #input>
              <van-stepper v-model="kg" />
            </template>
          </van-field>
          <van-field
            v-if="radio == '文件'"
            name="stepper"
            label="文件数量(/件)"
          >
            <template #input>
              <van-stepper v-model="num" />
            </template>
          </van-field>
          <div style="margin-top: 16px;">
            <van-button color="#0c2469" block type="info" @click="wpconform"
              >确定</van-button
            >
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import areaList from "@/script/areas.js";
import { Stepper, Toast, Dialog } from "vant";
export default {
  data() {
    return {
      titlename: "批量寄",
      addshow: false,
      name: "",
      phone: "",
      telPhone: "",
      city: "",
      address: "",
      areashow: false,
      index: "",
      title: "",
      jjname: "",
      jjadd: "",
      sjname: "",
      sjadd: "",
      check: false,
      wpinfo: "", //物品信息
      wp: false,
      kg: 1,
      num: 1,
      radio: "物品",
      showPicker: false, //快递
      value: "",
      expressInfoShow: "", //快递公司展示
      expressPhone: "", //快递公司电话传值
      expressInfo: "", //快递公司传值
      columns: [],
      sjList: [],
      wpIndex: "", //物品下标
      jjInfo: {} //寄件信息
    };
  },
  created: function() {
    this.isLogin();
    this.userId = localStorage.getItem("userId");

    //寄件地址
    if (JSON.stringify(this.$store.state.jjInfo) != "{}") {
      this.jjname = this.$store.state.jjInfo.jjname;
      this.jjadd = this.$store.state.jjInfo.jjadd;
      this.jjInfo = this.$store.state.jjInfo;
    } else {
      //获取默认地址
      this.getDefaultAddress();
    }

    //收件地址
    if (JSON.stringify(this.$store.state.sjList) != "[]") {
      this.sjList = this.$store.state.sjList;
    }
    //快递公司列表
    this.getLogisticsList();
  },
  methods: {
    // 选择快递公司
    onConfirm(e) {
      this.expressInfoShow = e.text;
      this.expressInfo = e.id;
      this.expressPhone = e.phone;
      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, index) {
      this.index = obj;
      if (obj == 1) {
        this.title = "寄件地址";
      }
      if (obj == 2) {
        this.title = "收件地址";
        this.wpIndex = index;
        this.name = this.sjList[index].receiver;
        this.phone = this.sjList[index].receiverPhone;
        this.telPhone = this.sjList[index].receiveMobile;
        this.city = this.sjList[index].receiveAddr;
        this.address = this.sjList[index].receiveAddress;
      }
      this.addshow = true;
    },
    // 填写地址确定
    onSubmit() {
      if (this.name == "" || this.name == undefined) {
        Toast("请填写姓名");
        return;
      }
      // if(this.phone == '' || this.phone == undefined ){
      // 	Toast('请填写手机')
      // 	return
      // }
      // let regPhone = new RegExp(this.$store.state.regPhone)
      // if(!regPhone.test(this.phone)){
      // 	Toast('手机号格式不正确')
      // 	return
      // }

      if (
        (this.phone == "" || this.phone == undefined) &&
        (this.telPhone == "" || this.telPhone == undefined)
      ) {
        Toast("请填写手机号或者座机号");
        return;
      }

      if (this.phone != "" && this.phone != undefined) {
        let regPhone = new RegExp(this.$store.state.regPhone);
        if (!regPhone.test(this.phone)) {
          Toast("手机号格式不正确");
          return;
        }
      }

      if (this.city == "" || this.city == undefined) {
        Toast("请选择省市区");
        return;
      }
      if (this.address == "" || this.address == undefined) {
        Toast("请填写详细地址");
        return;
      }
      if (this.index == 1) {
        this.jjname = this.name + " " + this.phone;
        this.jjadd = this.city + " " + this.address;
        let jjInfo = {};
        jjInfo.jjname = this.jjname;
        jjInfo.jjadd = this.jjadd;
        jjInfo.sender = this.name;
        jjInfo.senderPhone = this.phone;
        jjInfo.senderMobile = this.telPhone;
        jjInfo.sendAddr = this.city;
        jjInfo.sendAddress = this.address;
        this.$store.commit("getJjInfo", jjInfo);
      }
      if (this.index == 2) {
        this.sjname = this.name + " " + this.phone;
        this.sjadd = this.city + " " + this.address;
        this.$store.state.sjList[this.wpIndex].sjname = this.sjname;
        this.$store.state.sjList[this.wpIndex].sjadd = this.sjadd;
        this.$store.state.sjList[this.wpIndex].receiver = this.name;
        this.$store.state.sjList[this.wpIndex].receiverPhone = this.phone;
        this.$store.state.sjList[this.wpIndex].receiveMobile = this.telPhone;
        this.$store.state.sjList[this.wpIndex].receiveAddr = this.city;
        this.$store.state.sjList[this.wpIndex].receiveAddress = this.address;
        this.sjList = this.$store.state.sjList;
      }

      this.addshow = false;
      this.name = "";
      this.phone = "";
      this.telPhone = "";
      this.city = "";
      this.address = "";
    },
    close() {
      this.name = "";
      this.phone = "";
      this.telPhone = "";
      this.city = "";
      this.address = "";
    },
    // 地址簿跳转
    link(obj) {
      if (this.sjList.length > 19) {
        Toast("添加收件人最多添加20人");
        return;
      }
      this.$router.push({
        path: "/MultipleAddressbook",
        query: { active: obj }
      });
    },
    // 物品选择
    wpconform() {
      this.sjList[this.wpIndex].itemType = this.radio;
      this.sjList[this.wpIndex].weight = this.kg;
      this.sjList[this.wpIndex].itemNum = this.num;
      if (this.radio == "物品") {
        this.sjList[this.wpIndex].wpinfo = this.radio + "-" + this.kg + "kg";
      }
      if (this.radio == "文件") {
        this.sjList[this.wpIndex].wpinfo = this.radio + "-" + this.num + "件";
      }
      this.wp = false;
    },
    //添加收件人
    // addSj(){
    // 	this.sjList.push({})
    // },
    //删除收件人
    del(index) {
      Dialog.confirm({ title: "", message: "确定删除吗" })
        .then(() => {
          this.sjList.splice(index, 1);
        })
        .catch(() => {
          //  on cancel
        });
    },
    //物品展示
    wpShow(index) {
      this.wp = true;
      this.wpIndex = index;
      this.radio = this.sjList[index].itemType;
      this.kg = this.sjList[index].weight;
      this.num = this.sjList[index].itemNum;
    },
    save() {
      if (
        this.jjname == "" ||
        this.jjname == undefined ||
        this.jjadd == "" ||
        this.jjadd == undefined
      ) {
        Toast("请填写寄件人信息");
        return;
      }

      if (this.sjList == undefined || this.sjList.length <= 0) {
        Toast("请填写收件人信息");
        return;
      }

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

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

      //循环sjList信息
      let receiverMap = [];
      let receiverPhoneMap = [];
      let receiveAddrMap = [];
      let receiveAddressMap = [];
      let itemTypeMap = [];
      let weightMap = [];
      let itemNumMap = [];

      //暂时无值
      let payWayMap = [];
      let mainTypeMap = [];
      let expressTypeMap = [];
      let declaredValueMap = [];
      let itemRemarkMap = [];

      for (var i = 0; i < this.sjList.length; i++) {
        receiverMap.push(this.sjList[i].receiver);
        receiverPhoneMap.push(this.sjList[i].receiverPhone);
        receiveAddrMap.push(this.sjList[i].receiveAddr);
        receiveAddressMap.push(this.sjList[i].receiveAddress);
        itemTypeMap.push(this.sjList[i].itemType);
        weightMap.push(this.sjList[i].weight);
        itemNumMap.push(this.sjList[i].itemNum);

        //暂时无值
        payWayMap.push("月结");
        mainTypeMap.push("公司件");
        expressTypeMap.push("外部件");
        declaredValueMap.push("0");
        itemRemarkMap.push(" ");
      }

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

      this.$http
        .post(
          this.$store.state.host + "/sendMail/saveBatchMail.do",
          {
            userId: this.userId,
            sender: this.jjInfo.sender,
            senderPhone: this.jjInfo.senderPhone,
            sendAddr: this.jjInfo.sendAddr,
            sendAddress: this.jjInfo.sendAddress,
            expressInfo: this.expressInfo,
            expressPhone: this.expressPhone,
            receiverMap: receiverMap.toString(),
            receiverPhoneMap: receiverPhoneMap.toString(),
            receiveAddrMap: receiveAddrMap.toString(),
            receiveAddressMap: receiveAddressMap.toString(),
            itemTypeMap: itemTypeMap.toString(),
            weightMap: weightMap.toString(),
            itemNumMap: itemNumMap.toString(),

            payWayMap: payWayMap.toString(),
            mainTypeMap: mainTypeMap.toString(),
            expressTypeMap: expressTypeMap.toString(),
            declaredValueMap: declaredValueMap.toString(),
            itemRemarkMap: itemRemarkMap.toString()
          },
          { emulateJSON: true }
        )
        .then(
          res => {
            //发送成功
            if (res.body.msg == "success") {
              Toast("下单成功，快递员将尽快上门取件！");
              let that = this;
              setTimeout(function() {
                that.$router.push({ path: "/" });
              }, 1000);
            } else if (res.body.msg != "" && res.body.msg != "success") {
              Toast(res.body.msg);
            } 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;
    word-break: break-word;

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

      .jj {
        display: flex;
        justify-content: space-between;
        padding: 0.15rem 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;
            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.24rem;
            }
          }
        }

        .dzb {
          text-align: center;
          border-left: 0.01rem solid #ededed;
          min-width: 1.4rem;

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

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

  .sjinfo {
    font-size: 0.24rem;
    color: #999999;
    padding: 0rem 0.33rem 0.33rem 0.33rem;
    word-break: break-word;

    > div {
      background: white;
      border-radius: 0.05rem;
      padding: 0.3rem 0.2rem 0.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: 0.6rem;
        height: 0.5rem;
        color: white;
        text-align: center;

        p {
          position: relative;
          right: 0.1rem;
          top: 0.01rem;
        }
      }

      .sj {
        display: flex;
        justify-content: space-between;
        padding: 0.15rem 0rem;

        .sjaddress {
          width: 100%;
          display: flex;
          padding: 0.1rem 0rem;

          /deep/.van-field {
            padding: 0rem;

            .van-field__value {
              input {
                text-align: right;
                padding: 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.2rem;
          }

          div {
            //font-weight: bold;
            //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.24rem;
            }
          }
        }

        .dzb {
          text-align: center;
          border-left: 0.01rem solid #ededed;
          //padding-left: .3rem;
          min-width: 1.4rem;

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

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

        .cz {
          display: flex;
          justify-content: center;
          padding-left: 0rem;
          padding-top: 0.2rem;

          div {
            text-align: center;
            padding: 0rem 0.05rem 0rem;

            img {
              width: 0.26rem;
              height: 0.26rem;
            }

            p {
              font-size: 0.1rem;
              color: #999999;
            }
          }
        }
      }
    }
  }

  .add_per {
    div {
      font-size: 0.3rem;
      color: #999999;
      font-weight: bold;
      padding: 0rem 0.33rem;
      margin-bottom: 0.3rem;
      border-radius: 0.05rem;

      .add_per_info {
        background: white;
        display: flex;
        color: #333;
        padding: 0.33rem 0.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: 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;
    margin-bottom: 0.3rem;

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

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

.wpinfo {
  width: 6.6rem;
  padding: 0.2rem;

  /deep/.van-field {
    .van-field__label {
      width: 2.5rem;
    }

    .van-field__value {
      input {
        width: 64px;
      }
    }
  }
}
</style>
