<template>
  <div class="jihuoIndex">
    <div class="banner">
      <!-- <img src="./img/banner.png" alt=""> -->
    </div>
    <div class="buyBoxText">
      <div class="textBox">
        <div class="input">
          <input type="text" 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="btn" @click="btnClick">
        立即激活
      </div>
    </div>
    <div class="mainBox">
      <div class="title">
        <div class="text">温馨提示</div>
        <div class="bot"></div>
      </div>
      <div class="main">
        <p>1、本页为联通畅视定向流量使用激活页面，您购买的定向流量包产品均在此激活使用。</p>
        <p>2、激活失败代表您开通的产品信息未能同步到本客户端内，请致电4006000600客服为您处理。</p>
        <p>3、激活后请切换到联通4/5G网络下，看到联通免流弹出提示或在播放器中有联通logo既表示正在免流使用。</p>
        <p>4、定向流量使用量自助查询请关注“联通畅视”微信公众号进行查询。 感谢您的使用！</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCode,
  login,
  changeUserid,
  changeUseridToBsite
} from '../../api/index'
import util from '../../util';
export default {
  data () {
    return {
      loginForm: {
        phone: "",
        vcode: "",
      },
      checked: false,
      codeState: {
        state: false,
        time: 60,
        task: null,
      },
      temp: ""

    }
  },
  created () {
    let {
      temp
    } = util.query2obj(location.search);
    this.temp = temp
    if (temp === 'ksJihuo') {
      this.createJs()
    }
  },
  methods: {
    btnClick () {
      let {
        phone,
        vcode
      } = this.loginForm;
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      if (!vcode) {
        return this.$toast("请输入验证码");
      }
      login({
        phone,
        vcode
      }).then(res => {
        localStorage.setItem('userid', res.data.userid)
        localStorage.setItem('phone', phone)
        this.loginForm = {}
        if (this.temp !== '') {
          this.jihuo()
        } else {
          this.$toast.fail('没有适配激活方式!')
        }
      }, res => {
        this.$toast(res.message);
      })
    },
    getCode () {
      if (this.codeState.state) return;
      let {
        phone
      } = this.loginForm;
      if (!/^1[23456789]\d{9}$/.test(phone)) {
        return this.$toast("请输入正确手机号");
      }
      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);
      })
    },
    checkVcode () {
      if (this.loginForm.vcode.length > 6) {
        this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
      }
    },
    jihuo () {

      if (this.temp !== "") {
        if (this.temp === 'bili') {
          this.biliJihuo()
          console.log('调用B站激活')
        } else if (this.temp === 'tencent') {
          this.tencentJihuo()
          console.log('调用腾讯激活')
        } else if (this.temp === 'ksJihuo') {
          console.log(window.ksBridge)
          if (window.ksBridge !== undefined) {
            console.log('调用快手激活')
            window.ksBridge.register(
              "emitFreeTrafficUpdate",
              "emitFreeTrafficUpdate"
            );
            window.ksBridge.emitFreeTrafficUpdate({
              complete: (res) => {
                console.log(res);
              },
            });
            console.log('调用快手激活')
          } else {
            this.$toast.fail('激活失败')
          }
        }
      } else {
        this.$toast.fail('激活入参错误！')
      }
    },
    //B站免流激活
    biliJihuo () {
      let userid = localStorage.getItem('userid')
      if (userid) {
        this.postUserid({
          eventName: "onActive",
          userid: userid
        });
      }
    },
    postUserid (data) {
      if (data.eventName === "onOK") {
        window.parent.postMessage({
          type: "onOK"
        }, "*");
        console.log(window.parent)
      } else {
        changeUseridToBsite({
          userid: data.userid,
        }).then((res) => {
          console.log('转b站userid:' + res.code)
          window.parent.postMessage({
            type: data.eventName,
            data: {
              eventName: data.eventName,
              userid: res.data
            },
            callbackId: `${data.eventName}Callback`,
          },
            "*"
          );
          console.log(data.eventName)
        });
      }
    },
    // 腾讯视频免流激活
    async tencentJihuo () {
      console.log('调用激活')
      let res = await this.useridCode();
      console.log(res)
      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) => {
          console.log('jsonp:', data)
          let params = data;
          QQVideoBridge.saveResult("saveSubscriptionStatus", params).done(
            (result) => {
              console.log('qq激活:', result)
              let res = JSON.parse(result);
              if (res.errcode === 0) {
                Toast.success("激活成功");
              } else {
                Toast.fail("激活失败");
              }
            }
          );
        },
        "test"
      );
    },
    useridCode () {
      console.log('转换手机号')
      let cpid = "tencent";
      let userid = localStorage.getItem('userid')
      return changeUserid({
        cpid,
        userid
      });
    },
    myJsonp (url, callback, callbackname) {
      console.log('创建外部jsonp')
      window[callbackname] = callback;
      let script = document.createElement("script");
      script.src = url;
      script.type = "text/javascript";
      document.head.appendChild(script);
    },
    //创建引入外部js
    createJs () {
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.src =
        "https://static.yximgs.com/udata/pkg/fe/ks-bridge.1.0.17.min.58d27a53.js";
      document.body.appendChild(script);

    }
  }
}
</script>

<style lang="scss" scoped>
.jihuoIndex {
  width: 100vw;
  height: 100vh;
  background-color: #ffe99c;
  .banner {
    width: 100%;
    height: 474px;
    background-image: url("./img/banner.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .buyBoxText {
    width: 690px;
    margin: 0 auto;
    margin-top: -80px;
    background-color: #fff;
    height: 462px;
    border-radius: 40px;
    padding-top: 30px;
    box-sizing: border-box;

    .btn {
      margin: 0 auto;
      margin-top: 60px;
      width: 618px;
      height: 90px;
      border-radius: 554px;
      line-height: 90px;
      font-size: 36px;
      font-weight: 700;
      // font-weight: bold;
      border-style: solid;
      border-width: 4px;
      color: #ffffff;
      text-align: center;
      background: #f19305;
    }

    .textBox {
      // width: 750px;
      padding: 0 50px;
      box-sizing: border-box;
      .input {
        height: 117px;
        margin: 0 auto;
        border-bottom: 2px solid #595959;
        position: relative;

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

        .getcode {
          font-size: 32px;
          font-family: PingFang SC;
          font-weight: 700;
          color: #f19305;
          position: absolute;
          right: 20px;
          bottom: 24px;
        }
      }
    }

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

      span {
        color: #ea1313;
        font-weight: bold;
      }
    }
  }
  .mainBox {
    width: 690px;
    margin: 32px auto;
    background-color: #fff;
    min-height: 544px;
    border-radius: 40px;
    padding: 46px 56px 72px 56px;
    box-sizing: border-box;
    .title {
      width: 160px;
      height: 60px;
      margin: 0 auto;
      position: relative;
      .text {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 34px;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        color: #222222;
        position: absolute;
        z-index: 1;
      }
      .bot {
        width: 100%;
        height: 18px;
        background-color: #f19305;
        position: absolute;
        bottom: 12px;
        z-index: 0;
      }
    }
    .main {
      width: 100%;
      color: #767676;
      font-size: 20px;
      font-family: PingFang SC, PingFang SC-Regular;
      p {
        line-height: 36px;
      }
    }
  }
}
</style>