<template>
  <div class="addressMaskDiv" v-if="show">
    <div class="context" :style="styleData.addressContext">
      <div :class="styleData.inputAllDiv">
        <van-form @submit="onSubmit">
          <van-field v-model="realName" :disabled="isDisable" name="realName" label="姓名:" placeholder="请输入收货人姓名"
            maxlength="10" />
          <!-- :rules="[{ required: true, message: '' }]" -->
          <van-field v-model="mobile" type="number" name="mobile" label="电话:" placeholder="请输入收货人手机号" maxlength="11"
            :disabled="isDisable" />
          <!-- :rules="[
              { required: true, message: '' },
              { required: true, message: '' },
            ]" -->
          <van-field class="pickerArea" v-model="cityName" onfocus="this.blur()" name="cityName" label="省市区"
            :value="cityName" placeholder="请选择省/市/区" @click="selectCity()" :disabled="isDisable" />
          <!-- :rules="[{ required: true, message: '' }]" -->
          <van-field v-if="snapdragon" v-model="address" name="address" label="详细地址:" :disabled="isDisable"
            placeholder="请输入详细地址" rows="1" autosize type="textarea" />
          <!-- :rules="[{ required: true, message: '' }]" -->
          <van-field v-else v-model="address" name="address" label="详细地址:" :disabled="isDisable"
            placeholder="请输入详细地址" />
          <!-- :rules="[{ required: true, message: '' }]" -->
          <van-field v-model="remark" name="remark" maxlength="500" :disabled="isDisable" label="备注:" placeholder="请输入奖品备注(例:鞋子尺码36码)" />
          <!-- <van-field v-model="zipCode" name="zipCode" label="邮政编码:" placeholder="请输入邮政编码" />
           <van-field v-model="email" name="email" label="邮件:" placeholder="请输入邮件地址" /> -->
          <div v-if="!isAlLookAddress" class="addressPrompt">
            请注意：地址填写简略、手机号填写错误皆会影响派单，导致您无法收到商品！（超过2小时未填写收货地址信息，视为放弃）
          </div>
          <div v-else class="addressPrompt">
            请注意:地址填写简略,手机号填写错误皆会影响派单,导致您无法收到商品!
          </div>

          <div class="submitButtonDiv" :style="styleData.submitButtonDiv">
            <div v-if="!isDisable" :style="styleData.submitButton" v-lz-click="'24'" @click="onSubmit"></div>
            <div v-else :style="styleData.submitButtonDisable" v-lz-click="'24'"></div>
          </div>
        </van-form>
      </div>
      <div class="close-btn" :style="styleData.closeBtn" @click="closeClick"></div>
    </div>
    <div class="maskAreaDiv" v-show="areaPopIndex == 1">
      <van-area :disabled="isDisable" title="" :area-list="areaList" :columns-placeholder="['请选择', '请选择', '请选择']"
        @cancel="areaCancel" @confirm="areaConfirm" />
    </div>
    
  </div>
</template>

<script>
import areaUtil from "../../../util/areaUtil.js";
import Vue from "vue";
import apis1 from "../../../util/apis1.js";
import { Area, Button, Field, Form, Notify, Picker, Toast } from "vant";
import { checkInput, phoneCheck } from "../../../util/tools.js";

let { reviseaddress, showaddress, orderGetAddress, orderUpdateAddress } = apis1;

Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
Vue.use(Notify);
Vue.use(Picker);
Vue.use(Toast);
Vue.use(Area);
export default {
  props: [""],
  data() {
    return {
      title: "邮寄地址",
      addressData: {},
      realName: "",
      mobile: "",
      cityName: "",
      address: "",
      zipCode: "",
      email: "",
      remark:'',
      areaPopIndex: 0,
      areaList: {},
      orderCode: "",
      province: "",
      city: "",
      county: "",
      showcount: false,
      isDisable: false, //是否可以编辑
    };
  },
  computed: {
    baseClassName() {
      return this.snapdragon ? "snapdragonAddressDiv" : "addressMaskDiv";
    },
    snapdragon() {
      const at = sessionStorage.getItem("activityType");
      const snapdragon = ["10011", "10012", "10013", "10014"];
      return snapdragon.some((o) => at === o);
    },
  },
  created() {
    this.isEditAddress = true;
    this.isAlLookAddress = true;
    if (!this.isEditAddress) {
      this.isDisable = true;
    } else {
      this.isDisable = false;
    }

    this.areaList.province_list = areaUtil.province_list;
    this.areaList.city_list = areaUtil.city_list;
    this.areaList.county_list = areaUtil.county_list;

    const prizeGrantId = sessionStorage.getItem("prizeGrantId");
    if (prizeGrantId) {
      orderGetAddress(addressdatas => {
        console.log(addressdatas);
        let dataAll = addressdatas.data;
        if (dataAll.realName) {
          console.log(dataAll);
          this.realName = dataAll.realName;
          this.mobile = dataAll.mobile;
          this.cityName = dataAll.province + dataAll.city + dataAll.county;
          this.address = dataAll.address;
          this.province = dataAll.province;
          this.city = dataAll.city;
          this.county = dataAll.county;
          this.remark = dataAll.remark;
          console.log(this.realName);
        }
      });
    }
  },
  mounted() {
    const drawName = sessionStorage.getItem("drawName");
    const addressId = sessionStorage.getItem("addressId");
    console.log(drawName);
  },
  methods: {
    closeClick() {
      document.querySelector('body').removeAttribute('style');
      this.submit();
    },
    selectCity() {
      if (!this.isDisable) {
        this.areaPopIndex = 1;
      }
    },
    //取消省市区选择
    areaCancel() {
      this.areaPopIndex = 0;
    },
    //省市区
    areaConfirm(value) {
      this.areaPopIndex = 0;
      console.log(value);
      this.province = value[0] ? value[0].name : "";
      this.city = value[1] ? value[1].name : "";
      this.county = value[2] ? value[2].name : "";
      this.cityName = this.province + this.city + this.county;
    },
    onSubmit(values) {
      console.log("保存地址", values);
      if (!this.realName) {
        this.$toast("请输入收货人姓名");
        return;
      }
      if (!checkInput(values.realName)) {
        this.$toast("姓名不可包含表情等特殊字符");
        this.realName = "";
        return;
      }
      if (!this.mobile) {
        this.$toast("请输入收货人手机号");
        return;
      }
      if (!phoneCheck(values.mobile)) {
        this.$toast("电话格式不正确");
        return;
      }
      console.log(checkInput(values.realName), "检查");
      if (!this.province || !this.city || !this.county) {
        this.$toast("请选择省市区");
        return;
      }
      if (!this.address) {
        this.$toast("请输入详细地址");
        return;
      }
      if (!checkInput(values.address)) {
        this.$toast("详细地址不可包含表情等特殊字符");
        this.address = "";
        return;
      }

      values.addressId = sessionStorage.getItem("addressId");
      values.province = this.province;
      values.city = this.city;
      values.county = this.county;
      this.$delete(values, "cityName");
      orderUpdateAddress(values, (addressdatas) => {
        if (addressdatas.data.result == true) {
          this.$toast("保存地址成功");
        } else {
          this.$toast(addressdatas.data.message);
        }
        this.closeClick();
        setTimeout(() => {
          this.submit(values);
          this.publicData.$emit("isNotyFiceWinnerReorrd", true, false);
        }, 1000);
      });
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.addressMaskDiv {
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.7);
  position: fixed;
  top: 0;
  z-index: 202;
  .basicMaskDiv {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.7);
    top: 0;
    z-index: 200;

    .basicPopDiv {
      position: fixed;
      bottom: 0;
      max-height: 10.57rem;
      background: #f2f2f2;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      width: 100%;

      .titleDiv {
        background: url(//img10.360buyimg.com/imgzone/jfs/t1/141588/29/18217/44025/5fd571b9Ef55329ec/42dba91b188b9dce.png)
          no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 1.14rem;
        position: relative;
        margin-top: -2px;

        .titleDiv1 {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ffffff;
          font-size: 0.34rem;
        }

        .leftLineDiv {
          width: 34px;
          height: 4px;
          background: linear-gradient(to right, #fff, #ff6153);
          border-radius: 4px;
          margin-right: 0.1rem;
        }

        .RightLineDiv {
          width: 34px;
          height: 4px;
          background: linear-gradient(to left, #fff, #ff8c4a);
          border-radius: 4px;
          margin-left: 0.1rem;
        }

        .closeDiv {
          position: absolute;
          top: -0.24rem;
          right: 0.26rem;

          img {
            width: 0.22rem;
            height: 0.22rem;
          }
        }
      }
    }
  }

  .inputAllDiv {
    // margin: 0.32rem 0.3rem 0 0.3rem;
    position: relative;
    z-index: 300;

    /deep/ .van-cell {
      border-radius: 0.12rem;
      margin-bottom: 0.1rem;
      border: 0.02rem solid #ffd5a4;
      padding-top: 8px;
      padding-bottom: 8px;
      .van-cell__title {
        font-size: 0.3rem;
        color: #000000;
        font-weight: 700;
      }
    }

    .addressPrompt {
      font-size: 0.18rem;
      color: #b3b3b3;
    }

    .submitButtonDiv {
      margin-top: 0.3rem;
      padding-bottom: 0.32rem;

      button {
        border: none;
        border-radius: 0rem;
        background: #e2231a;
      }
    }
  }

  .maskAreaDiv {
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.7);
    position: fixed;
    top: 0;
    z-index: 300;

    .van-picker {
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 10;
    }
  }

  .pickerArea .van-field__body::after {
    content: "";
    position: absolute;
    right: 0;
    top: 30%;
    width: 0.16rem;
    height: 0.16rem;
    border-top: 1px solid #c3c8d6;
    border-right: 1px solid #c3c8d6;
    transform: rotate(45deg);
  }
}
</style>
