<template>
  <!-- 时间间隔栏 -->
  <!-- <Barrier /> -->

  <scroll-view
    :lower-threshold="300"
    scroll-y="true"
    :upper-threshold="300"
    :scroll-into-view="viewId"
    @scroll="scroll"
    @scrolltolower="handleScrollBottom"
    @scrolltoupper="handleScrollTop"
    id="scroll"
  >
    <!-- 时间轴 -->
    <!-- <u-divider bg-color="#f3f4f6" class="pt-5" fontSize="14px" v-if="topEnd">到顶啦</u-divider> -->
    <TimeBox />
    <!-- <u-divider bg-color="#f3f4f6" class="pb-5" fontSize="14px" v-if="bottomEnd">到底啦</u-divider> -->
  </scroll-view>
</template>

<script>
// import Barrier from './component/Barrier.vue';
import { mapState, mapMutations, mapGetters } from 'vuex';
import TimeBox from './component/TimeBox.vue';
import mixin from '@/mixins/timeline';

export default {
  name: 'TimeLine',
  components: { TimeBox },
  mixins: [mixin],

  data() {
    return { top: 0 };
  },

  computed: {
    ...mapState('role', ['visibleRoles']),
    ...mapState('task', ['scrollTop', 'showTips', 'tasks', 'topEnd', 'bottomEnd', 'showSkeleton', 'timeNode', 'viewId']),
    ...mapGetters('task', ['timeGranularity']),
  },

  methods: {
    ...mapMutations('task', ['setScrollTop', 'setShrink', 'setUpTasks', 'setDownTasks', 'setViewId']),

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

    // 滚动到顶部
    async handleScrollTop() {
      if (!this.tasks || !this.tasks.length || this.showSkeleton) return;
      const startTime = this.tasks[0].planStart - 0;
      if ((this.tasks[0].plugins && this.tasks[0].plugins.length === 0) || this.topEnd) {
        // 没有数据时 自动加载数据
        console.warn('滚动到顶部没有数据时: ');
        const addTasks = this.setTime(startTime, true);
        this.setUpTasks(addTasks);
      } else {
        // 有数据时
        console.warn('滚动到顶部有数据时: ');
        const upQuery = {
          timeNode: startTime,
          queryType: 0,
          queryNum: 6,
        };
        await this.$emit('getTasks', upQuery);
      }
    },

    // 滚动到底部
    async handleScrollBottom() {
      if (!this.tasks || !this.tasks.length || this.showSkeleton) return;
      const { tasks, timeGranularity } = this;
      const startTime = tasks[tasks.length - 1].planStart - 0;
      if ((tasks[0].plugins && tasks[0].plugins.length === 0) || this.bottomEnd) {
        // 没有数据时 自动加载数据
        console.warn('滚动到底部没有数据时: ');
        const addTasks = this.setTime(startTime, false);
        this.setDownTasks(addTasks);
      } else {
        // 时间基准点=最后一个任务的开始时间+当前时间颗粒度
        console.warn('滚动到底部有数据时: ');
        const timeNode = this.$t.time.add(startTime, 1, timeGranularity).valueOf();
        const downQuery = {
          timeNode,
          queryType: 1,
          queryNum: 6,
        };
        await this.$emit('getTasks', downQuery);
      }
    },

    // 设置自动滚动位置
    setScrollPosition() {
      const { tasks, timeNode } = this;
      for (let i = 0; i < tasks.length; i++) {
        const item = tasks[i];
        const show = this.$t.time.isSame(+item.planStart, +timeNode, this.timeGranularity);
        // 如果storage里有timeNode,修改store里的timeNode
        const taskId = this.$t.storage.getStorageSync('taskId');
        // 清空storage
        if (taskId) {
          this.setViewId(`a${taskId}`);
          this.$t.storage.setStorageSync('taskId', '');
          return;
        }
        if (show) {
          this.setViewId(`a${item.id}`);
          return;
        }
      }
    },
  },
};
</script>
