<template>
  <div class="xinJiang210630" id="temp">
    <div v-if="banners[0]" :style="{ backgroundImage: `url(${imgUrl}${banners})` }" class="header-banner bg-cover">
      <!-- 轮播条 -->
      <van-notice-bar v-show="showScroll" scrollable :text="pageData.remarks.zoetropeText" />
    </div>
    <!--主体-->
    <div class="content">
      <!--订购窗-->
      <div class="box">
        <div class="title">{{ pageData.mainProduct.originalPrice }}元/月</div>
        <div class="spName">{{ pageData.mainProduct.remark }}</div>
        <div class="spBtn" v-if="pageData.remarks.isBuy === '1'" @click="btnClick">
          {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
        </div>
        <div class="privacyBox">
          <van-checkbox v-model="checked" checked-color="#fc8940">
            <p style="margin: 0; padding: 0">
              <span style="color: #dedede">我已阅读并同意</span>
            </p>
          </van-checkbox>
          <span class="span" style="color: #fc8940" @click="showAgreeMent = true">《隐私声明》</span>
        </div>

      </div>
      <div class="box box2" v-if="pageData.mainProduct.manualInfo!==null && pageData.mainProduct.manualInfo!==''">
        <div class="box-main" v-html="pageData.mainProduct.manualInfo"></div>
      </div>
      <!--详情-->
      <div class="infoBtn"
        @click="$router.push({ path: '/manual002' ,query:{text:pageData.mainProduct.orderingInfo,cpid:pageData.mainProduct.cpid}})">
        产品详情
      </div>
      <!--图窗1-->
      <div class="box">
        <div class="banTitle">15G专属流量</div>
        <div class="fstImg">
          <img :src="imgUrl + pageData.mainProduct.logoPic" alt="" />
        </div>
      </div>
      <!--图窗2-->
      <div class="box">
        <div class="banTitle">热门会员30+选1</div>
        <div class="secImg">
          <img :src="imgUrl + pageData.mainProduct.guidancePic.p" alt="" />
        </div>
      </div>
      <!--底部导航-->
      <div class="btnbox">
        <div class="tabBox" v-if="pageData.remarks.chaxunBtn === '1'" @click="beforeLogin('query')">
          <div class="img">
            <img src="../assets/guanzhuNew.png" alt="" />
          </div>
          <div>剩余流量查询</div>
        </div>
        <div class="tabBox" v-if="pageData.remarks.memberBtn === '1'" @click="beforeLogin('member')">
          <div class="img">
            <img src="../assets/huiyuanNew.png" alt="" />
          </div>
          <div>领取会员</div>
        </div>
        <div class="tabBox" v-if="pageData.remarks.tuidingBtn === '1'" @click="beforeLogin('unBuy')">
          <div class="img">
            <img src="../assets/tuidingNew.png" alt="" />
          </div>
          <div>退订产品</div>
        </div>
      </div>
    </div>
    <!-- 剩余流量查询 -->
    <account-modal v-model="showQr"></account-modal>
    <!-- 退订弹框组件 -->
    <unbuy-modal v-model="showUnbuy" :pageData="pageData" @childData="getChildData"></unbuy-modal>
    <!-- 订购超时 -->
    <timeout-modal v-model="showTimeout"></timeout-modal>
    <!-- 遮罩 -->
    <newZheZhao v-if="showZhezhao" isZheZhao="1"></newZheZhao>
    <!-- 退订挽留 -->
    <van-overlay :show="unBuyDrainage" :duration="0.1" @click="unBuyDrainage = false"
      pageData.strategyInfo.unsubscribeStrategyList.length>0 > 0 >
      <div class="other-modal modal" @click.stop>
        <img src="../../assets/img/close.png" class="close" @click="unBuyDrainage = false" />
        <div class="text-box">确定要放弃本服务吗?</div>
        <div class="text-box">
          {{ unBuyDrainageText }}
        </div>
        <div class="text-box">不要错过！</div>
        <div class="btn-box">
          <div class="btn left" @click="unBuySure">确定</div>
          <div class="btn right" @click="recommend(pageData.strategyInfo.unsubscribeStrategyList[0])">
            去看看
          </div>
        </div>
      </div>
    </van-overlay>
    <conceal v-model="showAgreeMent"></conceal>
    <!-- 重复订购引流 -->
    <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
  </div>
</template>

<script>
  import mixinNew from "../../common/mixinNew";
  import addR from "../../common/addRecord";
  import accountModal from "../../components/gongZongHao.vue";
  import unbuyModal from "../../components/unbuyModal.vue";
  import newZheZhao from "../../components/newZheZhao.vue";
  import timeoutModal from "../../components/timeoutModal.vue";
  import repeatModal from "../../components/repeatModal.vue";
  import {
    strategyGetID,
    detMainProduct,
    seniorStrategy
  } from "../../api";
  import conceal from "../../components/conceal.vue";

  export default {
    name: "index",
    mixins: [mixinNew],
    components: {
      accountModal,
      unbuyModal,
      newZheZhao,
      timeoutModal,
      conceal,
      repeatModal
    },
    data() {
      return {
        imgUrl: process.env.VUE_APP_IMGS_URL,
        banners: [],
        showQr: false,
        showScroll: false,
        showUnbuy: false,
        unBuyDrainage: false,
        unBuyDrainageText: "",
        // 隐私声明
        showAgreeMent: false,
        checked: false,
        repeatShow: false
      };
    },
    created() {
      document.title = this.pageData.mainProduct.productName;
      this.banners = this.pageData.mainProduct.bannerPics[0];
      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 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();
        }
      },
      async beforeLogin(type) {
        if (type === "member") {
          addR.memberClick();
          setTimeout(() => {
            window.location.href = "https://cs.mige.tv/H";
          }, 200);
        } else if (type === "query") {
          addR.clickFollow();
          this.showQr = true;
        } else if (type === "unBuy") {
          addR.unBuyClick();
          if (
            this.pageData.strategyInfo.unsubscribeStrategyList !== null &&
            this.pageData.strategyInfo.unsubscribeStrategyList.length > 0
          ) {
            let productId = await strategyGetID({
              id: this.pageData.strategyInfo.unsubscribeStrategyList[0],
            });
            let drainageRes = await detMainProduct({
              productId: productId.data.primaryProductId,
            });
            this.unBuyDrainageText = drainageRes.data.productName;
            this.unBuyDrainage = true;
          } else {
            this.showUnbuy = 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
            });
            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;
      },
      // 点击确定
      unBuySure() {
        addR.clickUnsubscribe();
        this.unBuyDrainage = false;
        this.showUnbuy = true;
      },
      getChildData(data) {
        this.isBuy = data;
      },
    },
  };
</script>

<style lang="scss">
  .xinJiang210630 {
    background-color: #1d1616;
    min-height: 100vh;

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

    .header-banner {
      width: 750px;
      height: 498px;
      position: absolute;
      left: 0;
      top: 0;
    }

    .bg-cover {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50%;
    }

    .content {
      font-family: PingFang SC;
      font-size: 38px;
      padding: 381px 60px 62px;
      position: relative;


      .box {
        margin-top: 84px;
        width: 630px;
        min-height: 330px;
        background: #322c2c;
        border: 2px solid #efd3b8;
        box-shadow: 0px 0px 16px 0px rgba(229, 229, 229, 0.67);
        border-radius: 20px;
        position: relative;


        //padding: 84px 35px 42px 34px;
        .title {
          color: #1f1819;
          font-weight: 600;
          font-size: 42px;
          position: absolute;
          top: -25px;
          left: 104px;
          margin: 0 auto;
          background: url("../assets/tag.png");
          width: 420px;
          height: 80px;
          background-size: 100%;
          text-align: center;
          line-height: 80px;
        }

        .spName {
          text-align: center;
          margin: 99px auto 0px;
          height: 37px;
          font-size: 38px;
          font-weight: bold;
          color: #ffecd9;
          line-height: 36px;
        }

        .spBtn {
          width: 424px;
          height: 76.8px;
          background: linear-gradient(90deg, #e0945b 0%, #ecc1a1 100%);
          border-radius: 48px;
          font-size: 40px;
          font-weight: bold;
          color: #1b1414;
          line-height: 76.8px;
          text-align: center;
          margin: 54px auto 0px;
          animation-name: scale;
          animation-duration: 0.6s;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          animation-direction: alternate-reverse;
        }

        .banTitle {
          width: 530px;
          height: 88px;
          font-size: 38px;
          font-weight: 600;
          color: #efd3b8;
          line-height: 88px;
          background: url("../assets/LLtitle.png");
          background-size: cover;
          position: absolute;
          top: -44px;
          left: 50px;
          text-align: center;
        }

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

          to {
            transform: scale(1.2);
          }
        }

        .fstImg {
          padding: 84px 35px 40px;

          img {
            width: 559px;
            height: 240px;
          }
        }

        .secImg {
          padding: 84px 35px 40px;

          img {
            width: 559px;
            height: 452px;
          }
        }
      }

      .box2 {
        max-height: 450px;
        margin-top: 41px;
        overflow-y: scroll;
        padding: 40px 50px;
        box-sizing: border-box;

        .box-main {
          word-break: break-all;

          h2,
          h1 {
            /*height: 34px;*/
            font-size: 36px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFECD9;
            text-align: center;
            margin: 0;
            padding: 0;
            margin-bottom: 18px;
          }

          p {
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 300;
            color: #EFD3B8 !important;
            margin: 0;
          }
        }
      }

      .infoBtn {
        margin-top: 40px;
        font-size: 36px;
        font-weight: bold;
        text-decoration: underline;
        color: #ffecd9;
        line-height: 36px;
        text-align: center;
      }

      .btnbox {
        margin-top: 38px;
        background: #322c2c;
        border: 1px solid #fad0a7;
        box-shadow: 0px 0px 16px 0px rgba(229, 229, 229, 0.67);
        border-radius: 20px;
        padding: 40px;
        display: flex;
        justify-content: space-between;

        .tabBox {
          width: 171px;
          line-height: 40px;
          font-size: 26px;
          text-align: center;
          color: #ffecda;

          .img {
            padding: 0 50px;

            img {
              width: 70px;
              height: 70px;
            }
          }
        }
      }
    }

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

    .other-modal {
      top: 366px;
      padding: 60px 65px;

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

        .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: #222222;

          &.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 {
          border: 2px #fdc51b solid;
          color: #fdc51b;
          background-color: #ffffff;
        }

        .right {
          color: #0d0d0d;
          background: #fdc51b;
        }
      }

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

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

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

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

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

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

    .privacyBox {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin: 20px 0;
      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>