<template>
  <div class="xinjiang" id="temp">
    <div v-if="banners[0]" :style="{ backgroundImage: `url(${imgUrl}${banners})` }" class="header-banner bg-cover">
      <!-- 轮播条 -->
    </div>
    <!--主体-->
    <div class="content">
      <!--订购窗-->
      <div class="box" v-if="pageData.remarks.isBuy === '1'">
        <div class="title">{{ pageData.mainProduct.originalPrice }}元/月</div>
        <div class="spName">{{ pageData.mainProduct.remark }}</div>
        <div class="spBtn" @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.guidancePic.p" alt="" />
        </div>
      </div>
      <!--图窗2-->
      <div class="box">
        <div class="banTitle">热门会员多选1</div>
        <div class="secImg">
          <img :src="imgUrl + pageData.mainProduct.guidancePic.c" alt="" />
        </div>
      </div>
      <!--底部导航-->
      <div class="btnbox">
        <div class="tabBox" v-for="(item, index) in tabArr" :key="index" @click="tabClick(item)">
          <div class="img">
            <img :src="item.icon" alt="" />
          </div>
          <div>{{ item.tabName }}</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" :indexNum="indexNum"></newZheZhao>
    <!-- 退订挽留 -->
    <van-overlay :show="unBuyDrainage" :duration="0.1" @click="unBuyDrainage = false">
      <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>
    <!-- 订购成功提示  -->
    <handel-modal v-model="handelShow" @jihuo="jihuoChange"></handel-modal>
    <!-- 退出挽留 -->
    <exit-modal v-model="exitShow" />
    <!-- 会员弹框 -->
    <member-modal v-model="memberShow" />
    <!-- 会员二维码弹框 -->
    <member-code v-model="memberCode" />
  </div>
</template>

<script>
import common from "../../common/common";
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 handelModal from "../../componentsNew/handelModal.vue";
import MgtvApi from "@/util/mgTvJssdk.js";
import wx from "weixin-js-sdk";
import {
  detMainProduct,
  strategytemplate
} from "../../api";
import conceal from "../../components/hideModal.vue";

export default {
  mixins: [common],
  components: {
    accountModal,
    unbuyModal,
    newZheZhao,
    timeoutModal,
    conceal,
    repeatModal,
    handelModal
  },
  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,
      isApplet: false,
      isBuy: "未订购",
      tabArr: [],
      phone: "",
      handelShow: 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
      }
    }
    if (this.pageData.remarks.tabArr && this.pageData.remarks.tabArr.length > 0) {
      this.tabArr = this.pageData.remarks.tabArr
      let arr = []
      this.tabArr.forEach(val => {
        if (val.tabName == '会员领取') {
          let obj = {}
          obj.tabName = val.tabName
          obj.tabUrlBasics = val.tabUrlBasics
          obj.tabUrlApplet = val.tabUrlApplet
          obj.icon = require("../assets/huiyuanNew.png")
          arr.push(obj)
        }
        if (val.tabName == '剩余流量查询') {
          let obj = {}
          obj.tabName = val.tabName
          obj.tabUrlBasics = val.tabUrlBasics
          obj.tabUrlApplet = val.tabUrlApplet
          obj.icon = require("../assets/guanzhuNew.png")
          arr.push(obj)
        }
        if (val.tabName == '退订产品') {
          let obj = {}
          obj.tabName = val.tabName
          obj.tabUrlBasics = val.tabUrlBasics
          obj.tabUrlApplet = val.tabUrlApplet
          obj.icon = require("../assets/tuidingNew.png")
          arr.push(obj)
        }
      })
      this.tabArr = arr
    } else {
      if (this.pageData.remarks.memberBtn == '1') {
        let obj = {}
        obj.tabUrlBasics = ""
        obj.tabUrlApplet = ""
        obj.icon = require("../assets/guanzhuNew.png")
        obj.tabName = '剩余流量查询'
        this.tabArr.push(obj)
      }
      if (this.pageData.remarks.memberBtn == '1') {
        let obj = {}
        obj.tabUrlBasics = ""
        obj.tabUrlApplet = ""
        obj.icon = require("../assets/huiyuanNew.png")
        obj.tabName = '会员领取'
        this.tabArr.push(obj)
      }
      if (this.pageData.remarks.tuidingBtn == '1') {
        let obj = {}
        obj.tabUrlBasics = ""
        obj.tabUrlApplet = ""
        obj.icon = require("../assets/tuidingNew.png")
        obj.tabName = '退订产品'
        this.tabArr.push(obj)
      }
    }
  },
  mounted () {
    addR.showSP();
    wx.miniProgram.getEnv(res => {
      this.isApplet = res.miniprogram
    })
  },
  methods: {
    btnClick () {
      if (this.checked === false) {
        this.$toast.fail("请先勾选隐私声明");
      } else {
        this.openIframe();
      }
    },
    async beforeLogin (type) {
      if (type === "member") {
        addR.memberClick();
        if (this.isApplet == true) {
          if (this.pageData.mainProduct.cacheSeatOne[0].memberUrl.includes('http')) {
            window.location.href = "https://cs.mige.tv/H"
          } else {
            wx.miniProgram.navigateTo({
              url: this.productJson[0].memberUrl
            })
          }
        } else {
          window.location.href = "https://cs.mige.tv/H"
        }
      } else if (type === "unBUy") {
        addR.unBuyClick();
        if (this.pageData.strategyInfo.unsubscribeStrategyList !== null && this.pageData.strategyInfo.unsubscribeStrategyList.length > 0) {
          let productId = await strategytemplate(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;
        }
      }
    },
    chaxun () {
      addR.clickFollow();
      this.showQr = true;
    },
    // 推荐产品跳转
    recommend (val) {
      strategytemplate(val).then(async res => {
        let info = await detMainProduct({
          productId: res.data.primaryProductId,
        });
        let productJson = JSON.parse(res.data.productJson).product
        let mainProduct = {
          activeType: info.data.activeType,
          bannerPics: [productJson.bannerImg, productJson.jsonImg, productJson.upImg, productJson.topImg,],
          bgColor: [productJson.pageBgcol, '', productJson.orderBgcol, productJson.orderBdcol],
          cacheSeatOne: [{
            dongHua: productJson.drawVal,
            memberUrl: info.data.cacheSeatOne[0].memberUrl,
            proC: {
              e: productJson.hideCol,
              s: productJson.pageTextcol
            },
            productV: productJson.productV,
            rushC: {
              e: productJson.orderTextcol,
              s: productJson.orderNumcol,
            },
            tabC: {
              e: productJson.tabVicecol,
              s: productJson.tabMaincol,
            },
            btnUrl: "",
            relationIds: info.data.cacheSeatOne[0].relationIds ? info.data.cacheSeatOne[0].relationIds : "",
            isTreaty: info.data.cacheSeatOne[0].isTreaty ? info.data.cacheSeatOne[0].isTreaty : "0"
          }],
          cpid: info.data.cpid,
          discountInfo: null,
          flowJumpUrl: info.data.flowJumpUrl,
          givePhoneInfo: info.data.givePhoneInfo,
          guidancePic: {
            c: productJson.orderImg,
            p: productJson.explainImg
          },
          id: res.data.primaryProductId,
          isCompositeProduct: 0,   //是否复合产品
          logoPic: productJson.logoPic,
          manualInfo: info.data.manualInfo,
          memberName: info.data.memberName,
          orderingInfo: info.data.orderingInfo,
          originalPrice: info.data.originalPrice,
          pageTitle: productJson.pageTitle,
          productName: info.data.productName,
          productType: info.data.productType,
          promotionPic: info.data.promotionPic,
          pushJumpUrl: info.data.pushJumpUrl,
          remark: info.data.remark,
          remark1: info.data.remark1,
          remark2: info.data.remark2,
          remark3: productJson.remark3,
          spid: info.data.spid,
          themeColor: [productJson.btnTopcol, productJson.btnBotcol],
        }
        let recommend = [];
        if (res.data.recommendStrategyIds.length > 0 && res.data.recommendStrategyIds) {
          res.data.recommendStrategyIds.forEach(async val => {
            let list = await strategytemplate(val)
            recommend.push(list.data);
          });
        }
        let pageData = {
          mainProduct: mainProduct,
          channl: {
            channelKey: this.pageData.channl.channelKey,
            channelName: this.pageData.channl.channelName,
            fullCode: this.pageData.channl.fullCode,
            edition: this.pageData.channl.edition,
          },
          recommend: recommend,
          remarks: JSON.parse(res.data.extJson), //策略信息
          otherJson: JSON.parse(res.data.otherJson), //备用json
          strategyInfo: res.data
        };
        let title = mainProduct.pageTitle !== '' ? mainProduct.pageTitle : mainProduct.productName
        document.title = title;
        MgtvApi.setWebviewTitle({
          title: title,
        });
        pageData.strategyInfo.recommendStrategyList = res.data.recommendStrategyIds
        pageData.strategyInfo.unsubscribeStrategyList = res.data.unsubscribeStrategyIds
        pageData.strategyInfo.viceProductStrategyList = res.data.viceProductIds
        if (JSON.parse(res.data.productJson).viceProduct) {
          pageData.viceJson = JSON.parse(res.data.productJson).viceProduct
        }
        pageData.mainJson = JSON.parse(res.data.productJson).product
        this.$store.commit("setPageData", pageData);
        this.getIsBuy()
        setTimeout(() => {
          this.callSvg()
        }, 200)
        this.$store.commit('setTempName', res.data.templateCode)
      })
      this.unBuyDrainage = false;
    },
    // 点击确定
    unBuySure () {
      addR.clickUnsubscribe();
      this.unBuyDrainage = false;
      this.showUnbuy = true
    },
    getChildData (data) {
      this.isBuy = data;
    },
    // 调用svg动画
    callSvg () {
      let lottieBox = document.getElementById('lottie_box')
      lottieBox.innerHTML = ''
      if (this.pageData.mainProduct.bannerPics[1] && this.pageData.mainProduct.bannerPics[1] !== '') {
        this.lottie = lottie.loadAnimation({
          container: lottieBox,
          renderer: 'svg',
          loop: true,
          autoplay: true,
          path: this.imgUrl + this.pageData.mainProduct.bannerPics[1]
        })
      }
    }
  },
};
</script>

<style lang="scss">
.xinjiang {
  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: auto;
        }
      }

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

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

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