<template>
  <div :class="baseClassName" v-if="show">
    <basicPop :title="title" @closeClick="closeClick">
      <div class="inputAllDiv">
        <van-form @submit="onSubmit">
          <van-field v-model="realName" :disabled="isDisable" name="realName" label="姓名:" placeholder="请输入收货人姓名" maxlength="10" required />
          <!-- :rules="[{ required: true, message: '' }]" -->
          <van-field v-model="mobile" type="number" name="mobile" label="电话:" placeholder="请输入收货人手机号" maxlength="11" :disabled="isDisable" required />
          <!-- :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"
            required
          />
          <!-- :rules="[{ required: true, message: '' }]" -->
          <van-field
            v-if="snapdragon"
            v-model="address"
            name="address"
            label="详细地址:"
            :disabled="isDisable"
            placeholder="请输入详细地址"
            rows="1"
            autosize
            type="textarea"
            required
          />
          <!-- :rules="[{ required: true, message: '' }]" -->
          <van-field v-else v-model="address" name="address" label="详细地址:" :disabled="isDisable" placeholder="请输入详细地址" maxlength="80" required />
          <!-- :rules="[{ required: true, message: '' }]" -->

          <!-- <van-field v-model="zipCode" name="zipCode" label="邮政编码:" placeholder="请输入邮政编码" />
           <van-field v-model="email" name="email" label="邮件:" placeholder="请输入邮件地址" /> -->
          <div v-if="!isAlLookAddress" class="addressPrompt">请注意：地址填写简略、手机号填写错误皆会影响派单，导致您无法收到商品！（超过1小时未填写收货地址信息，视为放弃）</div>
          <div v-else class="addressPrompt">请注意:地址填写简略,手机号填写错误皆会影响派单,导致您无法收到商品!</div>

          <div class="submitButtonDiv"><van-button round block :disabled="isDisable" type="info" native-type="submit" v-lz-click="'24'">提交</van-button></div>
        </van-form>
      </div>
    </basicPop>
    <div class="maskAreaDiv" v-show="areaPopIndex == 1" :key="timer">
      <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';

let { reviseaddress, showaddress, getAreaInfo } = 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 {
      timer: new Date().getTime(),
      title: '邮寄地址',
      addressData: {},
      realName: '',
      mobile: '',
      cityName: '',
      address: '',
      zipCode: '',
      email: '',
      areaPopIndex: 0,
      areaList: {},
      orderCode: '',
      province: '',
      city: '',
      county: '',
      showcount: false,
      isDisable: false, //是否可以编辑
      pointPlay: 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() {
    console.log(this.styleData, 'shenm');
    // this.pop.titlepop = this.styleData.titlepop

    this.isEditAddress = this.datas.isEditAddress == false ? false : true;
    this.isAlLookAddress = this.datas.isAlLookAddress == true ? true : false;
    if (!this.isEditAddress) {
      this.isDisable = true;
    } else {
      this.isDisable = false;
    }

    getAreaInfo(responseData => {
      let areaUtil = responseData.data;
      this.areaList.province_list = areaUtil.province_list;
      this.areaList.city_list = areaUtil.city_list;
      this.areaList.county_list = areaUtil.county_list;
      this.$forceUpdate();
      this.timer = new Date().getTime();
    });
    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();
    },
    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;
      }
      if (this.pointPlay == true) {
        return;
      }
      this.pointPlay = true;
      values.orderCode = sessionStorage.getItem('addressId');
      values.province = this.province;
      values.city = this.city;
      values.county = this.county;
      this.$delete(values, 'cityName');
      reviseaddress(values, addressdatas => {
        if (addressdatas.data == '1') {
          this.$toast('已发货,无法修改地址');
          return;
        }
        if (addressdatas.data == '2') {
          this.$toast('已超过1小时,无法修改地址');
          return;
        }
        this.$toast('保存地址成功');
        // this.pointPlay = false
        setTimeout(() => {
          this.submit(values);
          this.publicData.$emit('isNotyFiceWinnerReorrd', true, false);
        }, 1000);
      });
    }
  }
};
</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>
