<!-- 2022-04-06 开发者:韩明亮  user:hanmingliang123-->
<template>
  <div id="temp" class="tempalteColor" :style="pageData.mainProduct.bgColor !== null &&pageData.mainProduct.bgColor.length > 0? { backgroundColor: pageData.mainProduct.bgColor[0] }: { backgroundColor: '#000' } ">
    <div class="bannerBox" @click="bannerClick">
      <!-- 底层banner -->
      <img class="banner" v-if="pageData.mainProduct.bannerPics[0]" :class="productJson.length>0&&productJson[0].dongHua && productJson[0].dongHua=='1'?'cartoon1':''" :src="imgUrl + pageData.mainProduct.bannerPics[0]" alt="" />
      <!-- json动图 -->
      <div class="svgBanner">
        <div id="lottie_box"></div>
      </div>
      <!-- 上层png -->
      <div class="banner2" :class="productJson.length>0&&productJson[0].dongHua&& productJson[0].dongHua=='1'?'cartoon2':''" v-if="pageData.mainProduct.bannerPics[2]&& pageData.mainProduct.bannerPics[2]!==''">
        <img :src="imgUrl + pageData.mainProduct.bannerPics[2]" alt="" />
      </div>
      <!-- 顶层png/gif -->
      <div class="banner2" v-if="pageData.mainProduct.bannerPics[3]&& pageData.mainProduct.bannerPics[3]!==''">
        <img :src="imgUrl + pageData.mainProduct.bannerPics[3]" alt="" />
      </div>
      <img @click.stop class="activity" v-if="pageData.strategyInfo.activityType !== 0 && pageData.strategyInfo.activityLogo" :src="`${pageData.strategyInfo.activityLogo}`" @click="onGoLink()" />
      <!-- 轮播条 -->
      <van-notice-bar v-show="showScroll" scrollable :text="pageData.remarks.zoetropeText" />
    </div>
    <!-- 统一认证组件 -->
    <tong-ren ref="refs" v-if="pageData.remarks.attestation === 0" @btnClick="openIframe" :pageData="pageData" @hideClick="showConceal = true" @ruleClick="ruleClick">
    </tong-ren>
    <!-- 短信认证组件 -->
    <duan-ren ref="refs" v-else-if="pageData.remarks.attestation === 1" @btnClick="toBuy" :pageData="pageData" @hideClick="showConceal = true" @ruleClick="ruleClick"></duan-ren>
    <!-- 短信认证组件 -->
    <jian-ren ref="refs" v-else-if="pageData.remarks.attestation === 2" @btnClick="toNewBuy" :pageData="pageData" @hideClick="showConceal = true" @ruleClick="ruleClick"></jian-ren>
    <!-- 统一认证组件---升级 -->
    <unify-color v-if="pageData.remarks.attestation === 3 ||pageData.remarks.attestation === 4 ||pageData.remarks.attestation === 5
      " @btnClick="btnClick" :pageData="pageData" :isBuy="isBuy" @hideClick="showConceal = true" @ruleClick="ruleClick" @toBuy="toBuy" @toNewBuy="toNewBuy" :indexNum="indexNum">
    </unify-color>
    <!-- 产品说明 -->
    <div class="descbox" v-if="productJson.length > 0 && productJson[0].productV === '2'" :style="{
        backgroundColor: pageData.mainProduct.bgColor[2],
        borderColor: pageData.mainProduct.bgColor[3],
        borderStyle: 'solid',
        borderWidth: 1 + 'px',
      }" style="padding-top: 30px; padding-bottom: 15px">
      <div class="titleImg">
        <img :src="imgUrl + pageData.mainProduct.guidancePic.c" style="width: 100%; height: 100%" />
        <div class="titleText" :style="productJson[0].proC.s?{ color: `${productJson[0].proC.s}` }:{}">
          产品说明
        </div>
      </div>
      <div class="main" :style="productJson[0].proC.s?{ color: `${productJson[0].proC.s}` }:{}" v-html="pageData.mainProduct.givePhoneInfo"></div>
    </div>
    <div class="descbox" v-else>
      <img :src="imgUrl + pageData.mainProduct.guidancePic.p" style="width: 100%" />
    </div>
    <div class="extend" v-if="pageData.remarks.extendImg" @click="extendClick">
      <img :src="pageData.remarks.extendImg" alt="" />
    </div>
    <!-- 推荐产品 -->
    <div v-if="pageData.recommend.length > 0">
      <div v-for="(item, index) in pageData.recommend" :key="index" class="probox" @click="recommend(item.id)" :style="{
          backgroundImage: `url(${item.promotePhoto})`,
        }"></div>
    </div>
    <!-- 活动图 -->
    <div v-if="pageData.strategyInfo.posterPhoto" class="probox" @click="onGoLink()" :style="{
        backgroundImage: `url(${pageData.strategyInfo.posterPhoto})`,
      }"></div>
    <!-- tab导航 -->
    <div class="tabBox">
      <div class="tab" v-if="pageData.remarks.jiluBtn === '1'" @click="beforeLogin('manual')">
        <img src="../assets/record.png" alt="" />
        <div>订购记录</div>
      </div>
      <div class="tab" v-if="pageData.remarks.jihuoBtn === '1'" @click="jihuo('点击激活')">
        <img src="../assets/liuliang.png" alt="" />
        <div>流量激活</div>
      </div>
      <div class="tab" v-if="pageData.remarks.memberBtn === '1'" @click="beforeLogin('member')">
        <img src="../assets/huiyuan.png" alt="" />
        <div>领取会员</div>
      </div>
      <div class="tab" v-if="pageData.remarks.chaxunBtn === '1'" @click="chaxun">
        <img src="../assets/guanzhu.png" alt="" />
        <div>剩余流量查询</div>
      </div>
      <div class="tab" v-if="pageData.remarks.guanzhuBtn ==='1'" @click="toPhone()">
        <img src="../assets/fankui.png" alt="" />
        <div>一键反馈</div>
      </div>
      <div class="tab" v-if="pageData.remarks.tuidingBtn === '1'" @click="beforeLogin('unBUy')">
        <img src="../assets/tuiding.png" alt="" />
        <div>退订产品</div>
      </div>
    </div>
    <!-- 使用说明 -->
    <div class="rule" @click="ruleClick">
      <div class="icon"></div>
      <div class="text">产品说明</div>
    </div>
    <rule-modal v-if="showRule" @ruleShow="ruleShow" :pageData="pageData"></rule-modal>
    <!-- 反馈 -->
    <div class="tucaoModal" @click="showTucao = true">
      <div class="icon"></div>
      <div class="text">反馈</div>
    </div>
    <vent-modal v-model="showTucao"></vent-modal>
    <!-- 登录弹框组件 -->
    <login-modal v-model="showLogin" :type="type" @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>
    <!-- 隐私条款 -->
    <conceal v-model="showConceal" :pageData="pageData"></conceal>
    <!-- 重复订购引流 -->
    <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
    <!-- 合约产品退订提示 -->
    <opOut v-model="opoutShow" @opoutClick="showUnbuy = true"></opOut>
  </div>
</template>

<script>
import {
  changeUserid,
  strategyGetID,
  strategytemplate,
  detMainProduct,
} from "../../api";
import common from "../../common/common";
import loginModal from "../../components/login.vue";
import addR from "../../common/addRecord";
import ruleModal from "../../components/ruleModal002.vue";
import ventModal from "../../components/helpModal.vue";
import accountModal from "../../components/gongZongHao.vue";
import timeoutModal from "../../components/timeoutModal.vue";
import newZheZhao from "../../components/newZheZhao.vue";
import unbuyModal from "../../components/unbuyModal.vue";
import conceal from "../../components/hideModal.vue";
import repeatModal from "../../components/repeatModal.vue";
import tongRen from "./components/tongRen.vue";
import duanRen from "./components/duanRen.vue";
import jianRen from "./components/jianRen.vue";
import unifyColor from "../../components/unifyColor.vue";
import opOut from "../../components/opOut.vue";
import { Dialog } from "vant";
import lottie from 'lottie-web';
export default {
  mixins: [common],
  data () {
    return {
      lottie: {},
      imgUrl: process.env.VUE_APP_IMGS_URL,
      times: 0,
      showLogin: false,
      showRule: false,
      showTucao: false,
      showQr: false,
      type: "",
      showTimeout: false,
      showUnbuy: false,
      unBuyDrainage: false,
      showScroll: false,
      unBuyDrainageText: "",
      showConceal: false,
      phone: "",
      productJson: [],
      repeatShow: false,
      isBuy: "未订购",
      opoutShow: false
    };
  },
  components: {
    loginModal,
    ruleModal,
    ventModal,
    accountModal,
    timeoutModal,
    newZheZhao,
    unbuyModal,
    conceal,
    repeatModal,
    tongRen,
    duanRen,
    jianRen,
    unifyColor,
    opOut
  },
  created () {
    document.title = this.pageData.mainProduct.productName;
    this.phone = this.$route.query.phone;
    if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne !== null) {
      this.productJson = this.pageData.mainProduct.cacheSeatOne;
    }
  },
  mounted () {
    setTimeout(() => {
      addR.showSP();
    }, 3000);
    this.callSvg()
  },
  methods: {
    // 一键拨号反馈
    toPhone () {
      addR.dialNumber()
      let phone = 4000600611
      window.location.href = "tel://" + phone;
    },
    extendClick () {
      if (
        this.pageData.remarks.extendVal &&
        this.pageData.remarks.extendVal === "1"
      ) {
        if (this.isBuy === "未订购") {
          Dialog({
            message: "您还未订购成功，请继续通过此页面订购，即可领取会员；",
            theme: "round-button",
          });
        } else if (this.isBuy === "已订购") {
          Dialog({
            message:
              " 您已订购成功，请留意订购成功短信，点击其中链接领取会员；",
            theme: "round-button",
          });
        } else if (this.isBuy === "已退订") {
          Dialog({
            message: "您已退订",
            theme: "round-button",
          });
        }
      }
    },
    btnClick (phone) {
      this.phone = phone;
      this.openIframe();
    },
    ruleShow () {
      this.showRule = false;
    },
    ruleClick () {
      this.showRule = true;
      localStorage.setItem("startTime", new Date().getTime());
    },
    bannerClick () {
      addR.clickBanner();
      // if (
      //     this.pageData.remarks.isBuy === "1" &&
      //     this.pageData.remarks.attestation === 0
      // ) {
      //     if (this.$refs.refs.checked === false) {
      //         this.$toast.fail("请先勾选隐私声明");
      //     } else {
      //         addR.clickBanner();
      //         this.openIframe();
      //     }
      // }
    },
    chaxun () {
      addR.clickFollow();
      this.showQr = true;
    },
    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 !== null &&
            this.pageData.strategyInfo.unsubscribeStrategyList.length > 0
          ) {
            if (this.pageData.channl.edition && this.pageData.channl.edition === 1) {
              let productId = await strategytemplate(this.pageData.strategyInfo.unsubscribeStrategyList[0]);
              let drainageRes = await detMainProduct({
                productId: productId.data.primaryProductId,
              });
              this.unBuyDrainageText = drainageRes.data.productName;
            } else {
              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 {
            if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
              this.opoutShow = true
            } else {
              this.showUnbuy = true;
            }
          }
        }
      } else if (type === "unBUy") {
        console.log(this.pageData)
        addR.unBuyClick();
        if (
          this.pageData.strategyInfo.unsubscribeStrategyList !== null &&
          this.pageData.strategyInfo.unsubscribeStrategyList.length > 0
        ) {
          if (this.pageData.channl.edition && this.pageData.channl.edition === 1) {
            let productId = await strategytemplate(this.pageData.strategyInfo.unsubscribeStrategyList[0]);
            let drainageRes = await detMainProduct({
              productId: productId.data.primaryProductId,
            });
            this.unBuyDrainageText = drainageRes.data.productName;
          } else {
            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 {
          if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
            this.opoutShow = true
          } else {
            this.showUnbuy = true;
          }
        }
      } else {
        addR.loginClick();
        this.showLogin = true;
      }
    },
    toLink (type) {
      let cpid = this.$store.state.pageData.mainProduct.cpid;
      let spid = this.$store.state.pageData.mainProduct.spid;
      let isCompositeProduct =
        this.$store.state.pageData.mainProduct.isCompositeProduct;
      let activeType = this.$store.state.pageData.mainProduct.activeType;
      let productName = this.$store.state.pageData.mainProduct.productName;
      let url;
      if (type === "manual") {
        addR.clickOrderRecord();
        url = "/order001";
      } else if (type === "member") {
        addR.memberClick();
        if (
          this.productJson[0].memberUrl &&
          this.productJson[0].memberUrl !== ""
        ) {
          window.location.href = this.productJson[0].memberUrl;
          return false;
        } else {
          if (this.pageData.mainProduct.isCompositeProduct === 2) {
            url = "/member002";
          } else {
            url = "/member001";
          }
        }
      }
      this.$router.push({
        path: url,
        query: {
          cpid: cpid,
          spid: spid,
          isCompositeProduct: isCompositeProduct,
          activeType: activeType,
          productName: productName,
        },
      });
    },
    // 推荐产品跳转
    recommend (val) {
      let edition = this.$store.state.pageData.channl.edition
      if (edition && edition === 1) {
        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: "",
            }],
            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.producremarktName,
            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
          };
          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.$store.commit('setTempName', res.data.templateCode)
        })

      } else {
        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,
            };
            document.title = pageData.mainProduct.productName;
            this.$store.commit("setPageData", pageData);
            if (this.$store.state.tempName === data.templateCode) {
              setTimeout(() => {
                this.callSvg()
              }, 500)
            }
            this.$store.commit("setTempName", data.templateCode);
          } else {
            this.$toast.fail("当前策略未生效");
          }
        });
      }

      this.unBuyDrainage = false;
    },
    // 活动链接跳转
    onGoLink () {
      if (this.user.userid) {
        if (this.pageData.strategyInfo.activityType === 2) {
          let url = `${this.pageData.strategyInfo.linkUrl
            }&userid=${encodeURIComponent(this.user.userid)}`;
          window.location.href = url;
        } else if (this.pageData.strategyInfo.activityType === 1) {
          changeUserid({
            userid: this.user.userid,
            cpid: this.param.cpid,
          }).then((res) => {
            let url = `${this.pageData.strategyInfo.linkUrl}?userid=${res.data}`;
            window.location.href = url;
          });
        }
      } else {
        this.loginType = " 登录 ";
        this.showLogin = true;
        addR.loginClick();
      }
    },
    // 点击确定
    unBuySure () {
      addR.clickUnsubscribe();
      this.unBuyDrainage = false;
      if (this.pageData.remarks.treaty && this.pageData.remarks.treaty === '1') {
        this.opoutShow = true
      } else {
        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">
@import "./index.scss";
</style>