<template>
  <div class="content">
    <div class="form">
      <van-form @submit="onSubmit">
        <form action="/">
          <van-search
            shape="round"
            v-model="dsname"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
          />
        </form>
        <van-field
          readonly
          v-model="name"
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
          @click="dsnameshow = true"
          :rules="[{ required: false }]"
        />
        <van-field
          readonly
          v-model="phone"
          maxlength="11"
          type="number"
          name="手机"
          label="手机"
          placeholder="请输入手机"
          @click="dsnameshow = true"
          :rules="[{ required: false }]"
        />
        <van-field
          readonly
          v-model="telPhone"
          maxlength="20"
          type="text"
          name="座机"
          label="座机"
          placeholder="请输入座机"
          @click="dsnameshow = true"
          :rules="[{ required: false }]"
        />
        <van-field
          readonly
          clickable
          name="area"
          :value="city"
          label="省市区"
          placeholder="请选择省市区"
          @click="areashow = true"
          :rules="[{ required: false }]"
        />
        <van-field
          readonly
          v-model="address"
          name="详细地址"
          label="详细地址"
          placeholder="请输入详细地址"
          @click="dsnameshow = true"
          :rules="[{ required: false }]"
        />
        <div style="margin-top: 16px;">
          <van-button
            color="#0c2469"
            block
            type="info"
            native-type="submit"
            :disabled="disabled"
            >确定</van-button
          >
        </div>
      </van-form>
      <!-- 代收人列表 -->
      <van-popup v-model="dsnameshow" position="bottom">
        <van-picker
          title="内部收件人"
          show-toolbar
          :columns="dsList"
          value-key="text"
          @confirm="onConfirmDs"
          @cancel="dsnameshow = false"
        />
      </van-popup>
      <!-- 城市选择 -->
      <van-popup v-model="areashow" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm3"
          @cancel="areashow = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import areaList from "@/script/areas.js";
import { Toast } from "vant";
export default {
  data() {
    return {
      titlename: "添加内部收件人",
      name: "",
      phone: "",
      telPhone: "",
      city: "",
      address: "",
      areashow: false,
      type: "",
      disabled: false,
      dsList: [], //代收人列表
      dsnameshow: false,
      dsname: "",
      userId: ""
    };
  },
  created: function() {
    this.isLogin();
    this.type = this.$route.query.type;
    //代收人列表
    this.findCollectAgentList();
    this.userId = localStorage.getItem("userId");
  },
  methods: {
    //代收人搜索
    onSearch() {
      this.$http
        .post(
          this.$store.state.host + "/sendMail/searchInnerContactsList.do",
          {
            userId: this.userId,
            name: this.dsname
          },
          { emulateJSON: true }
        )
        .then(
          res => {
            //发送成功
            if (res.body.msg == "success") {
              this.dsList = res.body.list;
              for (var i = 0; i < this.dsList.length; i++) {
                this.dsList[i].text =
                  this.dsList[i].name +
                  " " +
                  this.dsList[i].telephone +
                  " " +
                  this.dsList[i].phone;
              }
              this.dsnameshow = true;
            }
          },
          res => {
            //发送失败
            Toast("网络错误!");
          }
        );
    },
    //搜索取消
    onCancel() {
      this.findCollectAgentList();
    },
    onConfirmDs(e) {
      //确定
      if (e != undefined) {
        this.name = e.name;
        this.phone = e.phone;
        this.telPhone = e.telephone;
        this.address = e.address;
        this.city = e.province + " " + e.area + " " + e.city;
      }
      this.dsnameshow = false;
    },
    onSubmit() {
      if (this.name == "" || this.name == undefined) {
        Toast("请输入姓名");
        return;
      }

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

      if (this.city == "" || this.city == undefined) {
        Toast("请选择省市区");
        return;
      }

      if (this.address == "" || this.address == undefined) {
        Toast("请输入详细地址");
        return;
      }

      this.disabled = true;

      this.$http
        .post(
          this.$store.state.host + "/personal/saveAddressInfo.do",
          {
            userId: this.userId,
            name: this.name,
            phone: this.phone,
            telPhone: this.telPhone,
            provinceAndCity: this.city,
            address: this.address,
            type: this.type
          },
          { emulateJSON: true }
        )
        .then(
          res => {
            //发送成功
            if (res.body.msg == "success") {
              Toast("保存成功");
              let that = this;
              setTimeout(function() {
                that.$router.back();
              }, 500);
            } else {
              Toast("保存失败");
            }
            this.disabled = false;
          },
          res => {
            //发送失败
            Toast("网络错误");
            this.disabled = false;
          }
        );
      this.disabled = false;
    },
    onConfirm3(e) {
      //确定
      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
      this.areashow = false;
      console.log(e);
    }
  },
  computed: {
    areaList() {
      return areaList;
    }
  }
};
</script>

<style scoped lang="less">
.content {
  .form {
    padding: 0.3rem;

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