<template>
  <view class="container">
    <u-popup :show="show" @close="close" @open="open" mode="center">
      <view class="popup">
        <view class="popup_header">欢迎使用小发同城</view>
        <scroll-view
          scroll-y="true"
          @scrolltolower="handerScrolltolower"
          class="popup_body"
        >
          <u-parse :content="content" class="webview"></u-parse>
        </scroll-view>
        <view class="tool">
          点击"同意"，即表示您已阅读并同意小发同城
          <text>《小发同城商家入驻协议》</text>
          和
          <text>《个人信息保护政策》</text>
        </view>
        <view class="popup_foot">
          <u-button
            class="btn btn_disagree"
            :hairline="false"
            :plain="true"
            @click="disagreeHandle"
          >
            不同意
          </u-button>
          <u-button class="btn btn_ok" :disabled="isDisabled" @click="okHandle">
            同意
          </u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { GetProtoco } from "@/api/protocol";
import APPUpdate, { getCurrentNo } from "@/config/appUpdate";
export default {
  name: "LaunchPage",
  data() {
    return {
      show: false,
      content: "",
      isDisabled: false,
      version: "",
    };
  },
  mounted() {
    this.getProtoco();
    try {
      const val = uni.getStorageSync("isNeedAgreementDialog");
      if (val === "" || val === false) {
        this.show = true;
      } else {
        this.checkAppUpdate();
        uni.redirectTo({
          url: "/pages/index/index",
        });
      }
    } catch (e) {}
  },
  methods: {
    async getProtoco() {
      let params = { protocols_key: "joininPrivacyAgreement" };
      let res = await GetProtoco(params);
      if (res && res.status == 200) {
        this.content = res.data.document;
      }
    },
    checkAppUpdate(callback) {
      // #ifdef APP-PLUS
      getCurrentNo((res) => {
        this.version = res.version;
        APPUpdate(this.version); // 触发更新弹窗
        callback && callback();
      });
      // #endif
      // #ifndef APP-PLUS
      callback && callback();
      // #endif
    },
    close() {
      this.show = false;
    },
    open() {
      this.show = true;
    },
    disagreeHandle() {
      uni.setStorage({
        key: "isNeedAgreementDialog",
        data: false,
        success: function () {
          plus.runtime.quit();
        },
      });
    },
    okHandle() {
      uni.setStorage({
        key: "isNeedAgreementDialog",
        data: true,
        success: () => {
          this.checkAppUpdate(() => {
            uni.redirectTo({
              url: "/pages/index/index",
            });
          });
        },
      });
    },
    handerScrolltolower(e) {
      this.isDisabled = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: url("@/static/xiaofa-bg.png") no-repeat;
  background-size: contain;
  height: 100vh;
}

::v-deep .u-popup__content {
  margin: 40rpx;
  width: 86%;
  border-radius: 24rpx;
}

.popup {
  padding: 20px;
  font-size: 30rpx;

  .popup_header {
    font-weight: bold;
    text-align: center;
    font-size: 36rpx;
    color: #222;
  }

  .popup_body {
    margin: 30rpx auto;
    height: 400rpx;
    overflow: hidden;

    .webview {
      border: none;
      overflow-x: hidden;
    }
  }

  .tool {
    padding-bottom: 30rpx;
    text {
      color: #03ad7a;
    }
  }

  .popup_foot {
    display: flex;
    align-items: center;
    justify-content: center;
    .btn {
      width: 234rpx;
      height: 80rpx;
      border: 1rpx solid #999;
      border-radius: 100rpx;
      text-align: center;

      &::after {
        border: none;
      }
    }
    .btn_ok {
      color: #fff;
      background: #03ad7a;
      border-color: #03ad7a;
    }
  }
}
</style>
