<template>
  <div class="manual003" v-if="pageData.mainProduct">
    <div v-if="pageData.mainProduct.orderingInfo">
      <div class="title">产品详情</div>
      <div class="text">
        <div class="desc">
          <div class="main" v-html="pageData.mainProduct.orderingInfo"></div>
        </div>
      </div>
    </div>

    <div v-if="pageData.mainProduct.givePhoneInfo">
      <div class="title">流量使用说明</div>
      <div class="btmText">
        <div class="main" v-html="pageData.mainProduct.givePhoneInfo"></div>
      </div>
    </div>
    <div class="oreder">
      <div class="oerdetText" @click="showConceal = true">隐私声明</div>
      <!-- <div class="oerdetText" v-if="pageData.remarks.memberBtn === '1'" @click="getMember">
        领取权益
      </div>
      <div class="oerdetText" v-if="pageData.remarks.tuidingBtn === '1'" @click="beforeLogin">
        退订产品
      </div> -->
      <div class="oerdetText" v-for="(item,index) in tabArr" :key="index" @click="tabClick(item)">
        {{item.tabName}}</div>
    </div>
    <!-- 隐私条款 -->
    <conceal v-model="showConceal" :pageData="pageData"></conceal>
    <!-- 退订弹框组件 -->
    <unbuy-modal v-model="showUnbuy" :pageData="pageData"></unbuy-modal>
  </div>
</template>

<script>
import addR from "../../common/addRecord";
import vuePuzzle from "vue-puzzle-vcode";
import conceal from "../../components/hideModal.vue";
import unbuyModal from "../../components/unbuyModal.vue";
import MgtvApi from "@/util/mgTvJssdk.js";
import wx from "weixin-js-sdk";
import {
  newStrategy,
  strategytemplate,
  detMainProduct,
  channelGet,
} from "../../api/index";
import { Dialog } from "vant";
export default {
  name: "manual003",
  components: {
    vuePuzzle,
    conceal,
    unbuyModal
  },
  data () {
    return {
      showQr: false,
      showUnbuy: false,
      showTimeout: false,
      showSheet: false,
      showVcode: false,
      productId: "",
      pageData: {},
      unBuyDrainage: false,
      unBuyDrainageText: "",
      channelKey: "",
      channelName: "",
      showConceal: false,
      isApplet: false,
      tabArr: []
    };
  },
  created () {
    this.channelKey = this.$route.query.channelKey;
    channelGet({
      channelKey: this.channelKey,
    }).then((res) => {
      this.channelName = res.data.channelName;
      this.getTemplate(res.data.fullCode, res.data.onOffStatus)
    });
  },
  mounted () {
    wx.miniProgram.getEnv(res => {
      this.isApplet = res.miniprogram
    })
  },
  methods: {
    // 点击确定
    unBuySure () {
      addR.clickUnsubscribe();
      this.unBuyDrainage = false;
      this.showUnbuy = true
    },
    async beforeLogin (type) {
      if (type === 'member') {
        this.getMember()
      } else if (type === "unBUy") {
        addR.unBuyClick();
        this.showUnbuy = true;
      }
    },
    getTemplate (fullCode, edition) {
      let anonymousId = this.$sensors.store._state.$device_id;
      let userid = localStorage.getItem('userid')
      let params = {
        anonymousId: anonymousId,
        channelKey: this.channelKey,
        location: "",
        userId: userid
      }
      newStrategy(params).then(async (res) => {
        let data = res.data;
        let info = await detMainProduct({ productId: data.primaryProductId })
        let productJson = JSON.parse(data.productJson)
        let mainJson = productJson.product;
        let viceJson = productJson.viceProduct ? productJson.viceProduct : ''
        let mainProduct = {
          activeType: info.data.activeType,
          bannerPics: [mainJson.bannerImg, mainJson.jsonImg, mainJson.upImg, mainJson.topImg,],
          bgColor: [mainJson.pageBgcol, '', mainJson.orderBgcol, mainJson.orderBdcol],
          cacheSeatOne: [{
            dongHua: mainJson.drawVal,
            memberUrl: info.data.cacheSeatOne[0].memberUrl,
            proC: {
              e: mainJson.hideCol,
              s: mainJson.pageTextcol
            },
            productV: mainJson.productV,
            rushC: {
              e: mainJson.orderTextcol,
              s: mainJson.orderNumcol,
            },
            tabC: {
              e: mainJson.tabVicecol,
              s: mainJson.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: mainJson.orderImg,
            p: mainJson.explainImg
          },
          id: data.primaryProductId,
          isCompositeProduct: info.data.isCompositeProduct,   //是否复合产品
          logoPic: mainJson.logoPic,
          manualInfo: info.data.manualInfo,
          memberName: info.data.memberName,
          orderingInfo: info.data.orderingInfo,
          originalPrice: info.data.originalPrice,
          pageTitle: mainJson.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: mainJson.remark3,
          spid: info.data.spid,
          themeColor: [mainJson.btnTopcol, mainJson.btnBotcol],
        }
        mainProduct.primaryProductInfo = info.data;
        let recommend = [];
        if (data.recommendStrategyIds.length > 0 && data.recommendStrategyIds) {
          data.recommendStrategyIds.forEach(async val => {
            let list = await strategytemplate(val)
            recommend.push(list.data);
          });
        }
        let pageData = {
          mainProduct: mainProduct,
          channl: {
            fullCode: fullCode,
            channelKey: this.channelKey,
            edition: edition
          },
          recommend: recommend,
          remarks: JSON.parse(data.extJson),
          viceJson: viceJson, //副产品json
          mainJson: mainJson,
          otherJson: data.otherJson, //备用json
          strategyInfo: {
            activityLogo: data.activityLogo,
            activityType: data.activityType,
            directCharge: null,
            extJson: data.extJson,
            id: data.id,
            linkUrl: data.linkUrl,
            maskText: data.maskText,
            posterPhoto: data.posterPhoto,
            primaryProductId: data.primaryProductId,
            primarySpid: null,
            productInfo: [],
            promotePhoto: data.promotePhoto,
            strategyName: data.strategyName,
            strategyStatus: data.strategyStatus,
            strategyType: data.strategyType,
            templateCode: data.templateCode,
            templateId: data.templateId,
            templateName: "",
            recommendStrategyList: data.recommendStrategyIds,
            unsubscribeStrategyList: data.unsubscribeStrategyIds,
            viceProductStrategyList: data.viceProductIds,
          }
        };
        if (pageData.remarks.jihuoUrl && pageData.remarks.jihuo !== '') {
          pageData.mainProduct.flowJumpUrl = pageData.remarks.jihuo
        }
        if (pageData.remarks.memberUrl && pageData.remarks.memberUrl !== '') {
          pageData.mainProduct.cacheSeatOne[0].memberUrl = pageData.remarks.memberUrl
        }
        this.pageData = pageData
        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
              arr.push(obj)
            }
            if (val.tabName == '退订产品') {
              let obj = {}
              obj.tabName = val.tabName
              obj.tabUrlBasics = val.tabUrlBasics
              obj.tabUrlApplet = val.tabUrlApplet
              arr.push(obj)
            }
          })
          this.tabArr = arr
        } else {
          if (this.pageData.remarks.memberBtn == '1') {
            let obj = {}
            obj.tabUrlBasics = ""
            obj.tabUrlApplet = ""
            obj.tabName = '会员领取'
            this.tabArr.push(obj)
          }
          if (this.pageData.remarks.tuidingBtn == '1') {
            let obj = {}
            obj.tabUrlBasics = ""
            obj.tabUrlApplet = ""
            obj.tabName = '退订产品'
            this.tabArr.push(obj)
          }

        }
        this.$store.commit("setPageData", pageData);
      });
    },
    // 领取会员
    getMember () {
      addR.memberClick();
      if (this.isApplet == false) {
        window.location.href = "https://cs.mige.tv/H";
      } else {
        if (this.pageData.mainProduct.cacheSeatOne[0].memberUrl && this.pageData.mainProduct.cacheSeatOne[0].memberUrl !== "") {
          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";
        }
      }

    },
    tabClick (item) {
      if (this.isApplet == true) {
        if (item.tabUrlApplet !== '') {
          let url = item.tabUrlApplet + '&channelName=' + this.pageData.channl.channelKey
          window.location.href = url
        } else {
          if (item.tabName == '订购记录') {
            this.beforeLogin('manual')
          } else if (item.tabName == '流量激活') {
            this.jihuo('点击激活')
          } else if (item.tabName == '一键反馈') {
            this.toPhone()
          } else if (item.tabName == '退订产品') {
            this.beforeLogin('unBUy')
          } else if (item.tabName == '剩余流量查询') {
            this.chaxun()
          } else if (item.tabName == '会员领取') {
            this.beforeLogin('member')
          }
        }
      } else {
        if (item.tabUrlBasics !== '') {
          let url = item.tabUrlBasics + '&channelName=' + this.pageData.channl.channelKey
          window.location.href = url
        } else {
          if (item.tabName == '订购记录') {
            this.beforeLogin('manual')
          } else if (item.tabName == '流量激活') {
            this.jihuo('点击激活')
          } else if (item.tabName == '一键反馈') {
            this.toPhone()
          } else if (item.tabName == '退订产品') {
            this.beforeLogin('unBUy')
          } else if (item.tabName == '剩余流量查询') {
            this.chaxun()
          } else if (item.tabName == '会员领取') {
            this.beforeLogin('member')
          }
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.manual003 {
  background-color: #1b1414;
  color: #f6f6f7;
  height: 100vh;
  overflow-y: scroll;
  font-family: PingFang SC;
  padding: 0 62px;
  color: #f6f6f7;

  .title {
    font-size: 42px;
    font-weight: bold;
    padding-top: 40px;
  }

  .text {
    position: relative;

    .desc {
      margin-top: 20px;
      height: 780px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      line-height: 40px;
      position: relative;
      padding-bottom: 10px;

      .main {
        width: auto;
        word-break: break-all;
        color: #fff !important;
        style {
          color: #fff !important;
        }
      }
    }

    .btmZZ {
      width: 624px;
      position: absolute;
      bottom: 0;
      height: 40px;
      background-image: linear-gradient(
        180deg,
        rgba(27, 20, 20, 0.65),
        #1b1414
      );
      border-radius: 6px;
    }
  }

  .btmText {
    padding-bottom: 200px;

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

  .oreder {
    color: #fd5200;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 500;
    text-decoration: underline;
    padding: 50px 0 100px 0;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    background-color: #1b1414;
  }

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

    .unBuyText {
      margin-top: 40px;
      text-align: left;
      font-size: 26px;
      line-height: 40px;
    }
  }

  .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: 530px;
      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;
      color: #000;
    }

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

  .sureStyle {
    width: 90%;
    margin: 50px auto;
    border-radius: 40px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background-color: #dc2633;
    color: #fff;
  }

  .fileBox {
    margin: 10px 40px;
    box-sizing: border-box;
    border: 1px solid #c4c4c4;
  }
}
</style>