<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="area" :value="city" label="省市区" placeholder="请选择省市区"
					@click="areashow = true" :rules="[{ required: false }]" /> -->
        <van-field
          readonly
          clickable
          name="area"
          :value="province"
          label="省"
          placeholder="自动识别"
          @click="areashow = true"
          :rules="[{ required: false }]"
        />
        <van-field
          readonly
          clickable
          name="area"
          :value="city"
          label="市"
          placeholder="自动识别"
          @click="areashow = true"
          :rules="[{ required: false }]"
        />
        <van-field
          readonly
          clickable
          name="area"
          :value="district"
          label="区"
          placeholder="自动识别"
          @click="areashow = true"
          :rules="[{ required: false }]"
        />
        <van-field
          readonly
          clickable
          name="area"
          :value="town"
          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"
            :disabled="disabled"
            >确定</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import areaList from "@/script/areas.js";
import { Toast } from "vant";
import {
  findUserAddressInfoById,
  editUserAddressInfoById,
  spiltAddress
} from "../api/addressBoook";
export default {
  data() {
    return {
      titlename: "编辑地址",
      name: "",
      phone: "",
      telPhone: "",
      province: "", //省
      city: "", //市
      district: "", //区
      town: "", //镇
      address: "", //详细地址
      areashow: false,
      id: "",
      disabled: false,
      message: ""
    };
  },
  created: function() {
    this.isLogin();
    this.id = this.$route.query.id;
    this.getData();
  },
  methods: {
    // 获取信息
    async getData() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0
      });
      const res = await findUserAddressInfoById({ id: this.id });
      if (res.msg == "success") {
        this.name = res.userAddressInfoById.addresseeName;
        this.phone = res.userAddressInfoById.addresseePhone;
        this.province = res.userAddressInfoById.addresseeProvince;
        this.city = res.userAddressInfoById.addresseeCity;
        this.district = res.userAddressInfoById.addresseeCounty;
        this.town = res.userAddressInfoById.addresseeTown;
        this.address = res.userAddressInfoById.addresseeAddrInfo;
      } else {
        Toast("网络错误!");
      }
      Toast.clear();
    },
    // 图片识别
    afterRead(file) {
      // console.log(encodeURIComponent(file.content))
      // return;
      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("识别错误");
          }
        );
      //console.log(file)
    },
    // 识别
    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,
        id: this.id,
        addresseeProvince: this.province,
        addresseeCity: this.city,
        addresseeCounty: this.district,
        addresseeTown: this.town,
        addresseeAddrInfo: this.address,
        addresseeAddress: this.message
      };
      const res = await editUserAddressInfoById({ ...parmas });
      if (res.msg == "success") {
        Toast("保存成功");
        this.$router.push("/Myaddressbook");
      } else {
        Toast("保存失败");
      }
      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 {
  /deep/ .van-field--min-height .van-field__control {
    min-height: 72px;
  }

  .form {
    padding: 0.3rem;

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