<template>
  <div class="content">
    <div class="form">
      <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
          readonly
          clickable
          name="area"
          :value="city"
          label="省市区"
          placeholder="请选择省市区"
          @click="areashow = true"
          :rules="[{ required: false }]"
        />
        <van-field
          v-model="address"
          name="详细地址"
          label="详细地址"
          placeholder="请输入详细地址"
          :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="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: "",
      city: "",
      address: "",
      areashow: false,
      type: "",
      disabled: false
    };
  },
  created: function() {
    this.type = this.$route.query.type;
    if (this.type == 1) {
      this.titlename = "新建寄件人地址";
    }
    if (this.type == 2) {
      this.titlename = "新建收件人地址";
    }
  },
  methods: {
    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.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",
          {
            user_id: this.openid,
            name: this.name,
            phone: this.phone,
            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.push({
                  path: "/Addressbook",
                  query: { active: that.type }
                });
              }, 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>
