<template>
  <!-- 统一认证组件 炫彩 升级 -->
  <div class="unifyColor">
    <div class="tabs" v-if="newProduct.length<=2&& pageData.mainProduct.cacheSeatOne && pageData.mainProduct.cacheSeatOne!==null">
      <div class="tab" v-for="(item,index) in newProduct" :key="index" :class="index === num?'left':'right'" :style="index === num?{backgroundColor: pageData.mainProduct.bgColor[2],color:  `${pageData.mainProduct.cacheSeatOne[0].tabC.s}`}:{color:  `${pageData.mainProduct.cacheSeatOne[0].tabC.e}`,opacity:'0.7'}" @click="tabClick(item.id,index)">
        {{item.productName}}
      </div>
    </div>
    <div class="matchBanner"  :style="{backgroundColor: pageData.mainProduct.bgColor[2],borderColor: pageData.mainProduct.bgColor[3],}">
      <div class="matchImage" :style="{backgroundImage: `url(${imgUrl}${pageData.mainProduct.guidancePic.p})`,}"></div>
      <div class="textBox">
        <div class="input">
          <input type="text" maxlength="11" placeholder="请输入联通号码" v-model="loginForm.phone" />
        </div>
      </div>
      <div class="privacyBox">
        <van-checkbox v-model="checked" checked-color="#fc8940">
          <div :style=" pageData.mainProduct.cacheSeatOne && pageData.mainProduct.cacheSeatOne!==null && pageData.mainProduct.cacheSeatOne[0].proC.s !== ''? { color: `${pageData.mainProduct.cacheSeatOne[0].proC.s}` }: { color: '#000' }">
            <p style="margin: 0; padding: 0">我已阅读并同意</p>
          </div>
        </van-checkbox>
        <span class="span" :style=" pageData.mainProduct.cacheSeatOne && pageData.mainProduct.cacheSeatOne!==null && pageData.mainProduct.cacheSeatOne[0].proC.e !== ''? { color: `${pageData.mainProduct.cacheSeatOne[0].proC.e}` }: { color: '#000' }" @click="$emit('hideClick')">《隐私声明》</span>
        <span class="span" :style="pageData.mainProduct.cacheSeatOne && pageData.mainProduct.cacheSeatOne!==null && pageData.mainProduct.cacheSeatOne[0].proC.e !== ''? { color: `${pageData.mainProduct.cacheSeatOne[0].proC.e}` }: { color: '#000' }" @click="$emit('ruleClick')">《产品说明》</span>
      </div>
      <div class="tips" :style="pageData.mainProduct.cacheSeatOne && pageData.mainProduct.cacheSeatOne!==null && pageData.mainProduct.cacheSeatOne[0].proC.s !== ''? { color: `${pageData.mainProduct.cacheSeatOne[0].proC.s}` }: { color: '#fff' }">
        {{ pageData.remarks.privacyText }}
      </div>
    </div>
    <!-- 订购按钮 -->
    <div class="buyBox" v-if="pageData.remarks.isBuy === '1'">
      <div v-if="pageData.mainProduct.cacheSeatOne &&pageData.mainProduct.cacheSeatOne!==null &&pageData.mainProduct.cacheSeatOne[0].btnUrl !== '' &&pageData.mainProduct.cacheSeatOne[0].productV === '2'
        " class="btnImg" @click="btnClick()">
        <img :src="pageData.mainProduct.cacheSeatOne[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', }">
        <span v-if="num===0">{{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}</span>
        <span v-else>{{ pageData.remarks.btnTextAss ? pageData.remarks.btnTextAss : "点我领取" }}</span>
        <div v-if="num ===0" class="originalPrice" :style="{ color: pageData.mainProduct.bgColor[2] }">
          <s>{{ pageData.mainProduct.originalPrice }}元/月</s>
        </div>
      </div>
      <div class="text" :style="pageData.mainProduct.cacheSeatOne&& pageData.mainProduct.cacheSeatOne!==null && pageData.mainProduct.cacheSeatOne[0].rushC.e !== '' ? { color: `${pageData.mainProduct.cacheSeatOne[0].rushC.e}` }: { color: '#000' }">
        <span :style="pageData.mainProduct.cacheSeatOne&& pageData.mainProduct.cacheSeatOne!==null && pageData.mainProduct.cacheSeatOne[0].rushC.e !== ''? { color: `${pageData.mainProduct.cacheSeatOne[0].rushC.s}` }: { color: '#ea1313' }">{{ times }}</span>
        {{pageData.remarks.orderText !== "" && pageData.remarks.orderText? pageData.remarks.orderText: "用户已抢购成功"}}
      </div>
    </div>
    <van-overlay :show="value" :duration="0.1" lock-scroll>
      <div class="modalInput" @click.stop>
        <img src="../../assets/img/close.png" class="close" @click="value = false" />
        <div class="name">
          您正在订购<span>{{ pageData.mainProduct.productName }}</span>
        </div>
        <div v-if="num ===0">
          <div class="maskText" v-if="pageData.remarks.isMask === '1'">
            {{ pageData.remarks.maskText }}
          </div>
          <div class="maskText2" v-if="pageData.remarks.isMask === '1' && pageData.remarks.maskText2">
            ({{ pageData.remarks.maskText2 }})
          </div>
        </div>
        <div v-else>
          <div class="maskText" v-if="pageData.remarks.isMask === '1'">
            {{ pageData.remarks.fitText }}
          </div>
          <div class="maskText2" v-if="pageData.remarks.isMask === '1'">
            ({{ pageData.remarks.fitText2 }})
          </div>
        </div>
        <div class="getCode">
          <input type="text" v-model="loginForm.vcode" v-on:input="checkVcode" placeholder="验证码" maxlength="6" />
          <span class="code" :class="{ code: 1, number: codeState.state }" @click="getCode()">{{ codeState.state ? codeState.time + "s" : "重新获取" }}</span>
        </div>
        <div class="inputBtn" @click="unified">确认订购</div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getCode, getNewCode, numberSearch, detMainProduct } from "../../api";
import { Dialog } from "vant";
export default {
  data () {
    return {
      imgUrl: process.env.VUE_APP_IMGS_URL,
      checked: false,
      times: 0,
      showAgreeMent: false,
      value: false,
      codeState: {
        state: false,
        time: 60,
        task: null,
      },
      checked: false,
      // times: 0,
      loginForm: {
        phone: "",
        vcode: "",
      },
      authType: "",
      newProduct: [],
      num: 0,
    };
  },
  props: {
    pageData: Object,
    isBuy: String,

  },
  created () {
    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);
    if (
      this.pageData.strategyInfo.viceProductStrategyList !== null &&
      this.pageData.strategyInfo.viceProductStrategyList.length > 0
    ) {
      this.productList();
    }
  },
  mounted () {
    if (this.$route.query.phone) {
      this.loginForm.phone = this.$route.query.phone;
    } else if (localStorage.getItem("phone")) {
      setTimeout(() => {
        let phone = localStorage.getItem("phone");
        if (phone) {
          this.loginForm.phone = phone;
        }
      }, 1000);
    }
  },
  methods: {
    // 切换副产品
    tabClick (val, index) {
      this.num = index
      if (index !== 0) {
        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) / 200000;
        this.times = String(Math.ceil(times * add) + start);
      } else {
        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);
      }
      this.$emit('productClick', val, index)

    },
    // 获取副产品
    async productList () {
      this.newProduct.push(this.pageData.mainProduct);
      let list = this.pageData.strategyInfo.viceProductStrategyList;
      for (let i = 0; i < list.length; i++) {
        let res = await detMainProduct({ productId: list[i] });
        this.newProduct.push(res.data);
      }
    },
    checkVcode () {
      if (this.loginForm.vcode.length > 6) {
        this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
      }
    },
    btnClick () {
      if (this.loginForm.phone === "") {
        this.$toast("请输入手机号");
        return false;
      }
      if (/^1[3456789]\d{9}$/.test(this.loginForm.phone)) {
        let str = this.loginForm.phone.slice(0, 3);
        let str2 = this.loginForm.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) {
          this.$toast.fail("请先勾选隐私声明");
        } else {
          numberSearch({ userId: this.loginForm.phone }).then((res) => {
            if (res.data.authType !== null && res.data.authType !== "0" && res.data.authType !== "1" && res.data.authType !== "2") {
              if (res.data.authType === "3") {
                this.$emit("btnClick", this.loginForm.phone);
              } else if (
                res.data.authType === "4" ||
                res.data.authType === "5"
              ) {
                this.authType = res.data.authType;
                this.value = true;
                setTimeout(() => {
                  this.getCode();
                }, 500);
              }
            } else {
              if (this.pageData.remarks.attestation === 3) {
                this.$emit("btnClick", this.loginForm.phone);
              } else {
                this.value = true;
                setTimeout(() => {
                  this.getCode();
                }, 500);
              }
            }
          });
        }
      } else {
        this.$toast("手机号格式错误");
      }
    },
    getCode () {
      if (this.codeState.state) return;
      let { phone } = this.loginForm;
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      if (this.authType !== "") {
        if (this.authType === "4") {
          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);
            }
          );
        } else if (this.authType === "5") {
          let params = {
            cpid: this.pageData.mainProduct.cpid,
            spid: this.pageData.mainProduct.spid,
            type: "",
            userid: phone,
          };
          getNewCode(params).then((res) => {
            if (res.code === 10000) {
              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);
              this.$store.commit("setUser", {
                userid: res.data,
                phone: this.loginForm.phone,
              });
            }
          },
            (res) => {
              this.$toast(res.message);
            }
          );
        }
      } else {
        if (this.pageData.remarks.attestation === 4) {
          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);
            }
          );
        } else if (this.pageData.remarks.attestation === 5) {
          let params = {
            cpid: this.pageData.mainProduct.cpid,
            spid: this.pageData.mainProduct.spid,
            type: "",
            userid: phone,
          };
          getNewCode(params).then((res) => {
            if (res.code === 10000) {
              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);
              this.$store.commit("setUser", {
                userid: res.data,
                phone: this.loginForm.phone,
              });
            }
          },
            (res) => {
              this.$toast(res.message);
            }
          );
        }
      }
    },
    // 短人订购&&简认订购
    unified () {
      if (this.checked === false) {
        this.$toast.fail("请先勾选隐私声明");
      } else {
        if (!this.loginForm.vcode) {
          return this.$toast("请输入验证码");
        }
        if (this.authType !== "") {
          if (this.authType === "4") {
            this.$emit("toBuy", this.loginForm);
            this.value = false;
          } else {
            this.$emit("toNewBuy", this.loginForm);
            this.value = false;
          }
          this.loginForm = {};
        } else {
          if (this.pageData.remarks.attestation === 4) {
            this.$emit("toBuy", this.loginForm);
            this.value = false;
          } else {
            this.$emit("toNewBuy", this.loginForm);
            this.value = false;
          }
          this.loginForm = {};
        }
      }
    },
  },
};
</script>

<style lang="scss">
.unifyColor {
  // background-color: #ffffff;
  // padding-top: 60px;

  // 产品配图样式
  .tabs {
    width: 690px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    line-height: 100px;
    text-align: center;
    background-color: #ffffff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-size: 36px;
    font-weight: 700;
    font-family: PingFang SC, PingFang SC-Bold;
    position: relative;
    z-index: 3;
    .tab {
      width: 50%;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: pre;
    }
    .left {
      border-top-right-radius: 20px;
    }
    .right {
      border-top-left-radius: 20px;
    }
  }
  .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: 386px;
      height: 88px;
      margin: 0 auto;
      line-height: 88px;
      border-radius: 50px;
      font-size: 48px;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      text-shadow: 1px 2px 1px rgba(138, 64, 4, 0.6);
      animation-name: scale;
      animation-duration: 0.3s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      position: relative;
      font-family: Source Han Sans CN;

      .originalPrice {
        text-shadow: 0px 0px #1b1414;
        width: 120px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        position: absolute;
        top: -35px;
        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;
  }

  .modalInput {
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 333px;
    transform: translateX(-50%);
    width: 630px;
    min-height: 530px;
    background: #ffffff;
    border-radius: 20px;
    padding: 0 72px 44px 72px;

    .name {
      text-align: center;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #0e0e0e;
      margin-top: 78px;

      span {
        color: #ff8a18;
      }
    }

    .maskText {
      text-align: center;
      font-size: 50px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #0e0e0e;
      margin-top: 42px;
    }

    .maskText2 {
      text-align: center;
      font-size: 20px;
      font-family: PingFang SC;
      color: #0e0e0e;
      margin-top: 22px;
    }

    .getCode {
      width: 100%;
      height: 90px;
      background: #ffffff;
      border: 1px solid #9e9e9e;
      border-radius: 10px;
      margin-top: 43px;
      box-sizing: border-box;
      padding-left: 31px;
      padding-right: 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      input {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
        width: 60%;
        font-size: 32px;
        height: 90px;
        line-height: 90px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #d3d3d3;
        background-color: transparent;
      }

      .code {
        display: block;
        line-height: 90px;
        text-align: center;
        font-size: 34px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ff8a3e;
        // position: absolute;
        // right: 20px;
        // bottom: 24px;
      }
    }

    .inputBtn {
      width: 100%;
      height: 90px;
      background: #ff8a3e;
      border-radius: 10px;
      font-size: 40px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      line-height: 90px;
      margin-top: 20px;
    }

    .close {
      width: 80px;
      height: 80px;
      position: absolute;
      bottom: -130px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>