<template>
  <div>
    <AllPop
      :bg-image="addressImage['bg_' + isDisabledindex]"
      :is-show="isShow"
      closeh="120"
      @onClose="downAddress"
    >
      <!-- 姓名 -->
      <div class="__address_name cc_abs">
        <!-- 请输入收货人姓名 -->
        <input
          type="text"
          value=""
          :disabled="isDisabledindex !== 1"
          v-model="name"
          placeholder=""
          maxlength="20"
        />
      </div>
      <!-- 手机号 -->
      <div class="__address_phone cc_abs">
        <!-- 请输入联系人手机号 -->
        <input
          type="tel"
          value=""
          :disabled="isDisabledindex !== 1"
          v-model="phone"
          placeholder=""
          maxlength="11"
        />
      </div>

      <!-- 省市区 -->
      <div class="__address_area cc_abs cc_width" @click="openArea">
        {{areaDetailsText}}

        <!-- <div class="__address_area_item">
          <div class="__address_area_item_t">{{ areaDetails[0] }}</div>
        </div>
        <div class="__address_area_item">
          <div class="__address_area_item_t">{{ areaDetails[1] }}</div>
        </div>
        <div class="__address_area_item">
          <div class="__address_area_item_t">{{ areaDetails[2] }}</div>
        </div> -->
      </div>

      <!-- 详细地址 -->
      <div class="__address_details cc_abs">
        <textarea
          class="cc_width"
          :disabled="isDisabledindex !== 1"
          v-model="details"
          maxlength="28"
        />
      </div>

      <Kong height="660"></Kong>
      <bg-wrap
        v-if="isDisabledindex === 1"
        :config="addressImage.tijiao"
        is-hove
        @onTap="conponentl"
      ></bg-wrap>

      <div class="cc_flex" v-if="isDisabledindex === 2">
        <bg-wrap
          :config="addressImage.fanhuixiugai"
          is-hove
          @onTap="isDisabledindex = 1"
        ></bg-wrap>
        <Kong :height="30" is-level></Kong>
        <bg-wrap
          :config="addressImage.quedingtijao"
          is-hove
          @onTap="onSubmit"
        ></bg-wrap>
      </div>
      <bg-wrap
        v-if="isDisabledindex === 3"
        :config="addressImage.jindianguangaung"
        is-hove
        @onTap="navShopHome"
      ></bg-wrap>

      <bg-wrap
        :config="addressImage.address_text"
        classCom="__address_bottom_text cc_abs"
      ></bg-wrap>
    </AllPop>
    <my-pop :is-show="isArea" is-welt mode="bottom" @onClose="isArea = false">
      <div class="cc_width">
        <van-area
          title=""
          :area-list="areaList"
          @cancel="areaCancel"
          @confirm="areaConfirm"
          :value="areaCode"
        />
      </div>

      <!-- <div style="background:#bfa;height: 2rem;" class="cc_width">
                

        </div> -->
    </my-pop>
  </div>
</template>

<script>
import { Toast } from "vant";
import { addressImage } from "../image/index.js";
import bgWrap from "./ui/bg-wrap.vue";
import AllPop from "./AllPop.vue";
import Kong from "./ui/kong.vue";
import myPop from "./ui/my-pop.vue";
import areaUtil from "../../../../util/areaUtil";
import { getApiData } from "../api";
export default {
  name: "",
  components: {
    bgWrap,
    Kong,
    AllPop,
    myPop,
  },
  props: {},
  data() {
    return {
      isDisabledindex: 1,
      isShow: false,
      isArea: false,
      areaDetails: [],
      areaCode: "",
      addressImage,
      areaList: {},
      name: "",
      phone: "",
      details: "",
      addressId: "",
      currentItemIndex: null,
    };
  },
  watch: {},
  computed: {
    areaDetailsText(){
      return this.areaDetails.join(' ')
    },  
  },
  created() {
    this.initAreaList();
  },
  mounted() {},
  methods: {
    initData(data = {}) {
      this.areaDetails = data.areaDetails || [];
      this.areaCode = data.areaCode;
      this.name = data.name || "";
      this.phone = data.phone || "";
      this.details = data.details || "";
    },
    openAddress(data, index) {
      if(typeof index === 'number'){
        this.currentItemIndex = index
      }else{
        this.currentItemIndex = null
      }

      console.log(data);
      this.addressId = data.addressId;
      getApiData("getAddress", { addressId: data.addressId }).then(
        (r) => {
          console.log(r);
          if (r) {
            this.initData({
              name: r.receiver,
              areaCode: r.postalCode,
              phone: r.phone,
              details: r.address,
              areaDetails: [r.province, r.city, r.area],
            });
          } else {
            this.initData();
          }
          if (data.hasWriteAddress) {
            this.isDisabledindex = 3;
          } else {
            this.isDisabledindex = 1;
          }
          this.isShow = true;
        },
        (f) => {
          console.log(f);
        }
      );
    },
    downAddress() {
      this.isShow = false;
    },
    initAreaList() {
      this.areaList.province_list = areaUtil.province_list;
      this.areaList.city_list = areaUtil.city_list;
      this.areaList.county_list = areaUtil.county_list;
    },
    openArea() {
      if (this.isDisabledindex !== 1) return;
      this.isArea = true;
    },
    //取消省市区选择
    areaCancel() {
      this.isArea = false;
    },
    //省市区
    areaConfirm(value) {
      this.areaDetails = value.map((item, index) => {
        if (index === 2) {
          this.areaCode = item.code;
        }
        return item.name;
      });
      this.isArea = false;
      console.log(value, "ssss");
    },

    //确认信息
    conponentl() {
      const { name, phone, details, areaDetails, checkEmoj } = this;
      if (!name) {
        Toast("请输入收货人姓名！");
        return false;
      }
      if (!checkEmoj(name)) {
        Toast("收货人姓名不能包含表情！");
        return false;
      }
      if (!phone) {
        Toast("请输入联系人手机号！");
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(phone)) {
        Toast("请填写正确的手机号码！");
        return false;
      }
      if (!details) {
        Toast("请输入详细地址！");
        return false;
      }
      if (!checkEmoj(details)) {
        Toast("详细地址不能包含表情！");
        return false;
      }
      if (areaDetails.length === 0) {
        Toast("请选择省市区！");
        return false;
      }
      this.isDisabledindex = 2;
    },
    // 、、进店逛逛
    navShopHome() {
      this.$emit("navShopHome");
      console.log("进店逛逛");
    },
    //确定提交
    onSubmit() {
      const { addressId, name, phone, details, areaDetails, areaCode } = this;
      if (this.onVerification()) return;
      getApiData("saveAddress", {
        addressId: addressId || "222",
        phone,
        receiver: name,
        address: details,
        province: areaDetails[0],
        city: areaDetails[1],
        area: areaDetails[2],
        postalCode: areaCode,
      }).then((r) => {
        Toast("保存成功");
        console.log(r);
        this.isDisabledindex = 3;
        if (this.currentItemIndex || this.currentItemIndex === 0) {
          this.$emit("setHasWriteAddress", this.currentItemIndex);
        }
      });
    },
    onVerification() {
      return false;
    },

    checkEmoj(str) {
      var iosFace =
        /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;
      var androidFace =
        /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;
      if (iosFace.test(str) || androidFace.test(str)) {
        return false;
      }
      return true;
    },
  },
};
</script>

<style scoped>
@import url("../css/peterCss.css");
.__address_name {
  /* height: 0.4rem; */
  width: 2.98rem;
  bottom: 4.82rem;
  /* bottom: 5.14rem; */
  left: 2.12rem;
}
.__address_phone {
  /* height: 0.4rem; */
  width: 2.98rem;
  bottom: 4.02rem;
  /* bottom: 4.48rem; */
  left: 2.12rem;

  

}
.__address_area_mmp{
  /* width: 2.98rem; */
  width: 3.96rem;
  height:0.8rem;
  bottom: 2.94rem;
  font-size: 0.20rem;
  color: #000;
  line-height:0.4rem;
  /* left: 2.12rem; */
  left: 1.14rem;
  text-align: start;
}
.__address_area {
  height: 0.4rem;
  width: 2.98rem;
  bottom: 3.3rem;
  left: 2.12rem;
  font-size: 0.3rem;
  color: #000;
  overflow: auto;
  white-space: nowrap;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */

  left: 1.14rem;
  width: 3.96rem;
  bottom: 3rem;
  text-align: start;
}
.__address_area_item {
  position: absolute;
  width: 0.85rem;
  height: 0.4rem;
  overflow: auto;
}
.__address_area_item_t {
  white-space: nowrap;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.__address_area > div:nth-child(1) {
  left: 1.16rem;
}
.__address_area > div:nth-child(2) {
  left: 2.45rem;
}
.__address_area > div:nth-child(3) {
  left: 3.89rem;
}
.__address_details {
  height: 0.96rem;
  width: 3.96rem;
  bottom: 1.44rem;
  left: 1.14rem;
  line-height: 0.48rem;
  font-size: 0.28rem;
  color: #000;
}
input {
  width: 100%;
  height: 100%;
  text-align: center;
  color: #000;
  font-size: 0.30rem;
  line-height: 1;
  padding: 0 0 !important;
  /* background: #bfa; */
}
.__address_bottom_text {
  bottom: -0.3rem;
  transform: translateY(100%);
}
</style>
