<template>
  <dv-loading v-if="!showPage" style="width: 100%; height: 100%" class="the-loading">Loading...</dv-loading>
  <div v-else class="schedule">
    <div ref="ganttContainer" style="width: 100%"></div>
  </div>
</template>

<script>
import { gantt } from 'dhtmlx-gantt'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'

dayjs.extend(duration)
export default {
  name: 'schedule',

  data() {
    return {
      showPage: true,
      tasks: [
        {
          id: 1,
          text: '老训练馆山墙角钢加固施工',
          startDate: '2024-02-22',
          duration: 23
        },
        {
          id: 2,
          text: '耳房型钢加固施工作业',
          startDate: '2024-03-16',
          duration: 10
        },
        {
          id: 3,
          text: '电气管线、电缆、配电箱等拆除',
          startDate: '2024-03-26',
          duration: 20
        },
        {
          id: 4,
          text: '电线、电缆敷设',
          startDate: '2024-04-15',
          duration: 48
        },
        {
          id: 5,
          text: '灯具、用电设备安装',
          startDate: '2024-06-02',
          duration: 45
        },
        {
          id: 6,
          text: '供电系统调试',
          startDate: '2024-07-17',
          duration: 20
        },
        {
          id: 7,
          text: '耳房墙体加固工程(含地下部分施工)',
          startDate: '2024-03-26',
          duration: 51
        },
        {
          id: 8,
          text: '除湿机安装',
          startDate: '2024-05-16',
          duration: 20
        },
        {
          id: 9,
          text: '除湿管道、保温、系统调试',
          startDate: '2024-06-05',
          duration: 45
        },
        {
          id: 10,
          text: '热水机房管道及设备安装调试',
          startDate: '2024-05-16',
          duration: 46
        },
        {
          id: 11,
          text: '耳房饰面层施工(墙面、天棚吊顶)',
          startDate: '2024-05-16',
          duration: 30
        },
        {
          id: 12,
          text: '耳房地面工程(瓷砖、混凝土地面)',
          startDate: '2024-06-15',
          duration: 40
        },
        {
          id: 13,
          text: '通道墙面饰面层铲除',
          startDate: '2024-02-22',
          duration: 6
        },
        {
          id: 14,
          text: '冰场地面底板钢筋混凝土施工(含冰坝、排水沟)',
          startDate: '2024-02-28',
          duration: 31
        },
        {
          id: 15,
          text: '冰场地面防水施工(含冰坝、排水沟)',
          startDate: '2024-03-30',
          duration: 14
        },
        {
          id: 16,
          text: '综合布线配管敷设、线缆敷设',
          startDate: '2024-04-13',
          duration: 64
        },
        {
          id: 17,
          text: '设备安装调试(监控、出入8、计算机、体育专用照明等)',
          startDate: '2024-06-16',
          duration: 56
        },
        {
          id: 18,
          text: '通道地面回填及混凝土施工',
          startDate: '2024-04-13',
          duration: 30
        },
        {
          id: 19,
          text: '老馆墙面涂料面层施工',
          startDate: '2024-05-13',
          duration: 29
        },
        {
          id: 20,
          text: '窗口窗帘制作及安装工程',
          startDate: '2024-06-11',
          duration: 20
        },
        {
          id: 21,
          text: '采暖管道及散热器安装',
          startDate: '2024-07-01',
          duration: 32
        },
        {
          id: 22,
          text: '通道地面工程(自流平、防切割地胶)',
          startDate: '2024-08-02',
          duration: 20
        },
        {
          id: 23,
          text: '冰场地面土建部分施工(砂层、保温、精冰层施工)',
          startDate: '2024-04-13',
          duration: 46
        },
        {
          id: 24,
          text: '制冰、电气设备安装及调试',
          startDate: '2024-05-29',
          duration: 18
        },
        {
          id: 25,
          text: '机房管道安装及打压调试',
          startDate: '2024-06-16',
          duration: 30
        },
        {
          id: 26,
          text: '机房铝皮保温及系统制冰',
          startDate: '2024-07-16',
          duration: 20
        },
        {
          id: 27,
          text: '界墙安装工程',
          startDate: '2024-08-05',
          duration: 20
        },
        {
          id: 28,
          text: '单位工程验收',
          startDate: '2024-08-25',
          duration: 6
        },
        {
          id: 29,
          text: '承压层施工（M支架、、、管道焊接、打压、钢筋绑扎、混凝土）',
          startDate: '2024-05-29',
          duration: 44
        },
        {
          id: 30,
          text: '墙面腻子施工作业',
          startDate: '2024-03-02',
          duration: 20
        }
      ]
    }
  },

  methods: {},

  mounted() {
    gantt.i18n.setLocale('cn')
    gantt.config.min_column_width = 18
    gantt.config.readonly = true
    gantt.templates.task_text = function (start, end, task) {
      return ' '
    }
    gantt.config.columns = [
      { name: 'id', label: '编号', align: 'center', width: 25 },
      { name: 'text', label: '工作名称', width: 150 },
      { name: 'duration', label: '持续时间', align: 'center', width: 48 },
      { name: 'start_date', label: '开始时间', align: 'center', width: 80 },
      {
        name: 'endDate',
        label: '结束时间',
        align: 'center',
        width: 80,
        template: function (item) {
          return dayjs(item.startDate)
            .add(item.duration - 1, 'day')
            .format('YYYY-MM-DD')
        }
      },
      { name: 'add', width: 44, hide: true }
    ]
    var demo_tasks = {
      data: []
    }
    this.tasks.forEach(x => {
      var startDate = dayjs(x.startDate)
      var endDate = dayjs(x.startDate).add(x.duration - 1, 'day')
      x.progress = 0
      // console.log(dayjs().isAfter(endDate))
      if (dayjs().isAfter(startDate)) {
        if (dayjs().isAfter(endDate)) {
          x.progress = 1
        } else {
          var diffDay = dayjs().diff(x.startDate, 'day') + 1
          x.progress = diffDay / x.duration
        }
      }
      x.start_date = startDate.format('DD-MM-YYYY')
      // x.end_date = endDate.format('DD-MM-YYYY')
      demo_tasks.data.push(x)
    })

    gantt.config.lightbox.sections = [
      {
        name: 'description',
        height: 70,
        map_to: 'text',
        type: 'textarea',
        focus: true
      },
      {
        name: 'time',
        type: 'duration',
        map_to: 'auto'
      }
    ]

    gantt.config.scale_height = 50

    gantt.config.scales = [
      {
        unit: 'month',
        step: 1,
        format: '%Y-%m'
      },
      {
        unit: 'day',
        step: 1,
        format: '%j'
      }
    ]

    gantt.templates.progress_text = function (start, end, task) {
      return "<span style='text-align:left;'>" + Math.round(task.progress * 100) + '% </span>'
    }

    gantt.init(this.$refs.ganttContainer)
    gantt.parse(demo_tasks)
  }
}
</script>

<style lang="scss" scoped>
@import '~dhtmlx-gantt/codebase/dhtmlxgantt.css';
.schedule {
  margin-top: px2rem(20);
  width: 100%;
  flex: 1;
  display: flex;
  padding: 10px 20px;
}
</style>
