<template>
  <div class="xiaochengxu" id="temp">
    <div class="bannerBox" :style="{
        backgroundImage: `url(${imgUrl}${pageData.mainProduct.bannerPics[0]})`,
      }" @click="bannerClick">
      <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>
    <!-- 订购按钮 -->
    <div class="buyBox" v-if="
        pageData.remarks.isBuy === '1' && isBuy !== '已订购' && sp !== 'text'
      ">
      <!--        @click="openIframe"-->
      <div class="btn" @click="btnClick" :style="{
          'background-color':pageData.mainProduct.themeColor[0],
          'border-color': pageData.mainProduct.themeColor[1],
        }">
        {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
      </div>
      <div class="privacyBox">
        <van-checkbox v-model="checked" checked-color="#fc8940">
          <p style="margin: 0; padding: 0">
            我已阅读并同意
          </p>
        </van-checkbox>
        <span class="span" style="color: #fc8940" @click="showAgreeMent = true">《隐私声明》</span>
      </div>

    </div>
    <!-- 用户状态 -->
    <div v-if="user.userid" class="memBox">
      {{ String(user.phone) | formatPhone }}（{{ isBuy }}）
    </div>
    <!-- 说明 -->
    <div class="descbox">
      <div class="main" v-html="pageData.mainProduct.givePhoneInfo"></div>
    </div>

    <!-- tab导航 -->
    <div class="tabBox">
      <!--      <span class="tabText" @click="showConceal = true">隐私声明</span>-->
      <span v-if="
          pageData.mainProduct.memberName && pageData.remarks.memberBtn === '1'
        " class="tabText" @click="beforeLogin('领取')">领取会员</span>
      <span v-if="pageData.remarks.tuidingBtn === '1'" class="tabText" @click="beforeLogin('unBUy')">退订产品</span>
    </div>
    <!-- 隐私条款 -->
    <!--    <conceal v-model="showConceal"></conceal>-->
    <conceal v-model="showAgreeMent"></conceal>
    <!-- 登录弹框组件 -->
    <login-modal v-model="showLogin" :type="type" @getIsBuy="getIsBuy"></login-modal>
    <!-- 退订弹框组件 -->
    <unbuy-modal v-model="showUnbuy" :pageData="pageData" @childData="getChildData"></unbuy-modal>
    <!-- 订购超时 -->
    <timeout-modal v-model="showTimeout"></timeout-modal>
    <!-- 遮罩 -->
    <newZheZhao v-if="showZhezhao" isZheZhao="1"></newZheZhao>
    <!-- 退订挽留 -->
    <van-overlay :show="unBuyDrainage" :duration="0.1" @click="unBuyDrainage = false"
      pageData.strategyInfo.unsubscribeStrategyList.length>0 > 0 >
      <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>
  </div>
</template>

<script>
  import {
    memberGive,
    strategyGetID,
    detMainProduct
  } from "../../api";
  import mixinNew from "../../common/mixinNew";
  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/conceal.vue";
  export default {
    name: "baseNew",
    mixins: [mixinNew],
    data() {
      return {
        imgUrl: process.env.VUE_APP_IMGS_URL,
        times: 0,
        showLogin: false,
        showRule: false,
        showScroll: false,
        showTucao: false,
        showQr: false,
        type: "",
        showTimeout: false,
        showUnbuy: false,
        unBuyDrainage: false,
        unBuyDrainageText: "",
        isBuy: "已订购",
        phone: "",
        showConceal: false,
        // 隐私声明
        showAgreeMent: false,
        checked: false,
      };
    },
    components: {
      loginModal,
      ruleModal,
      ventModal,
      accountModal,
      timeoutModal,
      newZheZhao,
      unbuyModal,
      conceal,
    },
    props: {
      sp: String,
    },
    filters: {
      formatPhone: (phone) => {
        phone = phone.toString();
        return phone.substr(0, 3) + "****" + phone.substr(7, 11);
      },
    },
    created() {
      document.title = this.pageData.mainProduct.productName;
      this.phone = this.$route.query.phone;
      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 now = new Date().getTime();
      let times = (now - 1622476800000) / 180000;
      this.times = String(Math.ceil(times * 2));
      if (this.user.userid) {
        this.getIsBuy();
      } else {
        this.isBuy = "未订购";
      }
      let newTime = new Date();
      let d = newTime.getDate();
      if (31 >= d && d >= 25 && this.pageData.remarks.isZoetrope === "1") {
        this.showScroll = true;
      }
    },
    methods: {
      ruleClick() {
        this.showRule = true;
        localStorage.setItem("startTime", new Date().getTime());
      },
      // 活动链接跳转
      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();
        }
      },
      bannerClick() {
        addR.clickBanner();
        if (
          this.pageData.remarks.isBuy === "1" &&
          this.sp !== "text" &&
          this.isBuy !== "已订购"
        ) {
          this.openIframe();
        }
      },
      btnClick() {
        if (this.checked === false) {
          this.$toast.fail("请先勾选隐私声明");
        } else {
          this.openIframe();
        }
      },
      async beforeLogin(type) {
        this.type = type;
        if (this.user.userid) {
          if (type === "领取") {
            this.giveMember();
          } else if (type === "unBUy") {
            addR.unBuyClick();
            if (
              this.pageData.strategyInfo.unsubscribeStrategyList !== null &&
              this.pageData.strategyInfo.unsubscribeStrategyList.length > 0
            ) {
              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 {
              this.showUnbuy = true;
            }
          }
        } else if (type === "unBUy") {
          addR.unBuyClick();
          if (
            this.pageData.strategyInfo.unsubscribeStrategyList !== null &&
            this.pageData.strategyInfo.unsubscribeStrategyList.length > 0
          ) {
            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 {
            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();
          url = "/member001";
        }
        this.$router.push({
          path: url,
          query: {
            cpid: cpid,
            spid: spid,
            isCompositeProduct: isCompositeProduct,
            activeType: activeType,
            productName: productName,
          },
        });
      },
      // 直接领取会员
      giveMember() {
        let updata = {
          activeType: this.pageData.mainProduct.activeType,
          userid: this.user.userid,
          channelKey: this.pageData.channl.channelKey,
          isCompositeProduct: this.pageData.mainProduct.isCompositeProduct,
        };
        addR.memberClick();
        memberGive(updata)
          .then(
            (res) => {
              addR.memberSuccess();
              this.$toast.success("会员领取成功");
            },
            (response) => {
              addR.memberFail(response);
              this.$toast(response.message);
            }
          )
          .catch(() => {
            this.$toast.fail("会员领取失败，请手动领取");
          });
      },
      // 点击确定
      unBuySure() {
        addR.clickUnsubscribe();
        this.unBuyDrainage = false;
        this.showUnbuy = true;
      },
      getChildData(data) {
        this.isBuy = data;
      },
    },
  };
</script>

<style lang="scss">
  .xiaochengxu {
    background-color: #f6f5f5;
    color: #0d0d0d;
    min-height: 100vh;
    font-family: PingFang SC;
    width: 100vw;
    overflow-x: hidden;

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

    .timeout-modal {
      padding: 60px 65px;
      font-size: 28px;
      line-height: 50px;
      text-align: center;
      color: #222222;

      .btn {
        width: 160px;
        line-height: 60px;
        margin: 50px auto 0;
        border-radius: 8px;
        background-color: #1876bc;
        color: #fff;
      }
    }

    .bannerBox {
      width: 100%;
      height: 840px;
      background-size: 100%;
      border-radius: 0 0 60px 60px;
      background-repeat: no-repeat;

      .activity {
        position: absolute;
        right: 10px;
        width: 180px;
        height: 140px;
        top: 260px;
      }
    }

    .buyBox {
      margin-top: -50px;
      padding: 0 25px;

      .btn {
        width: 700px;
        height: 100px;
        border-radius: 50px;
        line-height: 100px;
        font-size: 40px;
        border: 4px solid;
        font-weight: bold;
        text-align: center;
        color: #ffffff;
        animation-name: scale;
        animation-duration: 0.6s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate-reverse;
      }
    }

    .memBox {
      width: 690px;
      height: 100px;
      background: #ffffff;
      font-size: 34px;
      font-weight: bold;
      color: #0d0d0d;
      line-height: 100px;
      padding-left: 40px;
      border-radius: 20px;
      margin: 0 auto;
      margin-top: 30px;
      box-sizing: border-box;
    }

    .descbox {
      background-color: #ffffff;
      margin: 30px auto;
      border-radius: 20px;
      padding: 20px 40px;
      width: 690px;
      max-height: 560px;
      overflow-y: scroll;
      box-sizing: border-box;

      .main {
        word-break: break-all;

        h2 {
          color: #0d0d0d;
          margin: 0;
          line-height: 60px;
        }

        p {
          color: #707070;
          font-size: 26px;
          line-height: 36px;
          margin: 0;
        }
      }
    }

    // 弹窗样式
    .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;
      }

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

    .tabBox {
      text-align: center;
      padding-bottom: 50px;

      .tabText {
        font-size: 26px;
        font-family: PingFang SC;
        text-decoration: underline;
        color: #707070;
        margin: 0 40px;
      }
    }

    .van-notice-bar {
      background-color: transparent;
      padding: 0 0;
      color: #000;

      .van-notice-bar__wrap {
        margin-top: 17rem;
      }

      .van-notice-bar__content {
        background-color: #fff;
        padding: 10px 30px;
        border-radius: 30px;
        opacity: 0.7;
      }
    }

    .van-icon {
      // background-color: #f6f6f6;
      // border: 0 !important;
      border-color: #fc8940;
      transform: scale(0.75, 0.75);
    }

    .van-checkbox__label {
      margin-left: 5px;
    }

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