<template>
  <div class="templatePage" id="temp">
    <div class="bannerBox" @click="bannerClick">
      <!-- 底层banner -->
      <img class="banner" v-if="info.bannerImg !== ''" :class="info.drawVal == '1' ? 'cartoon1' : ''"
        :src="imgUrl + info.bannerImg" alt="" />
      <!-- json动图 -->
      <div class="svgBanner">
        <div id="lottie_box"></div>
      </div>
      <!-- 上层png -->
      <div class="banner2" v-if="info.upImg !== ''" :class="info.drawVal == '1' ? 'cartoon2' : ''">
        <img :src="imgUrl + info.upImg" alt="" />
      </div>
      <!-- 顶层png/gif -->
      <div class="banner2" v-if="info.topImg !== ''">
        <img :src="imgUrl + info.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" @click="extendClick">
        <img :src="pageData.remarks.extendImg" alt="" />
      </div> -->
    </div>
    <div class="productBox" :style="{ 'background-color': info.pageBgcol }">
      <div class="productList" :style="{ 'background-color': info.pageBgcol }">
        <div class="product" @click="checkClick('1')" :style="checked == '1'
          ? {
            'background-color': pageData.mainJson.orderBgcol,
            'border-color': pageData.mainJson.btnBotcol,
            'box-shadow': '0px 0px 10px 0px #cfd6cc',
          }
          : {
            'background-color': pageData.mainJson.orderBgcol,
            'border-color': '#E6E6E6',
          }
          ">
          <div class="title1">基础版</div>
          <div class="price">￥{{ originalPrice }}<span>元/月</span></div>
          <div>
            <div class="span">移网侧</div>
            <div class="explain">
              <p>分时上网 <span class="icon success"></span></p>
              <p>电话防扰 <span class="icon success"></span></p>
              <p>实时位置展示 <span class="icon success"></span></p>
              <p>历史位置 <span class="icon error"></span></p>
              <p>应用控制 <span class="icon error"></span></p>
              <p>上网详情统计 <span class="icon error"></span></p>
              <p>风险网站提醒 <span class="icon error"></span></p>
              <!--              <p>风险网站拦截 <span class="icon error"></span></p>-->
            </div>
            <div class="span">固网侧</div>
            <div class="explain">
              <p>分终端分时上网 <span class="icon success"></span></p>
              <p>分应用上网 <span class="icon error"></span></p>
              <!--              <p>上网详情统计 <span class="icon error"></span></p>-->
              <!--              <p>风险网站提醒 <span class="icon error"></span></p>-->
              <!--              <p>风险网站拦截 <span class="icon error"></span></p>-->
            </div>
            <!-- <div class="privacyBox">
                <van-radio name="1">选择此套餐</van-radio>
              </div> -->
          </div>
        </div>
        <div class="product" @click="checkClick('2')" v-if="pageData.strategyInfo.viceProductStrategyList.length > 0"
          :style="checked == '2'
            ? {
              'background-color': pageData.viceJson.orderBgcol,
              'border-color': pageData.viceJson.btnBotcol,
              'box-shadow': '0px 0px 10px 0px #cfd6cc',
            }
            : {
              'background-color': pageData.viceJson.orderBgcol,
              'border-color': '#E6E6E6',
            }
            ">
          <div class="title2">无忧版</div>
          <div class="price">
            ￥{{ viceProduct.originalPrice }}<span>元/月</span>
          </div>
          <div>
            <div class="span">移网侧</div>
            <div class="explain">
              <p>分时上网 <span class="icon success"></span></p>
              <p>电话防扰 <span class="icon success"></span></p>
              <p>实时位置展示 <span class="icon success"></span></p>
              <p>历史位置 <span class="icon success"></span></p>
              <p>应用控制 <span class="icon success"></span></p>
              <p>上网详情统计 <span class="icon success"></span></p>
              <p>风险网站提醒 <span class="icon success"></span></p>
              <!--              <p>风险网站拦截 <span class="icon success"></span></p>-->
            </div>
            <div class="span">固网侧</div>
            <div class="explain">
              <p>分终端分时上网 <span class="icon success"></span></p>
              <p>分应用上网 <span class="icon success"></span></p>
              <!--              <p>上网详情统计 <span class="icon success"></span></p>-->
              <!--              <p>风险网站提醒 <span class="icon success"></span></p>-->
              <!--              <p>风险网站拦截 <span class="icon success"></span></p>-->
            </div>
            <!-- <div class="privacyBox">
                <van-radio name="2">选择此套餐</van-radio>
              </div> -->
          </div>
        </div>
      </div>

      <!-- <van-radio-group v-model="checked" checked-color="#65B644" @change="checkClick">

      </van-radio-group> -->
      <div class="textBox">
        <div class="input">
          <input type="text" maxlength="11" placeholder="请输入联通号码" v-model="phone" />
        </div>
      </div>
      <!-- 统一认证组件 -->
      <tong-ren :infoData="info" :remarks="pageData.remarks" @btnClick="btnClick"></tong-ren>
      <!-- 流量使用说明 -->
      <div class="contentTitle" :style="{ color: info.pageTextcol }">
        订购须知
      </div>
      <div class="main" v-html="htmlText" :style="{ color: info.pageTextcol }"></div>
      <!-- 订购超时 -->
      <timeout-modal v-model="showTimeout"></timeout-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>
  </div>
</template>
<script>
import { detMainProduct } from "../../api";
import addR from "../../common/addRecord";
import common from "../../common/common";
import lottie from "lottie-web";
import tongRen from "./components/tongRen.vue";
import timeoutModal from "../../componentsNew/timeoutModal.vue";
import handelModal from "../../componentsNew/handelModal.vue";
export default {
  mixins: [common],
  components: {
    tongRen,
    timeoutModal,
    handelModal,
  },
  data () {
    return {
      lottie: {},
      imgUrl: process.env.VUE_APP_IMGS_URL,
      info: {},
      viceProduct: {},
      mainProduct: {},
      checked: "1",
      showTimeout: false,
      handelShow: false,
      isBuy: "未订购",
      htmlText: "",
      originalPrice: 0,
      phone: "",
    };
  },
  created () {
    this.originalPrice = this.pageData.mainProduct.originalPrice;
    this.info = this.pageData.mainJson;
    this.htmlText = this.pageData.mainProduct.givePhoneInfo;
    this.mainProduct = this.pageData.mainProduct;
    if (this.pageData.strategyInfo.viceProductStrategyList.length > 0) {
      detMainProduct({
        productId: this.pageData.strategyInfo.viceProductStrategyList[0],
      }).then((res) => {
        this.viceProduct = res.data;
      });
    }

    // let phone = localStorage.getItem("phone");
    // if (phone) {
    //   this.phone = phone;
    // }
  },
  methods: {
    btnClick () {
      if (this.phone == "") {
        this.$toast("请输入手机号");
      } else {
        this.openIframe();
      }
    },
    checkClick (e) {
      this.checked = e;
      if (e == "2") {
        this.param.cpid = this.viceProduct.cpid;
        this.param.spid = this.viceProduct.spid;
        this.htmlText = this.viceProduct.givePhoneInfo;
        this.info = this.pageData.viceJson;
        let pageData = {
          mainProduct: this.viceProduct,
          channl: this.pageData.channl,
          recommend: this.pageData.recommend,
          remarks: this.pageData.remarks,
          viceJson: this.pageData.viceJson, //副产品json
          mainJson: this.pageData.mainJson,
          otherJson: this.pageData.otherJson, //备用json
          strategyInfo: this.pageData.strategyInfo,
        };
        this.$store.commit("setPageData", pageData);
      } else if (e == "1") {
        this.param.cpid = this.pageData.mainProduct.cpid;
        this.param.spid = this.pageData.mainProduct.spid;
        this.info = this.pageData.mainJson;
        let pageData = {
          mainProduct: this.mainProduct,
          channl: this.pageData.channl,
          recommend: this.pageData.recommend,
          remarks: this.pageData.remarks,
          viceJson: this.pageData.viceJson, //副产品json
          mainJson: this.pageData.mainJson,
          otherJson: this.pageData.otherJson, //备用json
          strategyInfo: this.pageData.strategyInfo,
        };
        this.$store.commit("setPageData", pageData);
        this.htmlText = this.pageData.mainProduct.givePhoneInfo;
      }
    },
    bannerClick () {
      addR.clickBanner();
    },
    onGoLink () { },
    extendClick () { },
    // 调用svg动画
    callSvg () {
      let lottieBox = document.getElementById("lottie_box");
      lottieBox.innerHTML = "";
      setTimeout(() => {
        if (this.info.jsonImg) {
          this.lottie = lottie.loadAnimation({
            container: lottieBox,
            renderer: "svg",
            loop: true,
            autoplay: true,
            path: this.imgUrl + this.info.jsonImg,
          });
        }
      }, 200);
    },
  },
};
</script>

<style lang="scss" scoped>
.templatePage {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  position: relative;
  background-color: #fff;

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

  .bannerBox {
    width: 100%;
    height: auto;
    background-size: 100%;
    // border-radius: 0 0 60px 60px;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    display: inline-flex;

    .banner {
      width: 100%;
      height: 100%;
    }

    .svgBanner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .banner2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .activity {
      position: absolute;
      right: 0;
      width: 180px;
      height: 140px;
      bottom: 0;
      z-index: 4;
    }

    .extend {
      width: 160px;
      height: 152px;
      position: fixed;
      top: 640px;
      z-index: 4;

      img {
        width: 100%;
        height: 100%;
      }
    }

    // 主banner 动画效果  从105% 缩放到100%
    .cartoon1 {
      animation-name: scale1;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }

    @keyframes scale1 {
      from {
        transform: scale(1.1);
      }

      to {
        transform: scale(1);
      }
    }

    // 顶层banner 从100%  放大到105%
    .cartoon2 {
      animation-name: scale2;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }

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

      to {
        transform: scale(1.1);
      }
    }
  }

  .productBox {
    position: relative;
    width: 100%;
    // height: 1000px;
    background: #ffffff;
    border-radius: 40px 40px 0px 0px;
    margin-top: -135px;
    z-index: 3;
    padding: 56px 38px;
    box-sizing: border-box;

    .productList {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .product {
        width: 315px;
        // height: 880px;
        background: #ffffff;
        border-radius: 10px;
        border: 5px solid;

        .title1 {
          width: 160px;
          height: 54px;
          // background-color: #D5D5D5;
          background-image: linear-gradient(to right, #d5d5d5, #edebe9);
          color: #000;
          font-weight: 600;
          margin: 0 auto;
          line-height: 54px;
          text-align: center;
          font-size: 30px;
          border-radius: 0px 0px 10px 10px;
        }

        .title2 {
          width: 160px;
          height: 54px;
          background-image: linear-gradient(to right, #fad8a6, #fcefde);
          color: #553f2b;
          font-weight: 600;
          margin: 0 auto;
          line-height: 54px;
          text-align: center;
          font-size: 30px;
          border-radius: 0px 0px 10px 10px;
        }

        .price {
          width: 100%;
          text-align: center;
          margin-top: 30px;
          font-size: 60px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #4eaa41;

          span {
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #4eaa41;
          }
        }

        .span {
          font-size: 22px;
          font-weight: bold;
          color: #222222;
          margin: 23px 0 0 20px;
        }

        .explain {
          position: relative;

          p {
            font-size: 22px;
            font-family: PingFang SC;
            // font-weight: 400;
            color: #222222;
            text-align: center;
            opacity: 0.6;

            .icon {
              width: 30px;
              height: 30px;
              position: absolute;
              right: 40px;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .success {
              background-image: url("../../assets/img/icon_you.png");
            }

            .error {
              background-image: url("../../assets/img/icon_wu.png");
            }
          }
        }
      }
    }

    .textBox {
      width: 670px;
      // width: 750px;
      // padding: 0 50px;
      margin: 0 auto;

      .input {
        width: 100%;
        height: 87px;
        background: #ffffff;
        border-radius: 10px;
        margin: 25px 0;
        // padding: 0 15px;
        box-sizing: border-box;
        border: 3px solid rgba(238, 238, 238, 0.877);
        padding-left: 20px;
        box-sizing: border-box;

        input {
          margin: 0;
          padding: 0;
          border: none;
          outline: none;
          width: 100%;
          height: 100%;
          line-height: 80px;
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000;
          border-radius: 10px;
        }
      }
    }
  }

  .privacyBox {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 44px;
    margin-bottom: 26px;

    .van-checkbox {
      text-align: right;
      display: flex;
      justify-content: flex-end;
    }

    .span {
      display: flex;
      align-items: center;
    }

    p {
      font-size: 20px;
      color: #8b8b8b;
      font-family: PingFang SC;
      font-weight: 400;
    }

    .van-icon {
      transform: scale(0.6, 0.6);
      border-color: #65b644;
    }

    .van-checkbox__label {
      margin-left: 0;
    }
  }

  .main {
    // padding-top: 30px;
    word-break: break-all;

    p {
      // color: #222222;
      font-size: 28px;
      line-height: 40px;
      margin: 0;
      font-weight: 400;
    }
  }

  .contentTitle {
    color: #222222;
    margin-top: 30px;
    font-size: 36px;
    line-height: 48px;
    margin-bottom: 27px;
    font-weight: bold;
  }
}
</style>
