<!--
 * @Author: aBin
 * @email: binbin0314@126.com
 * @Date: 2021-07-19 14:15:35
 * @LastEditors: aBin
 * @LastEditTime: 2021-07-20 14:22:11
-->
<template>
  <!-- 时间间隔栏 -->
  <!-- <Barrier /> -->
  <scroll-view
    :lower-threshold="300"
    :scrollTop="top"
    :scrollY="true"
    :upper-threshold="300"
    @scroll="scroll"
    @scrolltolower="handleScrollBottom"
    @scrolltoupper="handleScrollTop"
    id="scroll"
  >
    <!-- 时间轴 -->
    <TimeBox />
  </scroll-view>
</template>

<script>
// import Barrier from './component/Barrier.vue';
import { mapState, mapMutations } from 'vuex';
import TimeBox from './component/TimeBox.vue';
export default {
  name: 'TimeLine',
  components: { TimeBox },
  data() {
    return { top: 0 };
  },

  computed: mapState('home', ['scrollTop', 'showTips', 'visibleRoles', 'tasks']),

  mounted() {
    // 设置默认基准点
    // let tasksHeight = 0;
    // const scrollHeight = document.getElementById('scroll').clientHeight;
    // if (this.visibleRoles && this.visibleRoles.length) {
    //   for (let i = 0; i < 3; i++) {
    //     tasksHeight += this.visibleRoles[i].panel.height - 0 + 42;
    //   }
    //   this.top = tasksHeight - scrollHeight / 2;
    // }
    // console.log('this.top: ', this.top);
  },

  methods: {
    ...mapMutations('home', ['setScrollTop', 'setShrink', 'setRoleId']),

    // 滚动
    scroll(e) {
      this.top = e.detail.scrollTop;
      this.setShrink(this.top > this.scrollTop);
      this.setScrollTop(this.top);
    },

    // 滚动到顶部
    handleScrollTop() {
      console.log('滚动到顶部');
      this.$emit('getTasks', 0);
    },

    // 滚动到底部
    handleScrollBottom() {
      console.log('滚动到底部');
      this.$emit('getTasks', 0);
    },

    // 设置基准点
    setDatumPoint() {
      const { tasks } = this;
      if (tasks && tasks.length) {
        let tasksHeight = 0;
        const scrollHeight = document.getElementById('scroll').clientHeight;
        for (let i = 0; i < 3; i++) {
          tasksHeight += +tasks[i].panel.height + 42;
        }
        this.top = tasksHeight - scrollHeight / 2;
      }
    },
  },
};
</script>
