<template>
  <div :class="baseClassName" v-if="show">
    <basicPop :title="title" :pop="pop" @closeClick="closeClick">
      <div class="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: '' }]" -->

          <div class="addressPrompt" v-show="isEditAddress">
            说明：请准确填写以上收货信息，否则，无法收到试用商品
          </div>

          <div class="submitButtonDiv">
            <van-button
             v-show="isEditAddress"
              round
              block
              :disabled="isDisable"
              type="info"
              native-type="submit"
              >提交申请</van-button
            >
            <van-button
              v-show="!isEditAddress"
              round
              block
              type="info"
              v-lz-click="'27'"
              @click="closeClick"
              >返回</van-button
            >
          </div>
        </van-form>
      </div>
    </basicPop>
    <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 basicPop from "./basicPop.vue";
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";
import { ReminderPopComService } from '../../../util/comCreate.js';
let { memberTrial, showaddress } = 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: [""],
  components: {
    basicPop,
  },
  data() {
    return {
      title: "填写申请信息",
      addressData: {},
      realName: "",
      mobile: "",
      cityName: "",
      address: "",
      zipCode: "",
      email: "",
      areaPopIndex: 0,
      areaList: {},
      orderCode: "",
      province: "",
      city: "",
      county: "",
      showcount: false,
      isDisable: false, //是否可以编辑
      prizeId:''
    };
  },
  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.prizeId = this.datas.prizeId;
    this.isEditAddress = this.datas.isEditAddress == false ? false : true;
    if(this.isEditAddress == false){
      this.title = '邮寄地址'
      this.address = this.datas.item.address;
      this.realName = this.datas.item.realName;
      this.mobile = this.datas.item.mobile;
      this.cityName = this.datas.item.province + this.datas.item.city+this.datas.item.county;   
      // this.cityName = this.datas.item.province + this.datas.item.city;    
    }
    this.isAlLookAddress = this.datas.isAlLookAddress == true ? true : false;
    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) {
      showaddress(prizeGrantId, (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;
          console.log(this.realName);
        }
      });
    }
  },
  mounted() {
    const drawName = sessionStorage.getItem("drawName");
    const addressId = sessionStorage.getItem("addressId");
    console.log(drawName);
  },
  methods: {
    showcountF() {
      this.showcount = true;
      this.$refs.address.setAttribute("readonly", "readonly");
    },

    closeClick() {
      console.log("1111111111111111");
      // this.publicData.$emit("cloasAddressPop");
      this.submit(null);
    },
    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.orderCode = sessionStorage.getItem("addressId");
      values.province = this.province;
      values.city = this.city;
      values.county = this.county;
      values.prizeId = this.prizeId;
      console.log('prizeId',values)
      this.$delete(values, "cityName");
      this.submit();
      ReminderPopComService.create(
        '~请准确核对信息，是否提交申请~',
        "//img10.360buyimg.com/imgzone/jfs/t1/191839/28/15560/2132/610244a0Ec8801e65/c1cf77e334a5e390.png",
        "//img10.360buyimg.com/imgzone/jfs/t1/176941/21/16560/55670/610226f4E071f9698/b376b31ac2d17255.png",
        2,
        this.index,
        values,
        (submit) => {
          ReminderPopComService.close();
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.addressMaskDiv {
  .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;

    .van-cell {
      border-radius: 0.08rem;
      margin-bottom: 0.1rem;
    }

    .van-cell__title {
      color: #333333;
    }

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

    .submitButtonDiv {
      margin-top: 0.6rem;
      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);
  }
}

.snapdragonAddressDiv {
  .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-size: 100% 100%;
        width: 100%;
        height: 1.14rem;
        position: relative;

        .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;

    .van-cell {
      border-radius: 0.08rem;
      margin-bottom: 0.1rem;
    }

    .van-cell__title {
      color: #333333;
    }

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

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

      button {
        display: block;
        width: 100%;
        height: 0.94rem;
        background-color: #495975;
        border-radius: 0.1rem;
        font-size: 0.46rem;
        color: #ffffff;
        margin-top: 0.63rem;
        border: none;
      }
    }
  }

  .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>
