<template>
  <div class="swWishLamp" v-if="isShow">
    <div class="floor">
      <div class="text">
        <span class="text1">许愿灯{{ index + 1 }}的解锁条件为下单满{{ datas.needMoney }}元</span>
        <span class="text2">许愿灯{{ index + 1 }}的奖品为{{ datas.prizeName }}，该奖品需提前填写收货地址；</span>
        <span class="text3">是否确认点亮？</span>
      </div>

      <div class="prizeImg"><img :src="datas.prizeUrl" /></div>

      <div class="inputAllDiv">
        <van-form @submit="onSubmit">
          <van-field v-model="realName" name="realName" label="姓名:" placeholder="请输入收货人姓名" maxlength="10" :rules="[{ required: true, message: '' }]" />
          <van-field
            v-model="mobile"
            type="number"
            name="mobile"
            label="电话:"
            placeholder="请输入收货人手机号"
            :rules="[{ required: true, message: '' }, { required: true, message: '' }]"
            maxlength="11"
          />
          <van-field
            class="pickerArea"
            v-model="cityName"
            onfocus="this.blur()"
            name="cityName"
            label="省市区"
            :value="cityName"
            placeholder="请选择省/市/区"
            :rules="[{ required: true, message: '' }]"
            @click="selectCity()"
          />
          <van-field v-model="address" name="address" label="详细地址:" placeholder="请输入详细地址" :rules="[{ required: true, message: '' }]" />

          <!-- <van-field v-model="zipCode" name="zipCode" label="邮政编码:" placeholder="请输入邮政编码" />
           <van-field v-model="email" name="email" label="邮件:" placeholder="请输入邮件地址" /> -->
          <!-- <div class="addressPrompt">请注意：地址填写简略、手机号填写错误皆会影响派单，导致您无法收到商品！（超过1小时未填写收货地址信息，视为放弃）</div> -->
          <div class="submitButtonDiv"><van-button round block type="info" native-type="submit">确认点亮</van-button></div>
          <div style="font-size: 0.12rem;color: #FF0000;">
            <span>请注意:地址填写简略,手机号填写错误皆会影响派单,导致您无法收到商品!</span>
          </div>

        </van-form>
      </div>
      <div class="maskAreaDiv" v-show="areaPopIndex == 1">
        <van-area title="" :area-list="areaList" :columns-placeholder="['请选择', '请选择', '请选择']" @cancel="areaCancel" @confirm="areaConfirm" />
      </div>


    </div>
    <div class="closeDiv" @click="closeClick()"><img src="//img10.360buyimg.com/imgzone/jfs/t1/133343/17/19838/1158/5fd5c798E72ccdde6/51194de08ba1e3dc.png" /></div>
  </div>
</template>
<script>
import areaUtil from '../../../util/areaUtil.js';
import Vue from 'vue';
import { Form } from 'vant';
Vue.use(Form);
import { Field } from 'vant';
Vue.use(Field);
import { Button } from 'vant';
Vue.use(Button);
import { Notify } from 'vant';
Vue.use(Notify);
import { Picker } from 'vant';
Vue.use(Picker);
import { Toast } from 'vant';
Vue.use(Toast);
import { Area } from 'vant';
Vue.use(Area);
import { phoneCheck, checkInput } from '../../../util/tools.js';
import apis from '../../../util/apis1.js';
let { reviseaddress, showaddress, lightUp } = apis;
import { wishLampService } from '../../../util/comCreate.js';
export default {
  name: 'swWishLamp',
  data() {
    return {
      isShow: true, //组件是否显示
      realName: '',
      mobile: '',
      cityName: '',
      address: '',
      areaPopIndex: 0,
      areaList: {},
      orderCode: '',
      province: '',
      city: '',
      county: '',
      showcount: false
    };
  },
  created() {
    console.log(this.datas, '1231111111111111');
    this.datas.needMoney = parseFloat((this.datas.needMoney)/100).toFixed(2);
    console.log(this.index);
    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: {
    closeClick() {
      this.isShow = false;
    },
    showcountF() {
      this.showcount = true;
      this.$refs.address.setAttribute('readonly', 'readonly');
    },
    selectCity() {
      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 (!phoneCheck(values.mobile)) {
        this.$toast('电话格式不正确');
        return;
      }
      console.log(checkInput(values.realName), '检查');
      if (!checkInput(values.realName) || !checkInput(values.address)) {
        this.$toast('收货信息不可包含表情等特殊字符');
        return;
      }
      if (!this.province || !this.city || !this.county) {
        this.$toast('请选择省市区');
        return;
      }

      values.province = this.province;
      values.city = this.city;
      values.county = this.county;
      this.$delete(values, 'cityName');
      console.log(values);
      //   reviseaddress(values, addressdatas => {
      //     this.$toast('保存地址成功');
      //     this.submit(values);
      //   });
      lightUp(this.datas.prizeId, values, lightUpData => {
        console.log(lightUpData);

        console.log(this.datas, 'datas');
        this.isShow = false;
        this.isFirstLight = true;
        this.datas.lightType = 2;
        var styleData = {
          floor: {
            width: '5.6rem',
            height: '6.6rem',
            'background-color': '#fff',
            'border-radius': '0.1rem',
            position: 'fixed',
            margin: 'auto',
            left: '0',
            right: '0',
            top: '3.2rem',
            text11: {
              'font-size': '0.3rem',
              color: '#fe8632',
              display: 'block',
              'text-align': 'center',
              'margin-top': '0.5rem',
              'margin-bottom': '0.35rem'
            },
            text12: {
              'font-size': '0.3rem',
              color: '#fe8632',
              display: 'block',
              'text-align': 'center',
              'margin-top': '0.5rem',
              'margin-bottom': '0.2rem'
            },
            text13: {
              'font-size': '0.3rem',
              color: '#fe8632',
              display: 'block',
              'text-align': 'center',
              'margin-top': '0.1rem',
              'margin-bottom': '0.15rem'
            },
            text21: {
              'font-size': '0.37rem',
              color: '#e2231a',
              display: 'block',
              'text-align': 'center'
            },
            text22: {
              'font-size': '0.3rem',
              color: '#fe8632',
              display: 'block',
              'text-align': 'center'
            },
            text23: {
              'font-size': '0.3rem',
              color: '#fe8632',
              display: 'block',
              'text-align': 'center'
            },
            text3: {
              color: '#e2231a',
              'font-size': '0.35rem',
              display: 'block',
              'text-align': 'center',
              'margin-top': '0.3rem'
            },
            text33: {
              color: '#fe8632',
              'font-size': '0.35rem',
              display: 'block',
              'text-align': 'center',
              'margin-top': '0.15re'
            },
            text4: {
              color: '#e2231a',
              'font-size': '0.4rem',
              display: 'block',
              'text-align': 'center',
              'margin-top': '0.15rem'
            },
            prizeImg: {
              width: '2.8rem',
              height: '2.8rem',
              margin: '0.2rem auto',
              img: {
                width: '2.8rem',
                height: '2.8rem'
              }
            },
            backBtn: {
              width: '4.8rem',
              height: '0.9rem',
              'background-color': 'red',
              'border-radius': '0.1rem',
              'margin-left': '0.4rem',
              'font-size': '0.3rem',
              color: '#fff',
              position: "fixed",
              top:' 8.7rem',
            },
            lightLamp: {
              width: '4.8rem',
              height: '0.9rem',
              'background-color': 'red',
              'border-radius': '0.1rem',
              'margin-left': '0.4rem',
              'font-size': '0.4rem',
              color: '#fff',
              position: "fixed",
              top:' 8.7rem',
            },
            goToShop: {
              width: '4.8rem',
              height: '0.9rem',
              'background-color': 'red',
              'border-radius': '0.1rem',
              'margin-left': '0.4rem',
              'font-size': '0.4rem',
              color: '#fff',
              position: "fixed",
              top:' 8.7rem',
            }
          }
        };
        wishLampService.create(styleData, this.datas, this.index, this.drawPrizeTime, this.wishStartTime, submit => {
          console.log(submit);
          wishLampService.close();
          this.submit(this.isFirstLight);
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.swWishLamp {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 200;
  .floor {
    position: fixed;
    bottom: 0;
    height: 11.97rem;
    width: 100%;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/171784/21/1672/114439/6066b444E034f888c/455a0f170462699d.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .text {
      margin-top: 0.4rem;
    }
    .text1 {
      color: #fff;
      font-size: 0.35rem;
      display: block;
      text-align: center;
      margin-bottom: 0.1rem;
    }
    .text2 {
      color: #fff;
      font-size: 0.25rem;
      display: block;
      text-align: center;
      margin-bottom: 0.15rem;
    }
    .text3 {
      color: #fff;
      font-size: 0.35rem;
      display: block;
      text-align: center;
    }
    .prizeImg {
      width: 3rem;
      height: 3rem;
      background-color: #fff;
      border-radius: 0.1rem;
      margin: 0.3rem auto;
      img {
        width: 2.8rem;
        height: 2.8rem;
        margin-left: 0.1rem;
        margin-top: 0.1rem;
      }
    }
  }
  .closeDiv {
    position: absolute;
    top: 1.5rem;
    right: 0.2rem;
    display: flex;
    img {
      width: 0.22rem;
      height: 0.22rem;
    }
  }
  .inputAllDiv {
    margin: 0.32rem 0.3rem 0 0.3rem;
    position: relative;
    .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;
    .van-picker {
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 10;
    }
  }
}
</style>
