<template>
  <div class="ksNew my-template" id="temp">
    <img :src="imgUrl + pageData.mainProduct.bannerPics[0]" class="banner" @click="bannerClick" alt="" />
    <!--    <div class="calculate">-->
    <!--      已有<span style="color: #ff5e00">{{ times }}</span> 个用户抢购成功-->
    <!--    </div>-->
    <!-- 隐私声明 -->
    <div class="privacyBox">
      <van-checkbox v-model="checked" checked-color="#fc8940">我已阅读并同意</van-checkbox>
      <span class="span" style="color: #fc8940" @click="showAgreeMent = true">《隐私声明》</span>
    </div>

    <div v-if="pageData.remarks.isBuy === '1' && isBuy !== '已订购'" class="receive-btn bg-cover" @click="btnClick">
      {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
    </div>
    <div class="manual">
      <span class="hint" v-if="pageData.recommend !== null && pageData.recommend.length > 0"
        @click="recommend(pageData.recommend[0].id)">领取{{ recommendName }}</span>
      <span class="hint"
        @click="$router.push({ path: '/manual001' ,query:{img:pageData.mainProduct.guidancePic.p}})">流量激活指引</span>
    </div>
    <div v-if="user.userid" class="userPhone">
      {{ user.phone | formatPhone }}
      <span>({{ isBuy }})</span>
    </div>
    <div class="explain-title">使用说明</div>
    <div class="explain" v-html="pageData.mainProduct.orderingInfo"></div>
    <div class="explain-title">流量使用说明（含快手极速版）</div>
    <div class="explain" v-html="pageData.mainProduct.givePhoneInfo"></div>
    <div class="btns">
      <div v-if="pageData.remarks.jiluBtn === '1'" @click="beforeLogin('manual')">
        订购记录
      </div>
      <div v-if="pageData.remarks.tuidingBtn === '1'" @click="beforeLogin('unBUy')">
        退订产品
      </div>
      <div v-if="pageData.remarks.chaxunBtn === '1'" @click="chaxun">
        剩余流量查询
      </div>
      <div @click="onGo('ks210702-question')">常见问题</div>
    </div>
    <div class="help" @click="showHelp = true">
      <img src="./assets/edit.png" alt="" />求助
    </div>
    <div class="company">联通在线信息科技有限公司</div>
    <!-- 剩余流量查询 -->
    <account-modal v-model="showQr"></account-modal>
    <van-overlay :show="showDetainer" @click.stop="">
      <div class="modal-detainer modal2">
        <div class="box">
          <div class="title">确定要放弃本服务吗？</div>
          <div class="recommend">限时优惠，不要错过!</div>
          <div class="btn-box">
            <div class="btn confirm" @click="unBuySure">确定</div>
            <div class="btn switch" @click="
                recommend(pageData.strategyInfo.unsubscribeStrategyList[0])
              ">
              去看看
            </div>
          </div>
        </div>
        <img src="./assets/close.png" alt="" class="close" @click="showDetainer = false" />
      </div>
    </van-overlay>
    <!-- 登录弹框组件 -->
    <login-modal v-model="showLogin" :type="type" @getIsBuy="getIsBuy"></login-modal>
    <!-- 退订弹框组件 -->
    <unbuy-modal v-model="showUnbuy" :pageData="pageData" @childData="getChildData"></unbuy-modal>
    <!-- 遮罩 -->
    <newZheZhao v-if="showZhezhao" isZheZhao="1"></newZheZhao>
    <timeout-modal v-model="showTimeout"></timeout-modal>
    <help-modal v-model="showHelp"></help-modal>
    <!-- 轮播条 -->
    <van-notice-bar v-show="showScroll" scrollable :text="pageData.remarks.zoetropeText" />
    <!-- 快手隐私声明 -->
    <agreeMent v-model="showAgreeMent"></agreeMent>
    <!-- 重复订购引流 -->
    <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
  </div>
</template>
<script>
  import {
    orderList,
    strategyGetID,
    detMainProduct,
    seniorStrategy,
  } from "../../api";
  import mixinTreatyNew from "../../common/mixinTreatyNew";
  import helpModal from "../../components/helpModal.vue";
  import loginModal from "../../components/login.vue";
  import newZheZhao from "../../components/newZheZhao.vue";
  import unbuyModal from "../../components/unbuyModal.vue";
  import timeoutModal from "../../components/timeoutModal.vue";
  import accountModal from "../../components/gongZongHao.vue";
  import addR from "../../common/addRecord";
  import agreeMent from "../../components/agreeMent.vue";
  import repeatModal from "../../components/repeatModal.vue";
  export default {
    mixins: [mixinTreatyNew],
    data() {
      return {
        imgUrl: process.env.VUE_APP_IMGS_URL,
        times: 0,
        loginBtn: "登录",
        loginType: "订购记录",
        showLogin: false,
        showUnbuy: false,
        showQr: false,
        showHelp: false,
        showDetainer: false,
        receiveState: false,
        showPuzzle: false,
        switchStatus: false,
        showZhezhao: false,
        showScroll: false,
        ks: "ksForm",
        isBuy: "已订购",
        type: "",
        recommendName: "",
        showAgreeMent: false,
        checked: true,
        repeatShow: false
      };
    },
    filters: {
      formatPhone: (phone) => {
        phone = phone.toString();
        return phone.substr(0, 3) + "****" + phone.substr(7, 11);
      },
    },
    async created() {
      let head = document.getElementsByTagName("head")[0];
      let script = document.createElement("script");
      script.innerHTML = `
    (function (root) {
      var ksscript = document.createElement('script');
      ksscript.setAttribute('charset', 'utf-8');
      ksscript.src = 'https://tx2.a.kwimgs.com/udata/pkg/ks-ad-trace-sdk/ks-trace.3.2.0.min.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ksscript, s);
    })(window);`;
      head.appendChild(script);
      document.title = this.pageData.mainProduct.remark;
      if (
        this.pageData.recommend !== null &&
        this.pageData.recommend.length > 0
      ) {
        let info = await detMainProduct({
          productId: this.pageData.recommend[0].primaryProductId,
        });
        this.recommendName = info.data.remark;
      }
      if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks.privacy !==
        null) {
        if (this.pageData.remarks.privacy === '1') {
          this.checked = true
        }
      }
    },

    mounted() {
      addR.showSP();
        let now = new Date().getTime();
        let times = (now - 1622476800000) / 180000;
        this.times = String(Math.ceil(times * 2));
      if (this.user.userid) {
        this.getIsBuy();
      } else {
        this.isBuy = "未订购";
      }
      let newTime = new Date();
      let d = newTime.getDate();
      if (31 >= d && d >= 25 && this.pageData.remarks.isZoetrope === "1") {
        this.showScroll = true;
      }
    },
    methods: {
      btnClick() {
        if (this.checked === false) {
          this.$toast.fail("请先勾选隐私声明");
        } else {
          this.openIframe();
        }
      },
      bannerClick() {
        addR.clickBanner();
        if (this.isBuy !== "已订购" && this.pageData.remarks.isBuy !== 1) {
          if (this.checked === false) {
            this.$toast.fail("请勾选隐私声明");
          } else {
            this.openIframe();
          }
        }
      },
      chaxun() {
        addR.clickFollow();
        this.showQr = true;
      },
      async beforeLogin(type) {
        this.type = type;
        if (this.user.userid) {
          if (type === "manual") {
            addR.clickOrderRecord();
            let url = "/order001";
            this.$router.push({
              path: url
            });
          }
          if (type === "unBUy") {
            addR.unBuyClick();
            if (
              this.pageData.strategyInfo.unsubscribeStrategyList !== null &&
              this.pageData.strategyInfo.unsubscribeStrategyList.length > 0
            ) {
              this.showDetainer = true;
            } else {
              this.showUnbuy = true;
            }
          }
        } else if (type === "unBUy") {
          addR.unBuyClick();
          if (
            this.pageData.strategyInfo.unsubscribeStrategyList !== null &&
            this.pageData.strategyInfo.unsubscribeStrategyList.length > 0
          ) {
            this.showDetainer = true;
          } else {
            this.showUnbuy = true;
          }
        } else {
          addR.loginClick();
          this.showLogin = true;
        }
      },
      // 推荐产品跳转
      recommend(val) {
        this.$store.commit("setTempName", "loading");
        strategyGetID({
          id: val
        }).then(async (res) => {
          if (res.data.strategyStatus === 1) {
            let data = res.data;
            let info = await detMainProduct({
              productId: data.primaryProductId
            });
            if (this.user.userid) {
              this.getIsBuy();
            }
            let recommend = [];
            if (
              data.recommendStrategyList !== null &&
              data.recommendStrategyList.length > 0
            ) {
              for (let i = 0; i < data.recommendStrategyList.length; i++) {
                let list = await strategyGetID({
                  id: data.recommendStrategyList[i],
                });
                recommend.push(list.data);
              }
            }
            let pageData = {
              mainProduct: info.data,
              strategyInfo: data,
              remarks: data.extJson,
              channl: {
                channelKey: localStorage.getItem("key"),
              },
              recommend: recommend,
            };
            let params = {
              anonymousId: this.$sensors.store._state.$device_id,
              channleKey: localStorage.getItem("key"),
              spId: info.data.spid,
              userId: this.user.userid,
            };
            let item = await seniorStrategy(params);
            if (item.data !== null) {
              // 判断高级策略是否开启遮罩
              if (item.data.enableMask !== null) {
                pageData.remarks.isMask = String(item.data.enableMask);
                // 判断高级策略是否有遮罩文案 并替换
                if (item.data.maskText !== null && item.data.maskText !== "") {
                  pageData.remarks.maskText = item.data.maskText;
                }
              }
              // 判断高级策略是否开启有推荐
              if (
                item.data.recommendStrategy !== "" &&
                item.data.recommendStrategy !== null
              ) {
                let itemList = item.data.recommendStrategy.split(",");
                pageData.recommend = [];
                itemList.forEach((v) => {
                  strategyGetID({
                    id: v,
                  }).then((resp) => {
                    pageData.recommend.push(resp.data);
                  });
                });
              }
              if (item.data.cancelRule !== "" && item.data.cancelRule !== null) {
                pageData.strategyInfo.unsubscribeStrategyList =
                  item.data.cancelRule.split(",");
              }
              if (item.data.interceptRule === "1") {
                pageData.interceptRule = item.data.interceptRule;
              }
              if (item.data.location !== "" && item.data.location !== null) {
                pageData.location = item.data.location.split(",");
              }
            }
            document.title = pageData.mainProduct.productName;
            this.$store.commit("setPageData", pageData);
            this.$store.commit("setTempName", data.templateCode);
            if (item.data !== null) {
              if (
                item.data.templateName !== "" &&
                item.data.templateName !== null
              ) {
                this.$store.commit("setTempName", item.data.templateName);
              }
            }
          } else {
            this.$toast.fail("当前策略未生效");
          }
        });
        this.unBuyDrainage = false;
      },
      // 获取产品订购状态
      getIsBuy() {
        window.ksBridge.register(
          "emitFreeTrafficUpdate",
          "emitFreeTrafficUpdate"
        );
        window.ksBridge.emitFreeTrafficUpdate({
          complete: (res) => {
            console.log(res);
          },
        });
        orderList({
          userid: this.user.userid,
          cpid: this.param.cpid,
          spid: this.param.spid,
        }).then((res) => {
          let data = res.data;
          if (data.length === 0) {
            this.isBuy = "未订购";
          } else {
            for (let i = 0; i < data.length; i++) {
              if (data[i].STATUS === "0") {
                this.isBuy = "已订购";
              } else {
                this.isBuy = "已退订";
              }
            }
          }
        });
      },
      onGo(path) {
        this.$router.push(path);
      },
      // 点击确定
      unBuySure() {
        addR.clickUnsubscribe();
        this.showDetainer = false;
        this.showUnbuy = true;
      },
      getChildData(data) {
        this.isBuy = data;
      },
      // 点击退订
      unBuyClick() {
        addR.unBuyClick();
        this.showDetainer = true;
      },
    },
    components: {
      helpModal,
      timeoutModal,
      newZheZhao,
      unbuyModal,
      loginModal,
      accountModal,
      agreeMent,
      repeatModal
    },
  };
</script>
<style lang="scss">
  .ksNew {
    background-color: #fff;

    .banner {
      display: block;
      width: 750px;
      height: 840px;
    }

    .calculate {
      text-align: center;
      padding: 20px 0 0 0;
    }

    .receive-btn {
      box-sizing: border-box;
      margin: 0 auto;
      width: 710px;
      height: 120px;
      background-image: url(./assets/bt.png);
      font-size: 48px;
      text-align: center;
      padding-top: 26px;
      font-weight: 800;
      color: #ffffff;
      @include common-scale;
    }

    .manual {
      display: flex;
      justify-content: space-between;
      padding: 38px 60px;
      font-size: 32px;

      .hint {
        font-weight: bold;
        text-decoration: underline;
        color: #ff3d00;
      }
    }

    .userPhone {
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #222222;
      box-sizing: border-box;
      padding-left: 62px;
      padding-bottom: 37px;
    }

    .iframe {
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 999;
    }

    .explain-title {
      font-size: 42px;
      line-height: 1;
      font-weight: bold;
      color: #222222;
      padding: 0 60px;
    }

    .explain {
      margin: 30px 60px 60px;
      max-height: 400px;
      overflow-y: auto;
      font-size: 26px;
      line-height: 48px;
      color: #666;

      p {
        margin: 0;

        strong {
          font-size: 30px;
          color: #222222;
        }
      }
    }

    .btns {
      padding: 20px 60px 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24px;
      text-decoration: underline;
      color: #d6000f;
    }

    .modal-qr {
      box-sizing: border-box;
      position: absolute;
      left: 50%;
      top: 333px;
      transform: translateX(-50%);
      width: 530px;
      background-color: #fff;
      border-radius: 10px;

      .qr {
        width: 294px;
        height: 294px;
        display: block;
        margin: 85px auto 0;
      }

      .text {
        margin: 28px 0 77px;
        text-align: center;
        font-size: 32px;
        line-height: 50px;
        font-weight: bold;
        color: #222222;
      }
    }

    .modal2 {
      box-sizing: border-box;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-image: url(./assets/modal-bg.png);
      background-size: 100% auto;
      background-position: center top;
      background-repeat: no-repeat;
      background-color: #fff;
      border-radius: 8px;
      padding: 110px 0 32px;
      width: 630px;

      .box {
        width: 590px;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 60px 40px;
        background-color: #fff;
        box-shadow: 0 0 20px 0 rgba(148, 55, 27, 0.3);
      }
    }

    .unbuy-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;
            }
          }
        }

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

      .btn {
        margin-top: 40px;
        height: 80px;
        line-height: 80px;
        background: #fdc51b;
        border-radius: 40px;
        font-size: 34px;
        font-weight: bold;
        color: #0d0d0d;
        text-align: center;
      }
    }

    .help {
      position: fixed;
      bottom: 230px;
      right: 0;
      width: 128px;
      height: 80px;
      border-radius: 40px 0 0 40px;
      box-sizing: border-box;
      padding-right: 15px;
      background-color: rgba(0, 0, 0, 0.7);
      font-size: 28px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: #ffffff;

      img {
        display: block;
        width: 30px;
        height: 30px;
        margin-right: 5px;
        position: relative;
        top: -2px;
      }
    }

    .modal-detainer {
      .close {
        position: absolute;
        top: 30px;
        right: 20px;
        width: 45px;
        height: 45px;
      }

      .title {
        line-height: 42px;
        margin: 32px 0;
        font-size: 38px;
        text-align: center;
      }

      .recommend {
        font-size: 32px;
        line-height: 40px;
        text-align: center;
      }

      .btn-box {
        margin-top: 60px;
        display: flex;
        justify-content: space-between;

        .btn {
          width: 230px;
          height: 80px;
          line-height: 80px;
          text-align: center;
          font-size: 34px;
          border-radius: 5px;
        }

        .confirm {
          border: 2px solid #dadada;
          color: #9d9d9d;
        }

        .switch {
          color: #ffffff;
          background-color: #d6000f;
        }
      }
    }

    .company {
      text-align: center;
      line-height: 80px;
      padding-bottom: 20px;
      color: #9d9d9d;
      font-size: 20px;
    }

    .van-notice-bar {
      background-color: transparent;
      padding: 0 0;
      color: #000;

      .van-notice-bar__wrap {
        margin-top: -43rem;
      }

      .van-notice-bar__content {
        background-color: #fff;
        padding: 10px 30px;
        border-radius: 30px;
        opacity: 0.7;
      }
    }


    .van-icon {
      background-color: #f6f6f6;
      // border: 0 !important;
      transform: scale(0.75, 0.75);
      border-color: #fc8940;
    }

    .van-checkbox__label {
      margin-left: 5px;
    }

    .privacyBox {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin-top: 20px;
      font-size: 22px;

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

      .span {
        flex: 1;
        display: flex;
        align-items: center;
      }
    }
  }
</style>
