<template>
  <div class="privacy-notice-page">
    <p class="title">个人信息保护政策</p>
    <div class="content">
      <p>
        欢迎您参与童声无界-声音漂流记！童声无界（以下也称“我们”）深知个人信息对您的重要性，因此我们非常重视保护您的隐私和个人信息。我们将按照法律法规要求并通过《童声无界个人信息保护政策》（以下简称“本政策”）向您说明我们在您使用本平台的产品/服务时如何处理您的个人信息，以及我们为您提供的访问、更新、删除和保护这些信息的方式。
      </p>
      <p style="font-weight: bold;">为了向您提供我们产品/服务的基本功能，您需要授权我们收集、使用必要信息的情形。如您拒绝提供前述必要信息，您将无法正常使用我们的产品/服务；</p>
      <p>
        为了向您提供我们产品/服务的附加功能，您可以选择授权我们收集、使用信息的情形。如您拒绝提供前述信息，您将无法正常使用相关附加功能或无法实现我们拟达到的功能效果，但并不会影响您正常使用我们产品/服务的基本功能。
        请您注意，因我们向您提供的产品和服务种类众多，我们将根据您选择使用的具体产品/服务范围，遵循“合理、正当、必要”原则收集和使用您的个人信息。除此之外，您理解并同意，基于向您提供更好的产品和服务的目的，我们可能会不时推出新的或优化后的功能，可能增加或变更收集和使用个人信息的目的、范围和方式。对此，我们将通过更新本政策、弹窗或站内信等通知方式另行向您说明收集和使用对应信息的目的、范围和方式，并为您提供同意与否的选项，且在征得您的明示同意后收集、使用对应信息。在此过程中，如您有任何疑问、意见或建议，您可通过本政策第九条提供的联系方式与我们联系。
      </p>
    </div>
    <div style="height: 5rem;"></div>
    <div class="control-bar">
      <div class="button">
        <my-button @on-click="disagree" type="plain">不同意</my-button>
      </div>
      <div class="button">
        <my-button @on-click="agree" type="primary">同意</my-button>
      </div>
    </div>
  </div>

  <van-overlay :show="show" z-index="9999">
    <div class="wrapper" @click.stop>
      <van-loading size="24px">跳转中...</van-loading>
    </div>
  </van-overlay>
</template>

<script setup>
import Cookies from 'js-cookie'
import MyButton from '@/components/MyButton/index.vue'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

const disagree = () => {
  $router.go(-1)
}

const show = ref(false); // 跳转等待提示

const agree = () => {
  show.value = true;
  Cookies.set('privacy_notice', '1');
  // x_field_1 是金数据表单传入的参数，家长上传的格式为：user_id-book_id-perf_id，perf_id是当前缺省的儿童id
  location.href = `https://jsjs.onwall.cn/f/NAGn1D?x_field_1=${$route.query.str}`;
  // BUG: 关闭loading临时处理
  setTimeout(() => {
    show.value = false;
  }, 2000);
}
</script>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.privacy-notice-page {
  padding: 1rem;

  .title {
    text-align: center;
    font-size: 1.25rem;
    padding: 1rem 0;
    color: #713610;
    font-weight: bold;
  }

  .content {
    text-align: justify;
    color: #231815;
    font-size: 1.05rem;

    p {
      padding-bottom: 1rem;
    }
  }

  .control-bar {
    z-index: 999;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    box-sizing: content-box;
    background-color: white;
    padding: 1rem 0;
    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.07);

    .button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      padding: 0 0.5rem;
    }
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: auto;
  text-align: center;
}
</style>