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

      <!-- 省市区 -->
      <div class="__address_area cc_abs cc_width" @click="openArea">
        <input
          v-if="areaDetails.length==0"
          style="border:0px;"
          type="text"
          value=""
          readonly="readonly"
          v-model="areatext"
          placeholder="省/市/区"
        />
        <div v-else class="areadiv">
          <p class="areap">{{areaDetailsText}}</p>
        </div>
      </div>

      <!-- 详细地址 -->
      <div class="__address_details cc_abs">
        <textarea
          class="cc_width   "
          v-model="details"
          :readonly="addressDisable"
          maxlength="28"
          placeholder="详细地址"
        />
      </div>
      <bg-wrap
        class="tijiaobtn"
        :class="{'gray100':addressDisable}"
        :config="addressImage.tijiao"
        is-hove
        @onTap="conponentl"
      ></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>
    </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 apis from "../api/api.js";
let { getAddress,saveAddress } =
  apis;
export default {
  name: "",
  components: {
    bgWrap,
    Kong,
    AllPop,
    myPop,
  },
  props: ['addressInfo'],
  data() {
    return {
      addressDisable:false,
      isDisabledindex: 1,
      isShow: true,
      isArea: false,
      areaDetails: [],
      areaCode: "",
      addressImage,
      areaList: {},
      name: "",
      phone: "",
      areatext:"",
      details: "",
      addressId: "",
    };
  },
  watch: {},
  computed: {
    areaDetailsText(){
      return this.areaDetails.join(' ')
    },  
  },
  created() {
    this.initAreaList();
  },
  mounted() {
    this.openAddress();
  },
  methods: {
    initData(data) {
      this.areaDetails = data.areaDetails || [];
      this.areaCode = data.areaCode;
      this.name = data.name || "";
      this.phone = data.phone || "";
      this.details = data.details || "";
    },
    
    initdefaultData() {
      this.areaDetails = [];
      this.areaCode = "";
      this.name = "";
      this.phone = "";
      this.details =  "";
    },
    openAddress() {
      var data = this.addressInfo;
      this.addressId = data.addressId;
      getAddress({ activityId:this.$route.query.activityId,addressId: data.addressId },(r)=>{
        if (r.data !== undefined) {
          this.initData({
            name: r.data.receiver,
            areaCode: r.data.postalCode,
            phone: r.data.phone,
            details: r.data.address,
            areaDetails: [r.data.province, r.data.city, r.data.area],
          });
          this.addressDisable = true;
          Toast('已提交成功，不可以修改哦');
        } else {
          this.addressDisable = false;
          this.initdefaultData();
        }
      }).then(
        
      );
    },
    downAddress() {
      this.closeDiv();
      // 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.addressDisable) 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() {
      if(this.addressDisable){
        Toast('已提交成功，不可以修改哦');
        return;
      }
      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 (areaDetails.length === 0) {
        Toast("请选择省市区！");
        return false;
      }
      if (!details) {
        Toast("请输入详细地址！");
        return false;
      }
      if (!checkEmoj(details)) {
        Toast("详细地址不能包含表情！");
        return false;
      }
      this.onSubmit();
    },
    //确定提交
    onSubmit() {
      const { addressId, name, phone, details, areaDetails, areaCode } = this;
      saveAddress({
        activityId:this.$route.query.activityId,
        addressId: addressId || "222",
        phone,
        receiver: name,
        address: details,
        province: areaDetails[0],
        city: areaDetails[1],
        area: areaDetails[2],
        postalCode: areaCode,
      },(r)=>{
        if(r.resp_code !== 1000){
          // Toast("保存成功");
          this.closePop();
          this.addressDisable = true;
        }else{
          Toast(r.resp_msg);
        }
      }).then((r) => {
       
      });
    },
    closeDiv(){
      this.$emit('closeDiv');
    },
    closePop(){
        this.$emit('closePop');
    },
    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.59rem;
  width: 4.87rem;    
  top: 3rem;
  left: 0.55rem;
}
.__address_phone {
  height: 0.59rem;
  width: 4.87rem;
  top:3.8rem;
  left: 0.55rem;
}
.__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.59rem;
  width: 4.92rem;
  top: 4.6rem;
  left: 0.55rem;
  border: 1px solid #dcdee0;
}
.areadiv{
   overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 1;
 -webkit-box-orient: vertical;
 height: 0.4rem;
 width: 4.87rem;
}
.areap{
  color: #000;
  font-size: 0.28rem;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 0.1rem 0 0 0.2rem;
}
.__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.59rem;
  width: 4.87rem;
  top: 5.4rem;
  left: 0.55rem;
  line-height: 0.48rem;
  font-size: 0.28rem;
  color: #000;
}
.tijiaobtn{
  position: absolute;
  left: 2rem;
  bottom: 0.5rem;
}
input {
  width: 92%;
  height: 100%;
  text-align: left;
  color: #000;
  font-size: 0.30rem;
  line-height: 1;
  padding: 0 0.2rem !important;
  border: 1px solid #dcdee0;
}
textarea{
    width: 96% !important;
    height: 0.49rem;
    padding: 0.1rem 0 0 0.2rem !important;
    border: 1px solid #dcdee0;
}
.__address_bottom_text {
  bottom: -0.3rem;
  transform: translateY(100%);
}
.addressDivAll{
  overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/214262/20/24621/20314/639d5662E7364dee7/a8c21ad78bbc41dc.jpg');
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.gray100 {
  filter: grayscale(100%);
}
</style>
