<template>
  <div class="privacy-notice-page">
    <p class="title">活动说明</p>
    <mui-video :item="videoInfo" type="video" />
    <div class="content">
      <p>
        普通话实现了不同地区的有效交流，增加了文化自信和归属感。方言和普通话相辅相成，作为文化载体之一丰富了传统文化。如今，上海很多小朋友面对沪语只能听不会讲，我们深知方言传承的重要性。此项活动是希望上海和少数民族地区的小朋友都用普通话和家乡话阅读，让彼此可以不见面也能听到远方小朋友的声音。
      </p>
    </div>
    <van-image fit="contain" :src="graphical" />
    <div style="height: 5rem;" />
    <div class="control-bar">
      <div class="button">
        <my-button type="plain" @on-click="disagree">不同意</my-button>
      </div>
      <div class="button">
        <my-button type="primary" @on-click="agree">同意</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 graphical from '@/assets/images/graphical.png'
import Cookies from 'js-cookie'
import MyButton from '@/components/MyButton/index.vue'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import MuiVideo from '@/components/MuiVideo/index';

import { JSJ_FORM_C } from '@/constant'

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 = `${JSJ_FORM_C}?x_field_1=${$route.query.str}`;
  // BUG: 关闭loading临时处理
  // setTimeout(() => {
  //   show.value = false;
  // }, 2000);
}

const videoInfo = {
  id: '999',
  video: 'http://gyzs.onwall.cn/%E7%AB%A5%E5%A3%B0%E6%97%A0%E7%95%8Clogo%E6%9C%80%E7%BB%88%E7%89%88.mp4'
}
</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>