<template>
  <div class="info-box" v-if="show">
    <infoPop :title="title" :pop="pop" @closeClick="closeClick">
      <div class="inputAllDiv">
        <van-form @submit="onSubmit">
          <van-field
            v-model="mobile"
            type="number"
            name="mobile"
            label="充值手机号:"
            placeholder="请输入"
            label-width="80"
            maxlength="11"
            :disabled="isDisable"
            required
          />
          <div class="addressPrompt">
            <p class="fill-text">重要充值说明：</p>
            <div class="fill-word" v-html="textHint"></div>
          </div>

          <div class="submitButtonDiv">
            <van-button
              class="fillInfoBtnClass"
              round
              block
              :disabled="isDisable"
              type="info"
              native-type="submit"
              :style="styleData.fillInfoBtn"
               v-lz-click="'24'"
              >确认并提交</van-button>
          </div>
        </van-form>
      </div>
    </infoPop>
    <affirmPop ref="affirmPopRef" :mobile="mobile" @affirmSubmitClick="affirmSubmitClick"></affirmPop>
  </div>
</template>

<script>
import infoPop from "./infoPop.vue";
import affirmPop from "./affirmPop.vue"
import Vue from "vue";
import { Button, Form } from "vant";
import { phoneCheck } from "../../../util/tools.js";
import apis1 from "../../../util/apis1.js";
let { submitGetFuLu } = apis1;
import {
  Toast,
} from "vant";


Vue.use(Form);
Vue.use(Button);
export default {
  props: [],
  components: {
    infoPop,
    affirmPop,
  },
  data() {
    return {
      title: "填写信息 领取权益",
      mobile: "",
      showcount: false,
      isDisable: false, //是否可以编辑
      pointPlay:false, //防连点
      textHint:'',
      pop:{
        titlepop:''
      }
    };
  },
  computed: {

  },
  created() {
    console.log(this.styleData,this.data,'data-----------')
    this.pop.fillInfo = this.styleData.fillInfo ? this.styleData.fillInfo : {"backgroundImage":"url(//img10.360buyimg.com/imgzone/jfs/t1/141588/29/18217/44025/5fd571b9Ef55329ec/42dba91b188b9dce.png)"}
    this.hintText()
  },
  mounted() {
     
  },
  watch:{
  },
  methods: {

    closeClick() {
      if(sessionStorage.getItem('startQuestion') == true){
        location.href = sessionStorage.getItem('activityUrl');
        sessionStorage.removeItem('startQuestion');
      }
      this.publicData.$emit("cloasAddressPop");
      this.submit();
    },
    onSubmit(values) {
      if(!this.mobile) {
        this.$toast("请输入手机号");
        return;
      }
      if (!phoneCheck(values.mobile)) {
        this.$toast("电话格式不正确");
        return;
      }
      console.log(this.$refs.affirmPopRef,'this.$refs.affirmPopRef')
      this.$refs.affirmPopRef.affirmPopShow = true
    },
    hintText(){
      if (this.data.prizeJson) {
      let jsonData = JSON.parse(this.data.prizeJson);
      this.jsonData = jsonData;
    }
    if(this.data.logisticsJson){
      let jsonData = JSON.parse(this.data.logisticsJson);
      this.jsonData = jsonData;
    }
    // 购物车锦鲤 data 结构不一样
      if(this.data.draw){
        if (this.data.draw.prizeJson) {
          let jsonData = JSON.parse(this.data.draw.prizeJson);
          this.jsonData = jsonData;
        }
        if(this.data.draw.logisticsJson){
          let jsonData = JSON.parse(this.data.draw.logisticsJson);
          this.jsonData = jsonData;
        }
      }
      this.textHint =  this.jsonData.planRule.replace(/\n/ig, "<br>");
       console.log(this.textHint,this.jsonData,'this.jsonData')
       delete this.jsonData.pin
       delete this.jsonData.planRule
    },

    async affirmSubmitClick(){
      console.log(this.data,'this.data')
      // this.closeClick()
      // this.publicData.$emit("cloasAddressPop");
      // this.hintText()
      const param ={
        contactTel:this.mobile,
        ...this.jsonData,
        id:this.data.id || this.data.prizeGrantId || this.data.draw.id
      }
      
      submitGetFuLu(param,(data) =>{
        // Toast.clear()
        if(data.resp_code === 0){
         this.$toast("领取成功");
         this.closeClick()
        } else{
          this.closeClick()
          this.$toast(data.resp_msg);
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped="scoped">
.fillInfoBtnClass{
   backgroundImage:url('//img10.360buyimg.com/imgzone/jfs/t1/125769/5/21394/20372/6268eedeEa00c993d/dfd61890bb7e7fa9.png');
}
.fill-text{
  color: #646566;
  margin-bottom: 0.2rem;
}
.fill-word{
  word-break: break-all;
  word-wrap: break-word;
}

.info-box {
  ::v-deep .van-field__control{
    text-align:right;
  }
  .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.4rem;
    }

    .van-cell__title {
      color: #333333;
    }

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

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