<template>
  <div class="content">
    <div class="form">
      <van-cell-group inset>
        <van-field
          style="height: auto;"
          v-model="message"
          rows="1"
          label="识别"
          type="textarea"
          placeholder="请粘贴,点击识别(姓名、手机号、省、市、区、详细地址间请输入空格)"
        />
      </van-cell-group>
      <div
        style="background-color: white;width: 100%;height: .8rem;padding-top: .2rem;"
      >
        <!-- <van-uploader :after-read="afterRead" style="width: 18%;height: .6rem;float: left;">
					<van-button color="#0c2469" block type="info" size="small">图片识别</van-button>
				</van-uploader> -->
        <van-button
          @click="shibie()"
          style="width: 15%;height: .6rem;float: right; margin-right: .2rem;"
          color="#0c2469"
          block
          type="info"
          size="small"
          >识别</van-button
        >
      </div>
    </div>
    <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="picker"
          :value="province"
          label="省"
          placeholder="自动识别"
          @click="showPickerA = true"
        />

        <van-field
          readonly
          clickable
          name="picker"
          :value="city"
          label="市"
          placeholder="自动识别"
          @click="showPickerB = true"
        />

        <van-field
          readonly
          clickable
          name="picker"
          :value="district"
          label="区"
          placeholder="自动识别"
          @click="showPickerC = true"
        />

        <van-field
          readonly
          clickable
          name="picker"
          :value="town"
          label="镇"
          placeholder="自动识别"
          @click="showPickerC = true"
        />
        <van-field
          v-model="address"
          maxlength="50"
          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>
    </div>
  </div>
</template>

<script>
import areaList from "@/script/areas.js";
import { saveAddress, listByParent, spiltAddress } from "../api/addressBoook";
import { Toast } from "vant";
export default {
  data() {
    return {
      titlename: "寄件人",
      name: "",
      phone: "",
      telPhone: "",
      city: "",
      address: "", //地址详情
      areashow: false,
      type: "",
      disabled: false,
      userId: "",
      message: "", //自动识别
      province: "", // 省
      city: "", // 市
      district: "", // 区
      town: "" //镇
    };
  },
  setup() {
    this.afterRead = file => {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    };
  },
  created: function() {
    this.isLogin();
    this.userId = localStorage.getItem("userId");
    this.type = this.$route.query.type;
    if (this.type == 1) {
      this.titlename = "新建寄件人地址";
    }
    if (this.type == 2) {
      this.titlename = "新建收件人地址";
    }
  },

  methods: {
    afterRead(file) {
      this.$http
        .post(
          this.$store.state.host + "/solic/getAddressFromText",
          {
            type: 3,
            textStr: encodeURIComponent(file.content)
          },
          {
            emulateJSON: true
          }
        )
        .then(
          res => {
            //发送成功
            res.body.words_result.forEach((v, i) => {
              this.message += v.words + " ";
            });
          },
          res => {
            //发送失败
            Toast("识别错误");
          }
        );
    },
    //识别
    async shibie() {
      if (this.message == "") {
        Toast("请粘贴地址");
        return;
      }
      const res = await spiltAddress({ address: this.message });
      if (res.prov) {
        this.province = res.prov;
        this.city = res.city;
        this.district = res.district;
        this.town = res.town;
        this.address = res.addr_info;
        this.name = res.per;
        this.phone = res.tel;
      } else {
        Toast("请求失败");
      }
      console.log(res, "res");
    },

    async onSubmit() {
      if (this.name == "" || this.name == undefined) {
        Toast("请输入姓名");
        return;
      }

      if (this.phone == "" || this.phone == 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.province == "" || this.province == undefined) {
        Toast("请输入省");
        return;
      }
      if (this.city == "" || this.city == undefined) {
        Toast("请输入市");
        return;
      }
      if (this.district == "" || this.district == undefined) {
        Toast("请输入区");
        return;
      }
      if (this.city == "" || this.city == undefined) {
        Toast("请输入镇");
        return;
      }
      if (this.address == "" || this.address == undefined) {
        Toast("请输入详细地址");
        return;
      }

      this.disabled = true;
      let parmas = {
        addresseeName: this.name,
        addresseePhone: this.phone,
        addresseeProvince: this.province,
        addresseeCounty: this.district,
        addresseeCity: this.city,
        addresseeTown: this.town,
        addresseeAddrInfo: this.address,
        addresseeAddress: this.message
      };
      const res = await saveAddress({ ...parmas });
      if (res.msg == "success") {
        Toast("保存成功");
        this.$router.push("/Myaddressbook");
      } else {
        Toast("保存失败");
      }
    }
  },
  computed: {
    areaList() {
      return areaList;
    }
  }
};
</script>

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

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

/deep/ .van-field--min-height .van-field__control {
  min-height: 72px;
}
</style>
