<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>活动汇聚上海12个区优质幼儿园全体师生及11家上海对口援建少数民族地区约7000多名学生、700多名老师和亲子家庭共计2万余人共同参与。</p>
      <p>
        活动组织图书馆、学前教育专家及上海市特级园长为少数民族地区的孩子们共同精心挑选56本绘本创建阅读资源库。同时，组织上海各区县优质幼儿园骨干教师为对口的少数民族地区的老师们进行线上示范教学、新媒体技术赋能。对口少数民族的孩子们在老师的带领下从阅读资源库中选择一本自己喜爱的绘本用当地的方言和普通话来朗读绘本并录制成音/视频，而上海的小朋友则用普通话和沪语朗读同一本书为其伴读，演绎的视频通过活动新媒体小程序上传，使多地的孩子们可以在新媒体技术的手段下，通过同一本绘本建立彼此交流和话题。
      </p>
      <p>本次活动收集的信息包括手机联系方式、幼儿园名称、姓名等，仅用于短信验证、活动报名等环节。在活动过程中，组织方对上传作品享有所有权及知识产权，可用于主办方活动推广展示、媒体宣传、编辑出版、复制修改、授权他人使用等。</p>
      <p>在少数民族地区孩子们阅读的过程中，上海对口幼儿园的全国特级园长等名师将在线给予对口单位在亲子阅读、教育经验上的沟通交流。在所有上传的视频中，将评选“绘本好声音”并颁发活动荣誉证书，优秀作品将会被图书馆收藏。</p>
    </div>
    <div v-if="$route.query.status !== 'no-button'" 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 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;
    margin-bottom: 5rem;
    p {
      // padding-bottom: 1rem;
      line-height: 1.75;
    }
  }

  .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: 0.7rem 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>