<template>
  <!-- 统一认证组件 升级 -->
  <div class="unifyModal" v-if="
      pageData.remarks.isBuy === '1' &&
      isBuy !== '已订购' &&
      (pageData.remarks.attestation === 3 ||
        pageData.remarks.attestation === 4 ||
        pageData.remarks.attestation === 5)
    ">
    <div class="buyBox">
      <div style="border-color:#333333" class="btnInput">
        <input type="text" @input="inpChange" maxlength="11" placeholder="请输入联通号码" v-model="loginForm.phone" />
      </div>
      <div class="btn" @click="btnClick" v-if="!indexNum || indexNum === 0" :style="{
          'background-color': pageData.mainProduct.themeColor[0],
          'border-color': pageData.mainProduct.themeColor[1],
        }">
        {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
      </div>
      <div class="btn" @click="btnClick" v-else :style="{
          'background-color': pageData.mainProduct.themeColor[0],
          'border-color': pageData.mainProduct.themeColor[1],
        }">
        {{
          pageData.remarks.btnTextAss ? pageData.remarks.btnTextAss : "点我领取"
        }}
      </div>
      <div class="privacyBox">
        <van-checkbox v-model="checked" checked-color="#fc8940">
          <p style="margin: 0; padding: 0">我已阅读并同意</p>
        </van-checkbox>
        <span class="span" style="color: #fc8940" @click="$emit('hideClick')">《隐私声明》</span>
        <span class="span" style="color: #fc8940" @click="$emit('ruleClick')">《产品说明》</span>
      </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 class="tips">
        {{ pageData.remarks.privacyText }}
      </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="indexNum === 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 }})
          </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 } from "../api";
import { Dialog } from "vant";
export default {
  data () {
    return {
      imgUrl: process.env.VUE_APP_IMGS_URL,
      productJson: [],
      checked: false,
      times: 0,
      showAgreeMent: false,
      value: false,
      codeState: {
        state: false,
        time: 60,
        task: null,
      },
      checked: false,
      times: 0,
      loginForm: {
        phone: "",
        vcode: "",
      },
      authType: "",
    };
  },
  props: {
    pageData: Object,
    isBuy: String,
    indexNum: Number,
  },
  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);
  },
  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: {
    checkVcode () {
      if (this.loginForm.vcode.length > 6) {
        this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
      }
    },
    inpChange (e) {
      // if (/^1[3456789]\d{9}$/.test(this.loginForm.phone)) {
      //     if (this.checked === false) {
      //         this.$toast.fail("请先勾选隐私声明");
      //         return
      //     }
      //     if (this.pageData.remarks.attestation === 3) {
      //         setTimeout(() => {
      //             this.$emit('btnClick', this.loginForm.phone)
      //             e.srcElement.blur()
      //         }, 100)
      //     } else if (this.pageData.remarks.attestation === 4) {
      //         this.value = true
      //         setTimeout(() => {
      //             this.getCode()
      //         }, 500)
      //     }
      // }
    },
    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">
.unifyModal {
  background-color: #ffffff;
  padding-top: 60px;

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

    to {
      transform: scale(0.8);
    }
  }

  .buyBox {
    padding: 0 60px;
    position: relative;
    z-index: 3;

    .btnInput {
      width: 504px;
      height: 80px;
      background: #ffffff;
      border-width: 4px;
      border-style: solid;
      border-radius: 50px;
      margin: 0 auto;
      padding-left: 28px;
      box-sizing: border-box;

      input {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
        width: 100%;
        font-size: 32px;
        height: 80px;
        line-height: 80px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #757575;
        background-color: transparent;
        // position: absolute;
        // bottom: 22px;
        // left: 28px;
      }
    }

    .btn {
      width: 630px;
      height: 100px;
      margin-top: 20px;
      border-radius: 50px;
      line-height: 100px;
      font-size: 40px;
      font-weight: bold;
      border-style: solid;
      border-width: 4px;
      color: #ffffff;
      text-align: center;
      animation-name: scale;
      animation-duration: 0.6s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
    }

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

      span {
        color: #ea1313;
        font-weight: bold;
      }
    }

    .tips {
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      opacity: 0.8;
      text-align: center;
      transform: scale(0.85, 0.85);
      width: 100%;
      margin-left: -10%;
      color: #707070;
      line-height: 40px;
      padding: 18px 10%;
    }
  }

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