<template>
  <div class="templateColorNew" id="temp" :style="{ 'backgroundColor': pageData.mainJson.pageBgcol }">
    <div class="bannerBox">
      <!-- 底层banner -->
      <img class="banner" v-if="pageData.mainJson.bannerImg" :class="pageData.mainJson.dongHua == '1' ? 'cartoon1' : ''
        " :src="imgUrl + pageData.mainJson.bannerImg" alt="" />
      <!-- json动图 -->
      <div class="svgBanner">
        <div id="lottie_box"></div>
      </div>
      <!-- 上层png -->
      <div class="banner2" :class="pageData.mainJson.dongHua == '1' ? 'cartoon2' : ''"
        v-if="pageData.mainJson.upImg !== ''">
        <img :src="imgUrl + pageData.mainJson.upImg" alt="" />
      </div>
      <!-- 顶层png/gif -->
      <div class="banner2" v-if="pageData.mainJson.topImg !== ''">
        <img :src="imgUrl + pageData.mainJson.topImg" alt="" />
      </div>
      <img @click.stop class="activity"
        v-if="pageData.strategyInfo.activityType !== 0 && pageData.strategyInfo.activityLogo"
        :src="`${pageData.strategyInfo.activityLogo}`" @click="onGoLink()" />
      <div class="extend" v-if="pageData.remarks.extendImg">
        <img :src="pageData.remarks.extendImg" alt="" />
      </div>
      <div class="rule" @click="ruleClick">
        产品说明
      </div>
    </div>
    <div class="orderBox"
      :style="{ 'background': pageData.mainJson.orderBgcol, 'borderColor': pageData.mainProduct.bgColor[3] }">
      <div class="orderTitle" v-if="pageData.mainJson.explainTitle !== ''">
        <img :src="imgUrl + pageData.mainJson.explainTitle" alt="">
      </div>
      <div class="orderRow">
        <img :src="imgUrl + pageData.mainJson.explainImg" alt="">
      </div>
      <div class="textBox">
        <div class="input">
          <input @focus="inputFocus($event)" @blur="inputBlur" type="text" maxlength="11" placeholder="请输入联通号码"
            v-model="phone" />
        </div>
      </div>
      <div class="buyBtn" v-if="pageData.remarks.isBuy === '1'"
        :class="!pageData.mainJson.btnBorderCol ? '' : 'borderColor'"
        :style="{ 'background-image': `linear-gradient(90deg,${pageData.mainJson.btnTopcol},${pageData.mainJson.btnBotcol})`, 'color': pageData.mainJson.btnTextCol, 'border-color': pageData.mainJson.btnBorderCol }"
        @click="buyBtn">
        {{ pageData.remarks.btnText !== '' ? pageData.remarks.btnText : "立即订购" }}
      </div>
      <div class="privacyBox" v-if="pageData.remarks.isBuy === '1'">
        <van-checkbox v-model="checked" checked-color="#6696FF">
          <div>
            <p style="margin: 0; padding: 0">手机号仅用于开通服务,我已阅读并同意
            </p>
          </div>
        </van-checkbox>
      </div>
      <div class="priacyText" :style="pageData.mainJson.hideCol !== '' ? { 'color': pageData.mainJson.hideCol } : {}">
        <span class="span" @click="showConceal = true">《隐私声明》</span>、
        <span class="span" @click="showRule = true">《产品说明》</span>
      </div>
      <div class="tips" v-if="pageData.remarks.privacyText !== ''"
        :style="pageData.mainJson.pageTextcol !== '' ? { 'color': pageData.mainJson.pageTextcol } : { 'color': '#000' }">
        {{ pageData.remarks.privacyText }}
      </div>
    </div>
    <!-- 说明 -->
    <div class="descbox"
      :style="{ 'background': pageData.mainJson.orderBgcol, 'borderColor': pageData.mainProduct.bgColor[3] }">
      <div class="explainTitle">
        <img :src="imgUrl + pageData.mainJson.orderImg" alt="">
      </div>
      <div class="main"
        :style="pageData.mainJson.pageTextcol !== '' ? { 'color': pageData.mainJson.pageTextcol } : { 'color': '#000' }"
        v-html="pageData.mainProduct.givePhoneInfo"></div>
    </div>
    <!-- tab导航 -->
    <tab-Modal @tabClick="tabClick" :isApplet="isApplet"></tab-Modal>
    <!-- 隐私条款 -->
    <conceal v-model="showConceal" :pageData="pageData"></conceal>
    <!-- 产品说明 -->
    <rule-modal v-model="showRule" @ruleShow="showRule = false" :pageData="pageData"></rule-modal>
    <!-- <vent-modal v-model="showTucao"></vent-modal> -->
    <!-- 登录弹框组件 -->
    <login-modal v-model="showLogin" :type="type" :text="text" @getIsBuy="getIsBuy"></login-modal>
    <!-- 退订弹框组件 -->
    <unbuy-modal v-model="showUnbuy" :pageData="pageData" @childData="getChildData" @jihuo="jihuo"
      @memberClick="beforeLogin"></unbuy-modal>
    <!-- 剩余流量查询 -->
    <account-modal v-model="showQr"></account-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>
    <!-- 重复订购引流 -->
    <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 { detMainProduct, strategytemplate } from "../../api";
import common from '@/common/common'
import ruleModal from "../../componentsNew/ruleModal002.vue";
import conceal from "../../componentsNew/hideModal.vue";
import tabModal from "./components/tabModal.vue";
import loginModal from "../../componentsNew/login.vue";
import accountModal from "../../componentsNew/gongZongHao.vue";
import timeoutModal from "../../componentsNew/timeoutModal.vue";
import newZheZhao from "../../componentsNew/newZheZhao.vue";
import unbuyModal from "../../componentsNew/unbuyModal.vue";
import repeatModal from "../../componentsNew/repeatModal.vue";
import handelModal from "../../componentsNew/handelModal.vue";
import MgtvApi from "@/util/mgTvJssdk.js";
import lottie from "lottie-web";
import addR from "../../common/addRecord";

export default {
  mixins: [common],
  components: {
    ruleModal,
    conceal,
    tabModal,
    loginModal,
    accountModal,
    timeoutModal,
    newZheZhao,
    unbuyModal,
    repeatModal,
    handelModal
  },
  data () {
    return {
      lottie: {},
      imgUrl: process.env.VUE_APP_IMGS_URL,
      dataIds: [],
      productDatas: [],
      imgDatas: [],
      key: 0,
      type: "",
      checked: false,
      showConceal: false,
      showRule: false,
      showUnbuy: false,
      showLogin: false,
      showTimeout: false,
      unBuyDrainage: false,
      showQr: false,
      repeatShow: false,
      unBuyDrainageText: "",
      phone: "",
      isBuy: "未订购",
      text: "",
      handelShow: false
    }
  },
  created () {
    if (this.pageData.remarks.privacy === '1') {
      this.checked = true
    }
  },
  mounted () {
    addR.showSP();
    this.callSvg();
  },
  watch: {
    phone (val) {
      if (val != '') {
        addR.phoneEvent()
      }
    }
  },
  methods: {
    inputBlur () {
      if (this.phone != '') {
        addR.phoneEvent()
      }
    },
    inputFocus (e) {
      if (this.isNet2) {
        if (this.pageData.remarks.dispose && this.pageData.remarks.dispose !== '') {
          if (this.pageData.remarks.dispose == 'net5G') {
            if (!this.checked) {
              return this.$toast('请勾选隐私声明!')
            }

            if (!localStorage.getItem('net5g')) {
              this.$nextTick(() => {
                e.srcElement.blur()
                this.getNetUrl()
              })
            }
          }
        }
      }


    },
    ruleClick () {
      this.showRule = true;
      localStorage.setItem("startTime", new Date().getTime());
    },
    buyBtn () {
      if (this.phone == "") {
        this.$toast('请输入手机号')
      } else {
        if (this.checked == false) {
          this.$toast('请勾选隐私声明')
        } else {
          this.openIframe()
        }
      }

    },
    // 点击确定
    unBuySure () {
      addR.clickUnsubscribe();
      this.unBuyDrainage = false;
      this.showUnbuy = true;
    },
    getChildData (data) {
      this.isBuy = data;
    },
    // 一键拨号反馈
    toPhone () {
      addR.dialNumber();
      let phone = 4000600611;
      window.location.href = "tel://" + phone;
    },
    async beforeLogin (type) {
      this.type = type;
      if (this.user.userid) {
        if (type === "manual" || type === "member") {
          this.toLink(type);
        } else if (type === "unBUy") {
          addR.unBuyClick();
          if (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;
          }
        }
      } else if (type === "unBUy") {
        addR.unBuyClick();
        if (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;
        }
      } else {
        addR.loginClick();
        this.showLogin = 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;
    },
    // 调用svg动画
    callSvg () {
      let lottieBox = document.getElementById("lottie_box");
      lottieBox.innerHTML = "";
      if (this.pageData.mainJson.jsonImg !== '') {
        this.lottie = lottie.loadAnimation({
          container: lottieBox,
          renderer: "svg",
          loop: true,
          autoplay: true,
          path: this.imgUrl + this.pageData.mainJson.jsonImg,
        });
      }
    },
  }


}
</script>

<style lang="scss">@import "./index.scss";</style>
