<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="./images/TX@2x.png" alt="" />
          <img src="./images/aqy@2x.png" alt="" />
          <img src="./images/yk@2x.png" alt="" />
          <img src="./images/mg@2x.png" alt="" />
          <img src="./images/bilibili_98@2x.png" alt="" />
          <img src="./images/pptv@2x.png" alt="" />
          <img src="./images/ppTY.png" alt="" />
          <img src="./images/souhushipin.png" alt="" />
        </div>
      </div>
      <!--图窗2-->
      <div class="box boxTwo">
        <div class="banTitle">
          热门会员30+选{{ pageData.mainProduct.spid === "99144187" ? "2" : "1" }}
        </div>
        <div class="secImg">
          <div v-for="(item, index) in images" :key="index">
            <img :src="item.url" alt="" />
          </div>
        </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"></newZheZhao>
    <conceal v-model="showAgreeMent"></conceal>
    <!-- 重复订购引流 -->
    <repeat-modal @repeat="recommend" v-model="repeatShow"></repeat-modal>
  </div>
</template>

<script>
  import mixinNew from "../../common/mixinNew";
  import addR from "../../common/addRecord";
  import newZheZhao from "../../components/newZheZhao.vue";
  import repeatModal from "../../components/repeatModal.vue";
  import {
    channelGet,
    strategyGetID,
    detMainProduct,
    seniorStrategy,
  } from "../../api";
  import conceal from "../../components/conceal.vue";
  export default {
    name: "suiXinXuan",
    mixins: [mixinNew],
    components: {
      newZheZhao,
      conceal,
      repeatModal,
      repeatShow: false
    },
    data() {
      return {
        imgUrl: process.env.VUE_APP_IMGS_URL,
        banners: [],
        showQr: false,
        showUnbuy: false,
        showScroll: false,
        colors: [],
        images: [{
            url: require("./images/TX@2x.png")
          },
          {
            url: require("./images/aqy@2x.png")
          },
          {
            url: require("./images/yk@2x.png")
          },
          {
            url: require("./images/mg@2x.png")
          },
          {
            url: require("./images/bilibili_98@2x.png")
          },
          {
            url: require("./images/pptv@2x.png")
          },
          {
            url: require("./images/souhushipin.png")
          },
          {
            url: require("./images/hemaxiansheng.png")
          },
          {
            url: require("./images/xgxw.png")
          },
          {
            url: require("./images/jingdong.png")
          },
          {
            url: require("./images/wangyiyunyinyue.png")
          },
          {
            url: require("./images/meituan.png")
          },
          {
            url: require("./images/eleme.png")
          },
          {
            url: require("./images/Xmly.png")
          },
          {
            url: require("./images/maoyandianying.png")
          },
          {
            url: require("./images/ppTY.png")
          },
          {
            url: require("./images/didi.png")
          },
          {
            url: require("./images/bsk.png")
          },
          {
            url: require("./images/keep.png")
          },
          {
            url: require("./images/kfc.png")
          },
        ],
        // 隐私声明
        showAgreeMent: false,
        checked: false,
      };
    },
    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) {
        // this.$store.commit("setTempName", "loading");
        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,
            };
            let params = {
              anonymousId: this.$sensors.store._state.$device_id,
              channleKey: localStorage.getItem("key"),
              spId: info.data.spid,
              userId: this.user.userid,
            };
            let item = await seniorStrategy(params);
            if (item.data !== null) {
              // 判断高级策略是否开启遮罩;
              if (item.data.enableMask !== null) {
                pageData.remarks.isMask = String(item.data.enableMask);
                // 判断高级策略是否有遮罩文案 并替换
                if (item.data.maskText !== null && item.data.maskText !== "") {
                  pageData.remarks.maskText = item.data.maskText;
                }
              }
              // 判断高级策略是否开启有推荐
              if (
                item.data.recommendStrategy !== "" &&
                item.data.recommendStrategy !== null
              ) {
                let itemList = item.data.recommendStrategy.split(",");
                pageData.recommend = [];
                itemList.forEach((v) => {
                  strategyGetID({
                    id: v,
                  }).then((resp) => {
                    pageData.recommend.push(resp.data);
                  });
                });
              }
              if (item.data.cancelRule !== "" && item.data.cancelRule !== null) {
                pageData.strategyInfo.unsubscribeStrategyList =
                  item.data.cancelRule.split(",");
              }
              if (item.data.interceptRule === "1") {
                pageData.interceptRule = item.data.interceptRule;
              }
              if (item.data.location !== "" && item.data.location !== null) {
                pageData.location = item.data.location.split(",");
              }
            }
            document.title = pageData.mainProduct.productName;
            this.$store.commit("setPageData", pageData);
            this.$store.commit("setTempName", data.templateCode);
            if (item.data !== null) {
              if (
                item.data.templateName !== "" &&
                item.data.templateName !== null
              ) {
                this.$store.commit("setTempName", item.data.templateName);
              }
            }
          } else {
            this.$toast.fail("当前策略未生效");
          }
        });
      },
      orderClick() {
        channelGet({
          channelKey: this.pageData.channl.channelKey
        }).then(
          (res) => {
            this.$router.push({
              path: "/manual004",
              query: {
                channelKey: this.pageData.channl.channelKey,
                strategyId: res.data.strategyId,
              },
            });
            return false;
          }
        );
      },
    },
  };
</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: 60px 45px 42px 45px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;

          img {
            width: 110px;
            height: 110px;
            margin-top: 20px;
          }
        }

        .secImg {
          padding: 60px 45px 42px 45px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;

          img {
            width: 98px;
            height: 98px;
            margin-top: 20px;
          }
        }
      }

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