<template>
  <!-- 短信认证组件 -->
  <div class="duanCol">
    <div class="matchBanner" :style="{
        backgroundColor: pageData.mainProduct.bgColor[2],
        borderColor: pageData.mainProduct.bgColor[3],
      }">
      <div v-if="pageData.mainProduct.guidancePic.p" class="matchImage" :style="{
          backgroundImage: `url(${imgUrl}${pageData.mainProduct.guidancePic.p})`,
        }"></div>
      <div class="textBox">
        <div class="input">
          <input type="text" maxlength="11" v-model="loginForm.phone" placeholder="联通手机号" />
        </div>
        <div class="input">
          <input type="text" v-model="loginForm.vcode" v-on:input="checkVcode" placeholder="验证码" maxlength="6" />
          <span class="getcode" :class="{ code: 1, number: codeState.state }" @click="getCode()">{{ codeState.state ? codeState.time + "s" : "获取验证码" }}</span>
        </div>
      </div>
      <div class="privacyBox">
        <van-checkbox v-model="checked" checked-color="#fc8940">
          <div :style="productJson.length>0 && productJson[0].proC.s!==''  ?{color:`${productJson[0].proC.s}`}:{color:'#000'}">
            <p style="margin: 0; padding: 0">我已阅读并同意
            </p>
          </div>
        </van-checkbox>
        <span class="span" :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}" @click="$emit('hideClick')">《隐私声明》</span>
        <span class="span" :style="productJson.length>0 && productJson[0].proC.e!==''?{color:`${productJson[0].proC.e}`}:{color:'#000'}" @click="$emit('ruleClick')">《产品说明》</span>
      </div>
      <div class="tips" :style="productJson.length>0 && productJson[0].proC.s!=='' ?{color:`${productJson[0].proC.s}`}:{color:'#fff'}">
        {{pageData.remarks.privacyText}}
      </div>
    </div>
    <!-- 订购按钮 -->
    <div class="buyBox" v-if="pageData.remarks.isBuy === '1'">
      <div v-if="productJson.length>0 && productJson[0].btnUrl!=='' && productJson[0].productV==='2'" class="btnImg" @click="btnClick()">
        <img :src="productJson[0].btnUrl" alt="">
      </div>
      <div v-else class="btn" @click="btnClick()" :style="pageData.remarks.btnText.length<=7?{
          'background-image': `linear-gradient(${pageData.mainProduct.themeColor[0]},${pageData.mainProduct.themeColor[1]})`,
        }:{'background-image': `linear-gradient(${pageData.mainProduct.themeColor[0]},${pageData.mainProduct.themeColor[1]})`,'width':345+'px'}">
        {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
        <div class="originalPrice" :style="{ color: pageData.mainProduct.bgColor[2] }">
          <s>{{ pageData.mainProduct.originalPrice }}元/月</s>
        </div>
      </div>
      <div class="text" :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.e}`}:{'color':'#000'}">
        <span :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.s}`}:{'color':'#ea1313'}">{{ times }}</span>{{pageData.remarks.orderText!=='' && pageData.remarks.orderText?pageData.remarks.orderText:'用户已抢购成功'}}
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCode
} from '../../../api'
import {
  Dialog
} from "vant";
export default {
  data () {
    return {
      imgUrl: process.env.VUE_APP_IMGS_URL,
      productJson: [],
      checked: false,
      times: 0,
      loginForm: {
        phone: "",
        vcode: "",
      },
      codeState: {
        state: false,
        time: 60,
        task: null,
      },
    }
  },
  props: {
    pageData: Object
  },
  created () {
    if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne !== null) {
      this.productJson = this.pageData.mainProduct.cacheSeatOne
    }
    if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks
      .privacy !==
      null) {
      if (this.pageData.remarks.privacy === '1') {
        this.checked = true
      }
    }
    let start = this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== '' ? Number(this.pageData
      .remarks.orderNum) : 0
    let add = this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== '' ? Number(this.pageData
      .remarks.orderAdd) : 1
    let now = new Date().getTime();
    let times = (now - 1600476800000) / 180000;
    this.times = String(Math.ceil(times * add) + start)
  },
  methods: {
    btnClick () {
      if (this.checked === false) {
        this.$toast.fail("请先勾选隐私声明");
      } else {
        let {
          phone,
          vcode
        } = this.loginForm;
        if (!/^1[23456789]\d{9}$/.test(phone)) {
          return this.$toast("请输入正确手机号");
        }
        if (!vcode) {
          return this.$toast("请输入验证码");
        }
        this.$emit("btnClick", this.loginForm);
        this.loginForm = {}
      }
    },
    checkVcode () {
      if (this.loginForm.vcode.length > 6) {
        this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
      }
    },
    getCode () {
      if (this.codeState.state) return;
      let {
        phone
      } = this.loginForm;
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      let str = phone.slice(0, 3)
      let str2 = phone.slice(0, 4)
      let number = this.$store.state.fictitious.split(',')
      let isDialog = true
      if (number !== '') {
        number.forEach(element => {
          if (element === str || element === str2) {
            isDialog = false
          }
        });
      }
      if (isDialog === false) {
        Dialog({
          message: '您的号码为虚拟运营商号码，不支持办理此业务',
          theme: 'round-button',
        })
        return false
      }
      if (this.checked === false) {
        return this.$toast.fail("请先勾选隐私声明");
      }
      getCode({
        phone
      }).then(res => {
        this.$toast("验证码已发送");
        this.codeState.state = true;
        this.codeState.task = setInterval(() => {
          if (this.codeState.time <= 0) {
            clearInterval(this.codeState.task);
            this.codeState.task = null;
            this.codeState.state = false;
            this.codeState.time = 60;
          } else {
            this.codeState.time--;
          }
        }, 1000);
      }, res => {
        this.$toast(res.message);
      })
    }
  }

}
</script>

<style lang="scss">
.duanCol {
  // 产品配图样式
  .matchBanner {
    margin: 0 auto;
    margin-top: -8px;
    width: 690px;
    padding: 70px 35px 90px 35px;
    box-sizing: border-box;
    border-radius: 20px;
    border-width: 1px;
    border-style: solid;
    position: relative;
    z-index: 3;

    .matchImage {
      width: 100%;
      height: 134px;
      background-size: 100%;
      background-repeat: no-repeat;
    }

    .textBox {
      // width: 750px;
      // padding: 0 50px;
      box-sizing: border-box;

      .input {
        width: 100%;
        height: 80px;
        background: #ffffff;
        border-radius: 10px;
        margin-top: 25px;
        opacity: 0.5;
        display: flex;
        flex-direction: row;
        padding: 0 15px;
        box-sizing: border-box;
        position: relative;

        input {
          margin: 0;
          padding: 0;
          border: none;
          outline: none;
          width: 70%;
          height: 100%;
          line-height: 80px;
          font-size: 34px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000;
        }

        .getcode {
          font-size: 34px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #0d0d0d;
          position: absolute;
          right: 20px;
          bottom: 24px;
        }
      }
    }
  }

  @keyframes scale {
    from {
      transform: scale(1);
    }

    to {
      transform: scale(0.8);
    }
  }

  .buyBox {
    margin-top: -48px;
    padding: 0 25px;
    position: relative;
    z-index: 3;

    .btnImg {
      width: 387px;
      height: 114px;
      margin: 0 auto;
      border-radius: 50px;
      line-height: 114px;
      font-size: 48px;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      text-shadow: 2px 2px #1b1414;
      animation-name: scale;
      animation-duration: 0.3s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      position: relative;

      img {
        width: auto;
        height: 100%;
      }
    }

    .btn {
      width: 387px;
      height: 100px;
      margin: 0 auto;
      line-height: 100px;
      border-radius: 50px;
      font-size: 48px;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      text-shadow: 2px 2px #1b1414;
      animation-name: scale;
      animation-duration: 0.3s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      position: relative;

      .originalPrice {
        text-shadow: 0px 0px #1b1414;
        width: 120px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        position: absolute;
        top: -25px;
        left: 0;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        border-bottom-left-radius: 25px;
        background-color: #fef5e4;
        color: #89271a;
        font-size: 16px;
      }
    }

    .text {
      // color: #0d0d0d;
      line-height: 50px;
      font-size: 26px;
      // font-weight: bold;
      text-align: center;

      span {
        font-weight: bold;
      }
    }
  }

  .privacyBox {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 49px;
    font-size: 22px;

    .van-checkbox {
      text-align: right;
      display: flex;
      justify-content: flex-end;
    }

    .span {
      display: flex;
      align-items: center;
    }
  }

  .tips {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    opacity: 0.8;
    text-align: center;
    margin-top: 18px;
    transform: scale(0.85, 0.85);
    width: 120%;
    margin-left: -10%;
    line-height: 40px;
  }
}
</style>