<template>
  <div class="center_content">
    <div class="center_nav">
      <div>
        <img
          :style="{ top: top }"
          src="../../../../assets/icon/race/progress2.png"
          alt=""
        />
        <span @click="checkType(1)" :class="{ active: atype == 1 }"
          >挑战赛安排</span
        >
        <span @click="checkType(2)" :class="{ active: atype == 2 }"
          >比分及奖项设置</span
        >
        <span @click="checkType(3)" :class="{ active: atype == 3 }"
          >其他附件</span
        >
        <!-- <span @click="checkType(4)" :class="{ active: atype == 4 }"
          >其他事宜</span
        > -->
      </div>
    </div>
    <div class="center_body" ref="box" @scroll.passive="allScrollTop($event)">
      <div class="center_box" ref="box1">
        <div class="center_detail" style="margin-bottom: 20px">
          <div style="text-align: center; font-weight: bold; font-size: 18px">
            <span>“相项而行·共筑光明”——光明区项目式学习教师挑战赛</span>
          </div>
          <div style="text-indent: 32px">
            <span
              >为深入贯彻落实国务院《全民科学素质行动规划纲要（2021—2035年）》《广东省基础教育课程教学改革深化行动实施方案（2024-2027年）》《光明区教育发展“十四五”规划》等文件精神，根据《光明区义务教育阶段项目式学习三年行动计划(2024-2026)》，现决定启动“光明区项目式学习教师挑战赛”。
              </span
            >
          </div>
          <div style="text-indent: 32px">
            <span
              >本次活动秉持“以赛促训，以赛兴研”的理念，构建了一系列由浅入深、循序渐进的教师项目式学习案例设计、实施与研究的任务链，旨在深刻触动并加速光明区义务教育及幼儿园教与学方式的变革步伐。在此过程中，我们致力于培育一支既拥有前瞻教育理念又具备卓越实践能力的项目式学习研究骨干教师队伍，他们将成为引领光明区项目式学习向更深层次、更广领域发展的中坚力量。通过此系列活动的持续推动，光明区的教育生态将焕发新的活力，项目式学习不仅将深深植根于日常教学实践之中，更将作为推动区域教育质量整体跃升的重要引擎，开启教育创新发展的新篇章。
              </span
            >
          </div>
        </div>
        <div class="center_title">
          <img src="../../../../assets/icon/race/infoBook.png" alt="" />
          <span>挑战赛安排</span>
        </div>
        <div class="center_detail">
          <!-- <div style="text-indent: 32px">
            <span
              >此次案例征集活动面向聚焦学生的学习、生活和社会的真实问题，以真实问题引发学生学习实践与问题解决的案例。申报项目包括四类，说明如下。</span
            >
          </div> -->
          <div>
            <span>第一阶段：线上报名与赛前赋能 </span>
          </div>
          <div>
            <span>（一）线上报名 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >1.参赛范围：深圳市光明区所有义务教育阶段学校和幼儿园。</span
            >
          </div>
          <div style="text-indent: 32px">
            <span
              >2.参赛形式：参赛学校须成立以校长（或园长）为组长的项目式学习挑战赛工作小组，同时组成由项目式学习骨干教师参与的3-5人的参赛小组。</span
            >
          </div>
          <div style="text-indent: 32px">
            <span
              >3.报名方式：10月8日前将报名表（附件2）发送至邮箱jkykcb@szgm.gov.cn。</span
            >
          </div>
          <div>
            <span>（二）赛前赋能 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >1.自主学习：参赛教师需深入研读项目式学习相关理论，结合教学实践进行自主学习。
              </span
            >
          </div>
          <div style="text-indent: 32px">
            <span
              >2.赛前培训：光明区教科院面向参赛教师进行两场项目式学习专题讲座，内容涵盖项目式学习的内涵、各要素理解、设计与实施的基本流程、典型案例分享等。</span
            >
          </div>
          <div style="text-indent: 32px">
            <span>第一场培训：面向义务教育阶段学校的参赛教师，时间为2024年10月11日8:30-17:30。
            </span>
          </div>
          <div style="text-indent: 32px">
            <span>第二场培训：面向幼儿园的参赛教师，时间为2024年10月12日8：30-17:30。
            </span>
          </div>
          <div>
            <span>第二阶段：项目式学习案例设计及评选 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >1.项目选题:可结合学科特点和本校（或园）学生实际，选择适合的项目主题，如学科项目、跨学科项目或活动项目。</span
            >
          </div>
          <div style="text-indent: 32px">
            <span
              >2.项目组队:每个项目小组教师成员不超过5人。</span
            >
          </div>
          <div style="text-indent: 32px">
            <span
              >参赛材料：提交项目式学习案例设计，内容不限字数，word及pdf格式材料各一份，材料命名：<span
                style="font-weight: bold"
                >学校名称+项目名称+设计。</span
                >电子版于2024年10月22日前发送至邮箱jkykcb@szgm.gov.cn。
             </span>
          </div>
          <div>
            <span>第三阶段：项目式学习案例实践与评选 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >1.启动项目实践;各参赛团队根据前期设计启动项目式学习案例实践。</span
            >
          </div>
          <div style="text-indent: 32px">
            <span
              >参赛材料：提交项目式学习案例实践材料，要求内容能反映团队设计研修、教师指导、学生活动过程，图文并茂，将展示材料及视频、图片原图压缩为一份压缩包文件，命名：<span style="font-weight: bold">学校名称+项目名称+实践案例。</span>电子版于2024年11月18日前发送至邮箱jkykcb@szgm.gov.cn。
              </span
            >
          </div>
          <div>
            <span>第四阶段：案例展示与颁奖 </span>
          </div>
          <div>
            <span>（一）案例展示 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >1.成果展示:根据案例实践的评审结果挑选部分项目成果参加光明区项目式现场展示会。
              </span
            >
          </div>
          <div style="text-indent: 32px">
            <span
              >2.分享展示：根据案例实践的评审结果和案例研究的需要，挑选18份案例参加展示活动，并邀请专家现场点评。案例展示的内容可以是从案例设计开始直至案例实践后的反思，也可以是案例中某个环节精彩片段的呈现。案例展示的形式可以是说课、场景再现等多种表现形式，时间10分钟。
              </span
            >
          </div>
          <div>
            <span>（二）颁奖仪式 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >教科院将根据案例设计、案例实践两个环节比赛总分排序为获奖团队颁发证书。案例展示与颁奖时间：2024年11月28日。              </span
            >
          </div>
        </div>
      </div>
      <div class="center_box" ref="box2">
        <div class="center_title">
          <img src="../../../../assets/icon/race/infoBook.png" alt="" />
          <span>比分及奖项设置</span>
        </div>
        <div class="center_detail">
          <div>
            <span>（一）各阶段比分设置 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >1.案例设计满分：30分，其中每篇案例满分10分，每所学校最多提交三篇案例。
            </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >2.案例实践满分：60分，其中每篇案例满分20分，每所学校最多提交三篇案例，且为案例设计阶段的案例。
            </span>
          </div>
          <div>
            <span>（二）奖项设置 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >区教科院将根据挑战赛各阶段评选结果，分别评选出挑战赛团体一、二、三等奖及优秀组织奖，以及案例设计奖、案例实践奖。并为以上获奖团队颁发荣誉证书。</span
            >
          </div>
        </div>
      </div>
      <div class="center_box" ref="box3">
        <div class="center_title">
          <img src="../../../../assets/icon/race/infoBook.png" alt="" />
          <span>其它附件</span>
        </div>
        <div class="center_detail">
          <div
            style="
              text-indent: 32px;
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: flex-start;
            "
          >
            <div>
              <div>附件：</div>
            </div>
            <div class="down">
              <div
                @click="
                  downloadFile(
                    'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E9%99%84%E4%BB%B61%EF%BC%9A2024%E5%B9%B4%E5%85%89%E6%98%8E%E5%8C%BA%E4%B9%89%E5%8A%A1%E6%95%99%E8%82%B2%E9%98%B6%E6%AE%B5%E5%92%8C%E5%B9%BC%E5%84%BF%E5%9B%AD%E9%A1%B9%E7%9B%AE%E5%BC%8F%E5%AD%A6%E4%B9%A0%E6%95%99%E5%B8%88%E6%8C%91%E6%88%98%E8%B5%9B%E6%B4%BB%E5%8A%A8%E6%96%B9%E6%A1%881728975470136.docx',
                    '附件1：2024年光明区义务教育阶段和幼儿园项目式学习教师挑战赛活动方案'
                  )
                "
              >
                1.附件1：2024年光明区义务教育阶段和幼儿园项目式学习教师挑战赛活动方案
              </div>
              <div
                @click="
                  downloadFile(
                    'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E9%99%84%E4%BB%B62%EF%BC%9A2024%E5%B9%B4%E5%85%89%E6%98%8E%E5%8C%BA%E9%A1%B9%E7%9B%AE%E5%BC%8F%E6%95%99%E5%B8%88%E6%8C%91%E6%88%98%E8%B5%9B%E6%8A%A5%E5%90%8D%E8%A1%A81728975473248.wps',
                    '附件2：2024年光明区项目式教师挑战赛报名表'
                  )
                "
              >
                2.附件2：2024年光明区项目式教师挑战赛报名表
              </div>
              <div
                @click="
                  downloadFile(
                    'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E9%99%84%E4%BB%B63%EF%BC%9A%E9%A1%B9%E7%9B%AE%E5%BC%8F%E5%AD%A6%E4%B9%A0%E6%A1%88%E4%BE%8B%E8%AE%BE%E8%AE%A1%E6%A0%BC%E5%BC%8F1728975476113.docx',
                    '附件3：项目式学习案例设计格式'
                  )
                "
              >
                3.附件3：项目式学习案例设计格式
              </div>
              <div
                @click="
                  downloadFile(
                    'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E9%99%84%E4%BB%B64%EF%BC%9A%E9%A1%B9%E7%9B%AE%E8%AE%BE%E8%AE%A1%E8%AF%84%E4%BB%B7%E9%87%8F%E8%A7%841728975479127.docx',
                    '附件4：项目设计评价量规'
                  )
                "
              >
                4.附件4：项目设计评价量规
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="center_detail">
          <div>
            <span>（一）报送内容 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >项目式学习活动案例报送内容主要反映学校或教师组织学生开展且已经完成的项目式学习的设计思路、活动过程与典型成果。报送材料由两部分组成。
            </span>
          </div>
          <div style="text-indent: 32px">
            <span>
              1.项目式学习方案设计。包括项目信息、项目简介、驱动问题与子问题、学习目标（核心概念界定）、预期学习成果、项目评价、项目活动设计等（见附件3）。
            </span>
          </div>
          <div style="text-indent: 32px">
            <span>
              2.项目式学习活动案例。对项目活动实施过程的完整描述，含不同阶段的实施过程、活动工具与支架开发、活动成果交流与展示、活动评价与反思等；以及支持以附件形式上传学生项目式学习的过程记录与成果作品（见附件4）。
            </span>
          </div>
          <div>
            <span>（二）报送方法及时间 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >1.报送名额。以各地级以上市为单位统一报送。广州、深圳报送案例总数各不超过40项，其他地市选送案例总数各不超过30项，每校每类别案例限报一项。华南师大附属中学、广东实验中学、华南师大附属小学、华南师大附属幼儿园每校限报2项。每项的作者不超过6人。
            </span>
          </div>
          <div style="text-indent: 32px">
            <span>
              2.名单提交。学校将案例上交给地级市，由地级市组织遴选后将联系人回执（见附件1）及推荐名单（见附件2）于2023年3月10日前发送至邮箱mubc@gdedu.gov.cn。
            </span>
          </div>
          <div style="text-indent: 32px">
            <span>
              3.案例上传。推荐案例直接在平台上传，提交截止日期2023年3月20日。填报者登陆广东省项目式学习案例征集活动中心https://www.zhjy.gdedu.gov.cn/pbl，根据平台的内容与提示进行填报、提交。案例上传提交事宜技术联系人：李老师，电话：13163711736。
            </span>
          </div>
        </div> -->
      </div>
      <!-- <div class="center_box" ref="box4">
        <div class="center_title">
          <img src="../../../../assets/icon/race/infoBook.png" alt="" />
          <span>时间安排</span>
        </div>
        <div class="center_detail">
          <div>
            <span>（一）提交阶段 </span>
          </div>
          <div style="text-indent: 32px">
            <span>（1）通过参与地市组织的活动提交案例。 </span>
          </div>
          <div style="text-indent: 32px">
            <span>
              （2）地市没有组织的，可自行通过在线方式提交。自通告发布之日起，可获取账号。
            </span>
          </div>
          <div>
            <span>（二）评审阶段 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >主办方广东省教育研究院将组织专家对提交的案例进行遴选，并于专家遴选后公示、公布最终结果。
            </span>
          </div>
        </div>
      </div> -->
      <!-- <div class="center_box" ref="box5">
        <div class="center_title">
          <img src="../../../../assets/icon/race/infoBook.png" alt="" />
          <span>其他事宜</span>
        </div>
        <div class="center_detail">
          <div style="text-indent: 32px">
            <span
              >本院为选出的优秀案例作者出具优秀案例证书，优秀案例将纳入广东省STEM教育资源平台并结集出版，供广大教师使用。
            </span>
          </div>
          <div style="text-indent: 32px">
            <span>
              凡在活动中发现违规违纪和学术不端行为的，除按有关规定处理外，将被列入不良教科研信用记录。如引起知识产权异议和纠纷，其责任由案例作者承担。
            </span>
          </div>
          <div style="text-indent: 32px">
            <span>
              请各地积极组织学校申报，相关材料登录广东省教育研究院网站（http://gdae.gdedu.gov.cn/）通知公告栏下载。如对本次案例征集有任何疑问请联系牟老师，电话020-83525147；黄老师，电话020-83344192；李老师，电话13163711736。
            </span>
          </div>
          <div
            style="
              text-indent: 32px;
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: flex-start;
            "
          >
            <div>
              <div>附件：</div>
            </div>
            <div class="down">
              <div
                @click="
                  downloadFile(
                    'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9C%B0%E7%BA%A7%E4%BB%A5%E4%B8%8A%E5%B8%82%E6%A1%88%E4%BE%8B%E6%8A%A5%E9%80%81%E5%B7%A5%E4%BD%9C%E8%81%94%E7%B3%BB%E4%BA%BA%E5%9B%9E%E6%89%A71673318894442.docx',
                    '地级以上市案例报送工作联系人回执'
                  )
                "
              >
                1.地级以上市案例报送工作联系人回执
              </div>
              <div
                @click="
                  downloadFile(
                    'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9C%B0%E7%BA%A7%E4%BB%A5%E4%B8%8A%E5%B8%82%E9%A1%B9%E7%9B%AE%E5%BC%8F%E5%AD%A6%E4%B9%A0%E6%A1%88%E4%BE%8B%E6%8E%A8%E8%8D%90%E5%90%8D%E5%8D%95%E4%B8%80%E8%A7%88%E8%A1%A81673319057663.docx',
                    '地级以上市项目式学习案例推荐名单一览表'
                  )
                "
              >
                2.地级以上市项目式学习案例推荐名单一览表
              </div>
              <div
                @click="
                  downloadFile(
                    'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E9%A1%B9%E7%9B%AE%E5%BC%8F%E5%AD%A6%E4%B9%A0%E6%B4%BB%E5%8A%A8%E6%96%B9%E6%A1%88%E5%8F%82%E8%80%83%E6%A8%A1%E6%9D%BF1673319485107.docx',
                    '项目式学习活动方案参考模板'
                  )
                "
              >
                3.项目式学习活动方案参考模板
              </div>
              <div
                @click="
                  downloadFile(
                    'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E9%A1%B9%E7%9B%AE%E5%BC%8F%E5%AD%A6%E4%B9%A0%E6%B4%BB%E5%8A%A8%E6%A1%88%E4%BE%8B%E5%8F%82%E8%80%83%E6%A8%A1%E6%9D%BF1673320045321.docx',
                    '项目式学习活动案例参考模板'
                  )
                "
              >
                4.项目式学习活动案例参考模板
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      atype: 1,
    };
  },
  computed: {
    top() {
      return 12 + (this.atype - 1) * 28 + "px";
    },
  },
  methods: {
    checkType(type) {
      this.atype = type;
      let _top = 0;

      for (var i = 1; i < type; i++) {
        _top += this.$refs["box" + i].offsetHeight;
      }
      this.$refs.box.scrollTop = type === 1 ? 0 : _top;
      console.log("1-------1", this.$refs["box" + 1].offsetHeight);
      console.log("2-------2", this.$refs["box" + 2].offsetHeight);
      console.log("3-------3", this.$refs["box" + 3].offsetHeight);
      console.log("4-------4", this.$refs["box" + 4].offsetHeight);
      console.log("5-------5", this.$refs["box" + 5].offsetHeight);
      console.log(_top);
    },
    downloadFile(url, n) {
      let _url = "";
      if (
        url.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
      ) {
        _url = url.split(
          "https://view.officeapps.live.com/op/view.aspx?src="
        )[1];
      } else {
        _url = url;
      }
      const x = new XMLHttpRequest();
      x.open("GET", _url, true);
      x.responseType = "blob";
      x.onload = function (e) {
        // const url = window.URL.createObjectURL(x.response);
        // const a = document.createElement("a");
        // a.href = url;
        // a.target = "_blank";
        // a.download = url;
        // a.click();
        // a.remove();
        let content = x.response;
        let elink = document.createElement("a");
        // elink.download = decodeURI(
        //   _url.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
        // );
        elink.download = n + "." + _url.split('.').pop();
        elink.style.display = "none";
        let blob = new Blob([content]);
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      };
      x.send();
    },
    allScrollTop(ev) {
      console.log(ev.target.scrollTop);
      const scrollTop = this.$refs["box"].scrollTop;
      const clientHeight = this.$refs["box"].clientHeight;
      const scrollHeight = this.$refs["box"].scrollHeight;

      for (var i = 5; i > 0; i--) {
        let _top = 0;

        for (var k = 1; k < i; k++) {
          _top += this.$refs["box" + k].offsetHeight;
        }
        if (
          i > 1 &&
          (Math.round(ev.target.scrollTop) >= _top ||
            Math.round(ev.target.scrollTop) + clientHeight >= scrollHeight)
        ) {
          this.atype = i;
          break;
        } else if (
          i == 1 &&
          Math.round(ev.target.scrollTop) < this.$refs["box" + i].offsetHeight
        ) {
          this.atype = 1;
        }
      }
    },
  },
};
</script>

<style scoped>
@media screen and (max-width: 1280px) {
  .center_content {
    height: 400px !important;
  }
}
.center_content {
  width: 100%;
  height: 100%;
}

.center_body {
  /* width: 70%; */
  margin: 0 auto 20px;
  height: 100%;
  overflow: auto;
  width: calc(100% - (200px * 2));
  box-shadow: inset 0px 14px 7px -14px #b9b9b9;
  padding-bottom: 20px;
  box-sizing: border-box;
}
.center_box {
  margin-top: 25px;
}
.center_title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.center_title img {
  margin-right: 5px;
  margin-top: -10px;
}
.center_title span {
  position: relative;
  height: 38px;
}
.center_title span::before {
  content: "";
  background-image: url("../../../../assets/icon/race/ttitle.png");
  position: absolute;
  width: 75px;
  height: 13px;
  background-size: 100% 100%;
  bottom: 0px;
  right: -2px;
}
.center_detail {
  display: flex;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
  flex-direction: column;
  margin-top: 20px;
  color: rgb(28, 28, 28);
  min-height: 200px;
}
.center_detail div {
  line-height: 1.5;
}
.center_detail div + div {
  margin-top: 15px;
}

.center_nav {
  position: absolute;
  left: 20px;
}

.center_nav div {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #c5c5c5;
  padding: 10px 0px 10px 20px;
}
.center_nav div img {
  width: 15px;
  position: absolute;
  left: -6px;
  transition: all 0.5s;
}
.center_nav div span {
  font-size: 14px;
  cursor: pointer;
  color: rgb(28, 28, 28);
}

.center_nav div .active {
  color: #e7b95a;
}
.center_nav div span + span {
  margin-top: 10px;
}
.down {
  margin-top: 0 !important;
}
.down > div {
  cursor: pointer;
}
.down > div:hover {
  color: blue;
  text-decoration: underline;
}
</style>