<template>
  <div class="privacy-notice-page">
    <p class="title">活动说明</p>
    <mui-video :item="videoInfo" type="video" />
    <div class="content">
      <p>亲爱的参与者们:</p>
      <p>感谢您参加首届“童声无界-声音漂流记”!感谢您对公益事业的支持!</p>
      <p>“童声无界——声音漂流记”活动旨在以书籍为载体、以新媒体为平台，通过两地共读同一绘本交流分享阅读感受，搭建两地儿童沟通的桥梁。通过不同方言的绘本演绎，丰富小朋友的阅读体验，增加阅读乐趣。</p>
      <p>本次活动共23所幼儿园（12家上海幼儿园+11家对口援建幼儿园）参加，计划辐射范围含学生、教师和亲子家庭共计2万余人参与。</p>
      <p>本次活动对您上传的活动作品存在一定的版权风险，请您在参与活动前务必认真阅读并确认以下几点内容:</p>
      <p>1、本次活动确保报名信息真实有效，包括手机联系方式、幼儿园名称、姓名等，以上信息仅用干短信验证、活动报备等环节。上海市儿童基金会、上海XX益基金会郑重承诺绝不会泄露用户信息给不相关方或用于商业目的。</p>
      <p>2、免责申明:在活动过程中，组织方对参赛作品享有所有权，可用于主办方活动推广展示、媒体宣传、编辑出版等。视频创作者享有署名权。参加者一旦报名，即视为参加者(包括代他人报名者，被代报名参加者)已充分了解并自愿接受本免责条款，本免责条款自动生效。</p>
    </div>
    <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>