<!--
/**
 * @fileoverview TaskList component
 * @license MIT
 * @author Rafal Pospiech <neuronet.io@gmail.com>
 * @package GanttElastic
 */
-->
<template>
  <div
    v-show="root.state.options.taskList.display"
    ref="taskListWrapper"
    :style="{
      ...root.style['task-list-wrapper'],
      width: '100%',
      height: '100%'
    }"
    class="gantt-elastic__task-list-wrapper"
  >
    <div
      ref="taskList"
      :style="{ ...root.style['task-list'] }"
      class="gantt-elastic__task-list"
    >
      <task-list-header />
      <div
        ref="taskListItems"
        :style="{ ...root.style['task-list-items'], height: '706px' }"
        class="gantt-elastic__task-list-items"
      >
        <task-list-item
          v-for="task in root.visibleTasks"
          :key="task.id"
          :task="task"
          :id="task.id"
        />
      </div>
    </div>
  </div>
</template>

<script>
import TaskListHeader from './TaskListHeader.vue'
import TaskListItem from './TaskListItem.vue'
import * as $ from 'jquery'
export default {
  name: 'TaskList',
  components: {
    TaskListHeader,
    TaskListItem
  },
  inject: ['root'],
  data() {
    return {}
  },

  /**
   * Mounted
   */
  mounted() {
    this.root.state.refs.taskListWrapper = this.$refs.taskListWrapper
    this.root.state.refs.taskList = this.$refs.taskList
    this.root.state.refs.taskListItems = this.$refs.taskListItems

    // 删除 gantt-elastic这个组件标题名字
    // $('.gantt-elastic__header-title--text')[0].style.display = 'none'

    // 添加左侧滚动监听
    const leftDoc = $('.gantt-elastic__task-list-container')
    leftDoc.on('mousewheel DOMMouseScroll', function(e) {
      var delta =
        (e.originalEvent.wheelDelta &&
          (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
        (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)) // firefox

      const doc = document.getElementsByClassName(
        'gantt-elastic__task-list-items'
      )[0]

      const doc2 = document.getElementsByClassName(
        'gantt-elastic__chart-graph'
      )[0]
      const doc3 = document.getElementsByClassName(
        'gantt-elastic__chart-scroll-container--vertical'
      )[0]
      const moveSize = 120
      if (delta > 0) {
        // 向上滚
        doc.scrollTop = (doc.scrollTop ? doc.scrollTop : 0) - moveSize
        doc2.scrollTop = (doc2.scrollTop ? doc2.scrollTop : 0) - moveSize
        doc3.scrollTop = (doc3.scrollTop ? doc3.scrollTop : 0) - moveSize
      } else if (delta < 0) {
        // 向下滚
        doc.scrollTop = (doc.scrollTop ? doc.scrollTop : 0) + moveSize
        doc2.scrollTop = (doc2.scrollTop ? doc2.scrollTop : 0) + moveSize
        doc3.scrollTop = (doc3.scrollTop ? doc3.scrollTop : 0) + moveSize
      }
      // console.log(doc.scrollTop);
      // console.log("左边在滚咯~");
    })
  }
}
</script>
