<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_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>
            <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>
            <span
              >各地市面向学校征集作品时间为2022年6月至8月中句,其间5月中下旬将开放平台支持地级市教育局为单位征集作品;9月10日前各地市向省完成优秀作品的推送。
            </span>
          </div>
          <div>
            <span>(二)征集要求 </span>
          </div>
          <div>
            <span
              >每位教师一个子项目限报1个作品,参加子项目不超过2个。各组织单位须严格按照项目要求、数量(见表1)报送作品,并对报送信息和作品的准确性、完整性负责,逾期提交的作品不纳入评审范围。</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>
      </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>
      </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>
      </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);
    },
    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>
.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;
}
.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;
}
</style>