<template>
  <div>
    <van-overlay :show="value" :duration="0.1">
      <div class="login-modal modal">
        <img src="../assets/img/top@2x.png" class="top" />
        <img src="../assets/img/unicmlogo.png" class="logo" />
        <div class="body-box">
          <div class="input-box">
            <div class="input">
              <input type="text" v-model="loginForm.phone" placeholder="手机号码" />
            </div>
          </div>
          <div class="input-box">
            <div class="input">
              <input type="text" v-model="loginForm.vcode" v-on:input="checkVcode" placeholder="验证码" />
            </div>
            <div :class="{ code: 1, number: codeState.state }" @click="getCode">
              {{ codeState.state ? codeState.time + "s" : "获取验证码" }}
            </div>
          </div>
          <div class="btn-box">
            <div class="btn left" @click="$emit('change', false)">取消</div>
            <div class="btn right" @click="onLogin">登录</div>
          </div>
        </div>
      </div>
    </van-overlay>
    <vue-puzzle :show="showVcode" @success="onSuccessCode"></vue-puzzle>
  </div>
</template>
<script>
import { login, getCode, changeUserid, } from "../api/index";
import { activation } from "../api/JS";
import vuePuzzle from "vue-puzzle-vcode";
import addR from "../common/addRecord";
export default {
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: Boolean,
    type: String,
    text: String
  },
  components: {
    vuePuzzle
  },
  data () {
    return {
      loginForm: {
        phone: "",
        vcode: "",
      },
      codeState: {
        state: false,
        time: 60,
        task: null,
      },
      showVcode: false,
    };
  },
  computed: {
    pageData () {
      return this.$store.state.pageData;
    },
  },
  methods: {
    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("请输入正确手机号");
      }
      this.showVcode = true;
    },
    onSuccessCode () {
      this.showVcode = false;
      let {
        phone
      } = this.loginForm;
      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);
        }
      );
    },
    onLogin () {
      let {
        phone,
        vcode
      } = this.loginForm;
      if (!vcode) {
        return this.$toast("请输入验证码");
      }
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      login({
        phone,
        vcode
      }).then(async (res) => {
        if (res.code === 500 || res.data === "") {
          this.$toast.fail("登录失败");
        } else {
          clearInterval(this.codeState.task);
          this.codeState.task = null;
          this.codeState.state = false;
          this.codeState.time = 60;
          this.$store.commit("setUser", {
            userid: res.data.userid,
            phone: this.loginForm.phone,
          });
          if (this.$store.state.user.userid) {
            addR.loginSuccess();
          }
          this.$emit("getIsBuy");
          this.$emit("change", false);
          this.loginForm = {};
          this.$store.commit("setPageData", this.pageData);
          if (this.type === "manual") {
            addR.clickOrderRecord();
            this.$router.push({
              path: "/order001",
              query: {
                spid: this.$store.state.pageData.mainProduct.spid,
                cpid: this.$store.state.pageData.mainProduct.cpid,
              },
            });
          } else if (this.type === "member") {
            addR.memberClick();
            let url;
            if (this.pageData.mainProduct.isCompositeProduct === 2) {
              url = "/member002";
            } else {
              url = "/member001";
            }
            if (this.pageData.mainProduct.cacheSeatOne[0].memberUrl && this.pageData.mainProduct.cacheSeatOne[0].memberUrl !== "") {
              window.location.href = this.pageData.mainProduct.cacheSeatOne[0].memberUrl
            } else {
              this.$router.push({
                path: url,
                query: {
                  spid: this.$store.state.pageData.mainProduct.spid,
                  cpid: this.$store.state.pageData.mainProduct.cpid,
                  isCompositeProduct: this.$store.state.pageData.mainProduct.isCompositeProduct,
                  activeType: this.$store.state.pageData.mainProduct.activeType,
                  productName: this.$store.state.pageData.mainProduct.productName,
                },
              });
            }
          } else if (this.type === 'jihuo') {
            activation()
          }
          if (this.text === "腾讯激活") {
            this.jihuo();
          }
        }
      }, response => {
        if (response.code === 500) {
          this.$toast(response.message)
        }
      });
    },
    // 腾讯流量激活方法
    async jihuo () {
      // this.text = "";
      let res = await this.useridCode();
      let url =
        "https://mcgi.v.qq.com/unicom/check_user_order?usermob=" +
        res.data +
        "&otype=json&platform=5&_t=" +
        Math.random() +
        "&callback=test";
      this.myJsonp(
        url,
        (data) => {
          let params = data;
          QQVideoBridge.saveResult("saveSubscriptionStatus", params).done(
            (result) => {
              let res = JSON.parse(result);
              if (res.errcode === 0) {
                this.$toast.success("激活成功");
              } else {
                this.$toast.fail("激活失败");
              }
            }
          );
        },
        "test"
      );
    },
    useridCode () {
      let cpid = "tencent";
      let userid = this.$store.state.user.userid;
      return changeUserid({
        cpid,
        userid,
      });
    },
    myJsonp (url, callback, callbackname) {
      window[callbackname] = callback;
      let script = document.createElement("script");
      script.src = url;
      script.type = "text/javascript";
      document.head.appendChild(script);
    },
  },
};
</script>
<style lang="scss" scoped>
.modal {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 333px;
  transform: translateX(-50%);
  width: 530px;
  background-color: #fff;
  border-radius: 8px;

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

  .top {
    width: 100%;
    height: 96px;
  }

  .logo {
    width: 92px;
    height: 50px;
    position: absolute;
    top: 22px;
    left: 37px;
  }
}

.login-modal {
  top: 366px;

  .body-box {
    padding: 40px 50px 70px;

    .input-box {
      display: flex;
      line-height: 75px;
      margin-bottom: 25px;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #d6000f;

      .input {
        font-size: 32px;
        color: #000;
        flex: 1;
        background-color: transparent;

        input {
          margin: 0;
          padding: 0;
          border: none;
          outline: none;
          width: 100%;
        }
      }

      .code {
        font-size: 28px;
        width: 150px;
        margin: 0 10px;
        color: #d6000f;

        &.number {
          color: #a7a7a7;
        }
      }
    }

    .text-box {
      font-family: PingFang-SC-Medium;
      text-align: center;
      line-height: 55px;
      font-size: 32px;
    }

    .btn-box {
      display: flex;
      justify-content: space-between;

      .btn {
        width: 190px;
        margin-top: 20px;
        height: 80px;
        line-height: 80px;
        border-radius: 40px;
        font-size: 34px;
        font-weight: bold;
        text-align: center;
      }

      .left {
        background: #ffffff;
        border: 2px solid #bfbfbf;
        border-radius: 8px;
      }

      .right {
        color: #d6000f;
        background: #ffffff;
        border: 2px solid #d6000f;
        border-radius: 8px;
      }
    }
  }
}
</style>