<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>各中小学、幼儿园：</span>
          </div>
          <div style="text-indent: 32px">
            <span
              >为推进盐田教育高质量发展，进一步落实《让学习更真实地发生——深圳市盐田区面向未来教育的学习方式变革行动计划》《盐田区基于课程重构的项目式学习2.0建设方案》等文件精神，积极吸纳前四届“美好盐田”项目式学习成果展评活动的成功经验，总结提升盐田区项目式学习的有效经验。经研究，拟定于2023年9月-2024年6月期间开展第五届“美好盐田”项目式学习课程设计暨成果展示评比活动。本次评比分学科和活动两大类，具体通知如下。</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 style="font-weight: bold">一、学科类项目式学习案例 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >各中学和小学老师根据各学科课程标准的要求，以核心素养为导向，组成学科或跨学科的合作团队，参考深圳市陈尚宝教育科研专家工作室研发的学科项目式学习设计流程，以本学科课程内容为主干，运用并整合其他学科的知识与方法，采用大单元教学、跨学科主题学习、项目化教学等创新形式，设计开发基于学科的项目式学习案例。</span
            >
          </div>
          <div>
            <span style="font-weight: bold">二、活动类项目式学习案例 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >各幼儿园、小学和中学以年级为单位，结合盐田区域特色资源，参考“美好盐田”总项目主题，强调真实生活问题的解决，根据盐田区项目式学习的3SE模型，开发并实施综合性的跨学科项目式学习案例。</span
            >
          </div>
          <div style="text-indent: 32px; text-align: center">
            <span>表1 “美好盐田”总项目主题参考</span>
          </div>
          <div>
            <table>
              <tr>
                <th>序号</th>
                <th>类别</th>
                <th>参考主题</th>
              </tr>
              <tr>
                <td>1</td>
                <td>人文盐田</td>
                <td>
                  1.中英街；2.沙头角鱼灯舞；3.疍家文化；4.梅沙村落；5.盐田海洋文学；6.钱币收藏馆；7.灯塔图书馆；8.盐田图书馆；9.盐田地名
                </td>
              </tr>
              <tr>
                <td>2</td>
                <td>山海盐田</td>
                <td>
                  1.梧桐山自然博物；2.盐田河；3.沙头角河；4.梅沙弯地质；5.茶溪谷；6.台风天气；7.海洋生物；8.半山公园带；9.海山公园；
                </td>
              </tr>
              <tr>
                <td>3</td>
                <td>交通盐田</td>
                <td>
                  1.盐田港智能灯塔；2.盐田港智能物流；3.盐田港立体交通；4.船的构造；5.盐田港货柜车；6.盐田立体化交通设计；7.盐田区绿道优化；8.盐田区水上交通；9.盐田区地铁文化
                </td>
              </tr>
              <tr>
                <td>4</td>
                <td>创意盐田</td>
                <td>
                  1.认识基因密码；2.认识珠宝；3.中英街旅游创意设计；4.大梅沙创意标识设计；5.沙头角海滨栈道美化设计；6.田心菜市场优化设计；7.海鲜街创意设计；8.沙头角隧道口创意标识设计；9.垃圾分类
                </td>
              </tr>
            </table>
          </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
              >课程设计评比安排在2023年12月中下旬，成果展示安排在2024年5月中下旬。
            </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>
            <span
              >本次成果展评，分两大阶段，分别为课程设计和成果展示，具体为：
            </span>
          </div>
          <div>
            <span>（一）课程设计评比 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >原则上各校（园）根据实际情况，活动类项目每校（园）至少提交1篇课程设计（鼓励多报）；学科类项目各校可根据实际尽量发动各学科老师积极参加（数量和学科均不限）。参评设计稿均要根据附件1提供的模板完成课程设计撰写，于12月22日前将课程设计电子版发39810655@qq.com,纸质版一式五份送区教科院216。教科院将组织专家进行评选，从中精选优质课程案例进入实施阶段的指导与辅助。
            </span>
          </div>
          <div>
            <span>（一）成果展示评比 </span>
          </div>
          <div style="text-indent: 32px">
            <span>1.学科类 </span>
          </div>
          <div style="text-indent: 64px">
            <span
              >学科类项目将实施过程进行相应的KT版展示即可，不用舞台展示。</span
            >
          </div>
          <div style="text-indent: 32px">
            <span>2.活动类 </span>
          </div>
          <div style="text-indent: 64px">
            <span
              >各校（园）根据本探究主题研究成果的实际，完成课程案例实施的撰写，重点要体现课程概况（课程背景、课程简介、课程目标）、课程实施过程（建议重点体现3SE模型）、学生作品、反思等部分，并选择合适的形式进行展示。展示时间为10分钟以内，并根据参展案例情况，评出相应等次。</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
            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%20%E7%BE%8E%E5%A5%BD%E7%9B%90%E7%94%B0%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1%E6%A8%A1%E6%9D%BF1700466065546.docx',
                    '美好盐田课程设计模板'
                  )
                "
              >
                1.美好盐田课程设计模板
              </div>
              <div
                @click="
                  downloadFile(
                    'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E9%99%84%E4%BB%B62%20%E7%AC%AC%E4%BA%94%E5%B1%8A%E7%9B%90%E7%94%B0%E5%8C%BA%E2%80%9C%E7%BE%8E%E5%A5%BD%E7%9B%90%E7%94%B0%E2%80%9D%E9%A1%B9%E7%9B%AE%E5%BC%8F%E5%AD%A6%E4%B9%A0%E5%B1%95%E8%AF%84%E8%AF%84%E5%88%86%E6%A0%87%E5%87%86%E5%8F%82%E8%80%831700466074910.docx',
                    '第五届盐田区“美好盐田”项目式学习展评评分标准参考'
                  )
                "
              >
                2.第五届盐田区“美好盐田”项目式学习展评评分标准参考
              </div>
            </div>
          </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 + ".docx";
        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;
}

table {
  border-collapse: collapse;
  width: 50%;
  margin: 0 auto;
}

th {
  min-width: 70px;
  text-align: center;
}

th,
td {
  padding: 8px;
  border: 1px solid black;
}

tr > td:not(:last-child) {
  text-align: center;
}
</style>