<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
        >
        <span @click="checkType(5)" :class="{ active: atype == 5 }"
          >其他事宜</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
              >为贯彻落实《中共中央
              国务院关于深化教育改革全面提高义务教育质量的意见》，推进义务教育课程方案和课程标准（2022年版）落地实施，进一步深化教学改革，探索大单元、主题化、项目式学习等综合性教学方式，将立德树人根本任务落实到具体教育教学活动中，总结我省项目式学习活动成果，宣传推广项目式学习典型经验，决定组织中小学项目式学习案例征集活动。有关事项如下。</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 style="text-indent: 32px">
            <span
              >从地方特色、优秀传统文化（物质与非物质文化）出发，学生通过资料搜集、调查采访、分析探究、设计制作、宣传推介等活动，对项目的文化起源、价值功用、历史沿革、艺术设计、现代传承创造与创新等进行深入学习探究的活动案例。</span
            >
          </div>
          <div>
            <span> (二)“工程设计”类项目式学习案例 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >以工程项目为载体，学生综合运用科学、技术、数学、工程等多学科知识和技能，经历调查研究、定义需求、方案设计、可行性分析、原型设计、测试与迭代、产品设计等流程，以工程设计作品来解决问题的活动案例。</span
            >
          </div>
          <div>
            <span> (三)“学科主题探究”类项目式学习案例 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >基于学生在学科学习和生活中的真实问题而开展的学科探究，围绕学科核心概念和核心素养，建立学科知识与真实情境中问题解决的关联，学生经历完整的运用学科知识、概念、策略去学以致用解决真实问题的学习案例。</span
            >
          </div>
          <div>
            <span> (四)“跨学科主题探究”类项目式学习案例 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >选取两门及以上学科的枢纽式、节点性大概念，形成综合性主题和主干知识内容，进行问题化、项目式学习任务设计，根据问题解决和探究学习过程的需要，重塑学科知识和技能结构，引导开展自主、合作、探究学习，促进深度学习，提高综合运用多学科知识分析问题和解决问题的能力，发展跨学科核心素养的学习案例。</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
              >围绕义务教育课程方案与课程标准（2022版）培养要求，依据学生终身发展与社会发展需要，重视学生的正确价值观念、必备品格与关键能力培育，培养学生的创新精神和实践能力。
            </span>
          </div>
          <div>
            <span>(二)注重过程记录与评价 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >注重学生在项目问题解决中的过程性数据，包括学生的日志、记录、文稿等，生成学生在项目进程中的真实记录。依据项目的过程性证据反馈学生的学习进展，依据学生项目记录生成学生的客观评价。</span
            >
          </div>
          <div>
            <span>(三)注重真实问题解决 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >项目式学习以学生探究性、自主性的学习任务为引导，加强知识学习与学生经验、现实生活、社会实践之间的联系，注重真实情境的创设，学生做中学、用中学、创中学，增强认识真实世界、解决真实问题的能力。</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 style="text-indent: 32px">
            <span
              >项目式学习活动案例报送内容主要反映学校或教师组织学生开展且已经完成的项目式学习的设计思路、活动过程与典型成果。报送材料由两部分组成。
            </span>
          </div>
          <div style="text-indent: 32px">
            <span>
              1.项目式学习方案设计。包括项目信息、项目简介、驱动问题与子问题、学习目标（核心概念界定）、预期学习成果、项目评价、项目活动设计等。
            </span>
          </div>
          <div style="text-indent: 32px">
            <span>
              2.项目式学习活动案例。对项目活动实施过程的完整描述，含不同阶段的实施过程、活动工具与支架开发、活动成果交流与展示、活动评价与反思等；以及支持以附件形式上传学生项目式学习的过程记录与成果作品（见附件2）。
            </span>
          </div>
          <div>
            <span> (二)报送方法 </span>
          </div>
          <div style="text-indent: 32px">
            <span
              >1.报送名额。以各地级以上市为单位统一报送。广州、深圳报送案例总数各不超过80项，其他地市选送案例总数各不超过60项，每校每类别案例限报一项。华南师大附属中学、广东实验中学、华南师大附属小学每校限报4项。每项的作者不超过6人。
            </span>
          </div>
          <div style="text-indent: 32px">
            <span>
              2.报送方式。填报者登陆广东省项目式学习案例征集活动中心（见附件5），根据平台的内容与提示进行填报。
            </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 style="text-indent: 32px">
            <span> 提交阶段截止xxxx年xx月xx日。 </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/）通知公告栏下载。如对本次案例征集有任何疑问，可发送邮件至gdstem2019@126.com，或联系电话020-83344192。
            </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/%E9%99%84%E4%BB%B611670570711020.docx',
                    '地级以上市案例报送工作联系人回执'
                  )
                "
              >
                1.地级以上市案例报送工作联系人回执
              </div>
              <div
                @click="
                  downloadFile(
                    'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E9%99%84%E4%BB%B611670572187326.docx',
                    '地级以上市项目式学习案例推荐名单一览表'
                  )
                "
              >
                2.地级以上市项目式学习案例推荐名单一览表
              </div>
              <div
                @click="
                  downloadFile(
                    'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E9%99%84%E4%BB%B611670572460682.docx',
                    '项目式学习活动方案参考模板'
                  )
                "
              >
                3.项目式学习活动方案参考模板
              </div>
              <div
                @click="
                  downloadFile(
                    'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E9%99%84%E4%BB%B611670572614832.docx',
                    '项目式学习活动案例参考模板'
                  )
                "
              >
                4.项目式学习活动案例参考模板
              </div>
              <div
                @click="
                  downloadFile(
                    'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/2022_%E5%85%B3%E4%BA%8E%E5%BE%81%E9%9B%86%E5%B9%BF%E4%B8%9C%E7%9C%81%E4%B8%AD%E5%B0%8F%E5%AD%A6%E9%A1%B9%E7%9B%AE%E5%BC%8F%E5%AD%A6%E4%B9%A0%E6%A1%88%E4%BE%8B%E7%9A%84%E5%87%BD202212011670826525002.docx',
                    '其他'
                  )
                "
              >
                5.其他
              </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 {
  font-size: 19px;
  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>