<template>
  <div class="suiXinXuan" id="temp">
    <div :style="{ backgroundImage: `url(${imgUrl}${pageData.mainProduct.bannerPics[0]})` }"
      class="header-banner bg-cover">
      <div class="infoBtn" @click="orderClick">产品说明</div>
      <!-- 轮播条 -->
      <van-notice-bar v-show="showScroll" scrollable :text="pageData.remarks.zoetropeText" />
    </div>
    <div class="btnOrder" v-if="pageData.remarks.isBuy === '1'">
      <div style="margin: 0 auto 10px auto; width: 60%">
        <div class="privacyBox">
          <van-checkbox v-model="checked" checked-color="#fc8940">
            <span style="color: #dedede">我已阅读并同意</span>
          </van-checkbox>
          <span class="span" style="color: #fc8940" @click="showAgreeMent = true">《隐私声明》</span>
        </div>

      </div>

      <div class="spBtn" :style="{
        'background-color': pageData.mainProduct.themeColor[0],
        'border-color': pageData.mainProduct.themeColor[1],
      }" @click="btnClick">
        <!--          @click="openIframe"-->
        {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
      </div>
    </div>
    <!--主体-->
    <div class="content">
      <!--图窗1-->
      <div class="box" v-if="pageData.mainProduct.spid !== '99144185'">
        <div class="banTitle">10G专属流量</div>
        <div class="fstImg">
          <img :src="imgUrl + pageData.mainProduct.guidancePic.p" alt="" />
        </div>
      </div>
      <!--图窗2-->
      <div class="box boxTwo">
        <div class="banTitle">
          热门会员多选{{ pageData.mainProduct.spid === "99144187" ? "2" : "1" }}
        </div>
        <div class="secImg">
          <img :src="imgUrl + pageData.mainProduct.guidancePic.c" alt="" />
        </div>
      </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>
    <!-- 遮罩 -->
    <newZheZhao v-if="showZhezhao" isZheZhao="1" :indexNum="indexNum"></newZheZhao>
    <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 newZheZhao from "../../components/newZheZhao.vue";
import repeatModal from "../../components/repeatModal.vue";
import handelModal from "../../componentsNew/handelModal.vue";
import MgtvApi from "@/util/mgTvJssdk.js";
import {
  channelGet,
  strategyGetID,
  detMainProduct,
  strategytemplate
} from "../../api";
import conceal from "../../components/hideModal.vue";
export default {
  mixins: [common],
  components: {
    newZheZhao,
    conceal,
    repeatModal,
    handelModal
  },
  data () {
    return {
      imgUrl: process.env.VUE_APP_IMGS_URL,
      banners: [],
      showQr: false,
      showUnbuy: false,
      showScroll: false,
      repeatShow: false,
      handelShow: false,
      colors: [],
      images: [{
        url: require("./images/tx.png")
      },
      {
        url: require("./images/aqy.png")
      },
      {
        url: require("./images/yk.png")
      },
      {
        url: require("./images/mg.png")
      },
      {
        url: require("./images/bili.png")
      },
      {
        url: require("./images/ppship.png")
      },
      {
        url: require("./images/pptiyu.png")
      },
      {
        url: require("./images/sh.png")
      },
      {
        url: require("./images/lol.png")
      },
      {
        url: require("./images/keep.png")
      },
      {
        url: require("./images/wy.png")
      },
      {
        url: require("./images/kg.png")
      },
      {
        url: require("./images/kw.png")
      },
      {
        url: require("./images/xmly.png")
      },
      {
        url: require("./images/lr.png")
      },
      {
        url: require("./images/xgx.png")
      },
      {
        url: require("./images/ysp.png")
      },
      {
        url: require("./images/my.png")
      },
      {
        url: require("./images/didi.png")
      },
      {
        url: require("./images/mt.png")
      },
      ],
      // 隐私声明
      showAgreeMent: false,
      checked: false,
      phone: ""
    };
  },
  created () {
    document.title = this.pageData.mainProduct.productName;
    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();
      }
    },
    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: "",
              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.$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,
            });
            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,
            };
            MgtvApi.setWebviewTitle({
              title: pageData.mainProduct.productName,
            });
            document.title = pageData.mainProduct.productName;
            this.$store.commit("setPageData", pageData);
            this.$store.commit("setTempName", data.templateCode);
          } else {
            this.$toast.fail("当前策略未生效");
          }
        });
      }
    },
    orderClick () {
      this.$router.push({
        path: "/manual004",
        query: {
          channelKey: this.pageData.channl.channelKey,
        },
      });
    },
  },
};
</script>

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

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

    to {
      transform: scale(0.8);
    }
  }

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

  .header-banner {
    width: 750px;
    height: 440px;
    position: relative;

    .infoBtn {
      position: absolute;
      right: 52px;
      bottom: 36px;
      font-size: 34px;
      font-weight: 500;
      text-decoration: underline;
      color: #fd5200;
      line-height: 36px;
    }
  }

  .btnOrder {
    position: fixed;
    bottom: 0;
    width: 750px;
    padding: 40px 50px;
    z-index: 1;
    background-color: #1b1414;

    .spBtn {
      width: 650px;
      height: 100px;
      background: #fd5200;
      border-radius: 55px;
      font-size: 36px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      line-height: 100px;
      animation-name: scale;
      animation-duration: 0.6s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
    }
  }

  .content {
    font-family: PingFang SC;
    font-size: 38px;
    padding: 0px 60px 260px 60px;

    .box {
      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;
      margin-top: 40px;

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

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

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

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

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

    .boxTwo {
      margin-top: 80px;
    }

    .probox {
      margin: 40px 0;
      width: 630px;
      border-radius: 20px;
      box-shadow: 0px 0px 2px 0px #acacac;
      height: 140px;
      background-size: 100% 100%;
    }
  }

  .zhezhoa {
    width: 750px;
    height: 150px;
    position: fixed;
    top: 177px;
    z-index: 100000;

    .box {
      width: 580px;
      height: 160px;
      background: #ffffff;
      border-radius: 0.08rem;
      margin: 0 auto;
      background-image: url("../../assets/img/top@2x.png");
      background-size: 581px 96px;
      background-repeat: no-repeat;
      position: relative;
      padding-top: 140px;

      .logo {
        width: 92.4px;
        height: 50.4px;
        background-image: url("../../assets/img/unicmlogo.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 22px;
        left: 37px;
      }

      .product-title {
        font-size: 30px;
        font-weight: bold;
        line-height: 32px;
        text-align: center;
        color: #000000;
      }

      .price-box {
        height: 36px;
        margin-top: 20px;
        text-align: center;
        font-weight: bold;

        .now {
          font-size: 44px;
          color: #222222;
        }
      }
    }
  }

  .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 {
    border-color: #fc8940;
  }

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