<template>
  <page-meta
    :page-font-size="$baseFontSize() + 'px'"
    :root-font-size="$baseFontSize() + 'px'"
  ></page-meta>
  <view v-if="show">
    <swiper
      class="guide_pages_swiper"
      indicator-dots="true"
      indicator-color="#d1d1d1"
      indicator-active-color="#54a966"
    >
      <swiper-item>
        <view class="guide_pages_bg1">
          众妙之门，
          <br />
          {{ title }}<br />
          带你感受国学之美
        </view>
      </swiper-item>
      <swiper-item>
        <view class="guide_pages_bg2">
          众妙之门，
          <br />
          {{ title }}<br />
          带你感受国学之美
        </view>
      </swiper-item>
      <swiper-item>
        <view class="guide_pages_bg3">
          众妙之门，
          <br />
          {{ title }}<br />
          带你感受国学之美
        </view>
      </swiper-item>
      <swiper-item>
        <view class="guide_pages_bg4">
          众妙之门，
          <br />
          {{ title }}<br />
          带你感受国学之美
        </view>
        <button
          v-if="screenHeight > 667"
          style="color: #fff; border-color: #fff"
          class="guide_pages_close close_1624"
          @click="onClose"
        >
          开始使用
        </button>
        <button
          v-else
          class="guide_pages_close close_btj"
          @click="onClose"
          style="color: #fff; border-color: #fff"
        >
          开始使用
        </button>
      </swiper-item>
    </swiper>
    <u-popup :show="protocolShow" mode="center" round="6">
      <view class="popup_box">
        <view class="title">温馨提示</view>
        <view class="content">
          <view class="top">尊敬的用户，感谢您信任并使用众妙之门！</view>
          <view class="center"
            >众妙之门非常重视您的隐私保护和个人信息保护，在您使用众妙之门提供的产品或服务前，请务必仔细阅读<text
              class="aui-text-success"
              @click="openDetail(1)"
              >《用户协议》</text
            >、<text class="aui-text-success" @click="openDetail(2)"
              >《隐私政策》</text
            >全部条款，众妙之门可能会收集您的相关使用信息、个人信息。未经授权，众妙之门不会向任何第三方提供您的信息。
          </view>
          <view class="bottom">
            如您点击“同意”代表您已阅读并同意<text
              class="aui-text-success"
              @click="openDetail(1)"
              >《用户协议》</text
            >、<text class="aui-text-success" @click="openDetail(2)"
              >《隐私政策》</text
            >的全部条款，众妙之门会尽全力保障您的合法权益并为您提供更优质的产品和服务。

            <view class="button_box">
              <u-button
                size="small"
                text="不同意"
                @click="onDisagree"
              ></u-button>
              <u-button
                text="同意"
                color="#3AB3AE"
                size="small"
                @click="close"
              ></u-button>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <u-popup :show="DisagreeProtocolShow" mode="center" round="6">
      <view class="popup_box">
        <view class="title" style="text-align: center; color: #333"
          >温馨提示</view
        >
        <view class="content">
          <view class="center"
            >我们非常重视对您个人信息的保护，如不同意很遗憾我们将无法提供服务。</view
          >

          <view class="button_box">
            <u-button
              color="#b0b0b0"
              size="small"
              :plain="true"
              text="退出应用"
              @click="quit"
            ></u-button>
            <u-button
              color="#3AB3AE"
              text="再次查看"
              :plain="true"
              size="small"
              @click="onSee"
            ></u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      title: "融儒、医、美、文为一体",
      // title:"融儒、释、道、医、美、文为一体",
      screenHeight: 667,
      show: false,
      protocolShow: false,
      DisagreeProtocolShow: false,
    };
  },
  onReady() {
    // this.show = false;

    if (uni.getStorageSync("guidePages") != 2) {
      let systemInfo = uni.getSystemInfoSync();
      this.screenHeight = systemInfo.screenHeight;
      this.show = true;
      // this.protocolShow = true;
    }

    // else {
    // uni.switchTab({
    // 	// url: "/pages/advertisement/index/index",
    // 	url: "/pages/homePage/index/index",
    // 	success: function() {
    // 		let page = getCurrentPages()[0];
    // 		console.log(page);
    // 		page.$vm.requestAll();
    // 	},
    // });
    // }
  },
  methods: {
    openDetail(type) {
      console.log("type at line 152:", type);
      uni.navigateTo({
        url: "/pages/advertisement/index/detail?type=" + type,
      });
    },
    quit() {
      if (uni.getSystemInfoSync().platform === "ios") {
        plus.runtime.launchApplication({
          action: "QUIT",
        });
      } else {
        plus.runtime.quit();
      }
    },
    onSee() {
      this.protocolShow = true;
      this.DisagreeProtocolShow = false;
    },
    onDisagree() {
      this.protocolShow = false;
      this.DisagreeProtocolShow = true;
    },
    close() {
      this.protocolShow = false;
    },
    onClose() {
      uni.setStorageSync("guidePages", 2);
      this.show = false;
      this.protocolShow = false;
      uni.redirectTo({
        url: "/pages/user/login/login",
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/style/mixin.scss";
.guide_pages_swiper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: 10000;

  image {
    width: 100vw;
    height: 100vh;
  }

  .guide_pages_bg1 {
    width: 100vw;
    height: 100vh;
    background: url("@/static/icon/e_0ban_1.png") no-repeat bottom center;
    background-size: cover;
    // background-color: #4CD964;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 46rpx;
    font-weight: bold;
    line-height: 80rpx;
  }

  .guide_pages_bg2 {
    width: 100vw;
    height: 100vh;
    background: url("@/static/icon/e_0ban_2.jpg") no-repeat;
    background-size: cover;
    // background-color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 46rpx;
    font-weight: bold;
    line-height: 80rpx;
  }

  .guide_pages_bg3 {
    width: 100vw;
    height: 100vh;
    background: url("@/static/icon/e_0ban_3.png") no-repeat;
    background-size: cover;
    // background-color: #EA552D;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 46rpx;
    font-weight: bold;
    line-height: 80rpx;
  }
  .guide_pages_bg4 {
    width: 100vw;
    height: 100vh;
    background: url("@/static/icon/e_0ban_4.jpg") no-repeat;
    background-size: cover;
    // background-color: #EA552D;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 46rpx;
    font-weight: bold;
    line-height: 80rpx;
  }

  .guide_pages_close {
    border: 2rpx solid #000;
    color: #000;
    line-height: 68rpx;
    height: 68rpx;
  }

  .close_btj {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 290rpx;
    height: 68rpx;
    transform: translateX(-50%) translateY(438rpx);
    background-color: transparent;
  }

  .close_1624 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 290rpx;
    height: 68rpx;
    background-color: transparent;
    transform: translateX(-50%) translateY(412rpx);
  }
}

.title {
  font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
  font-weight: normal;
  font-size: 46rpx;
  color: $themeColor;
  background-color: #f5f5f5;
  //   line-height: 46rpx;
  padding: 20rpx;
  //   border-leradius: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.aui-text-success {
  color: $themeColor;
}

.popup_box {
  padding-bottom: 20rpx;
  width: 85vw;
  overflow: hidden;
  position: relative;
  height: auto;

  .content {
    font-size: 32rpx;
    letter-spacing: 0.15rpx;
    padding: 20rpx;
    color: #3f3f3f;

    .top {
      margin: 30rpx 0;
    }

    .center {
      line-height: 40rpx;
      // padding:0 10rpx;
    }

    .bottom {
      width: 100%;
      margin-top: 60rpx;

      font-size: 28rpx;
      line-height: 32rpx;
      color: #b0b0b0;
    }
  }
}

.button_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;

  .u-button {
    margin-left: 40rpx;
  }

  .u-button:nth-child(1) {
    margin-left: 0;
  }
}

/deep/.uni-swiper-dot-active {
  color: $themeColor !important;
}
</style>
