<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: '西区25、26、27、28、20、21、22、23脚手架搭设',
          startDate: '2024-05-06',
          duration: 28
        },
        {
          id: 2,
          text: '西区25、26、27、28、20、21、22、23外墙改造、门窗改造、坡屋面维修施工',
          startDate: '2024-05-29',
          duration: 52
        },
        {
          id: 3,
          text: '西区25、26、27、28、20、21、22、23脚手架拆除',
          startDate: '2024-07-04',
          duration: 20
        },
        {
          id: 4,
          text: '西区5庭院外网改造、道路结构层、路边石、步道板',
          startDate: '2024-05-28',
          duration: 15
        },
        {
          id: 5,
          text: '西区16、17、18、19、13、14、15、5脚手架搭设',
          startDate: '2024-07-12',
          duration: 26
        },
        {
          id: 6,
          text: '西区16、17、18、19、13、14、15、5外墙改造、门窗改造、坡屋面维修施工',
          startDate: '2024-07-22',
          duration: 48
        },
        {
          id: 7,
          text: '西区16、17、18、19、13、14、15、5脚手架拆除',
          startDate: '2024-08-26',
          duration: 20
        },
        {
          id: 8,
          text: '西区25、26、27、28、20、21、22、23庭院外网改造、道路结构层、路边石、步道板',
          startDate: '2024-07-16',
          duration: 46
        },
        {
          id: 9,
          text: '西区16、17、18、19、13、14、15庭院外网改造、道路结构层、路边石、步道板',
          startDate: '2024-09-01',
          duration: 35
        },
        {
          id: 10,
          text: '西区散水坡、踏步改造施工',
          startDate: '2024-09-10',
          duration: 30
        },
        {
          id: 11,
          text: '东区40、41、36、37、38、24、29脚手架搭设',
          startDate: '2024-05-06',
          duration: 20
        },
        {
          id: 12,
          text: '东区40、41、36、37、38、24、29外墙改造、门窗改造、坡屋面维修施工',
          startDate: '2024-05-30',
          duration: 52
        },
        {
          id: 13,
          text: '东区40、41、36、37、38、24、29脚手架拆除',
          startDate: '2024-07-07',
          duration: 24
        },
        {
          id: 14,
          text: '东区39庭院外网改造、道路结构层、路边石、步道板',
          startDate: '2024-06-20',
          duration: 30
        },
        {
          id: 15,
          text: '东区39、30、31、32、33，34、35脚手架搭设',
          startDate: '2024-07-01',
          duration: 31
        },
        {
          id: 16,
          text: '东区39、30、31、32、33、34、35外墙改造、门窗改造、坡屋面维修施工',
          startDate: '2024-07-11',
          duration: 50
        },
        {
          id: 17,
          text: '东区39、30、31、32、33、34、35脚手架拆除',
          startDate: '2024-08-15',
          duration: 25
        },
        {
          id: 18,
          text: '东区40、41、36、37、38、24、29庭院外网改造、道路结构层、路边石、步道板',
          startDate: '2024-07-06',
          duration: 54
        },
        {
          id: 19,
          text: '东区30、31、32、33、34、35庭院外网改造、道路结构层、路边石、步道板',
          startDate: '2024-08-28',
          duration: 46
        },
        {
          id: 20,
          text: '东区散水坡、踏步改造施工',
          startDate: '2024-09-19',
          duration: 37
        },
        {
          id: 21,
          text: '楼梯间室内改造',
          startDate: '2024-05-09',
          duration: 110
        },
        {
          id: 22,
          text: '电气改造',
          startDate: '2024-05-09',
          duration: 110
        },
        {
          id: 23,
          text: '道闸、大门、绿化、文体设施改造',
          startDate: '2024-08-27',
          duration: 30
        },
        {
          id: 24,
          text: '沥青混凝土面层',
          startDate: '2024-10-02',
          duration: 29
        },
        {
          id: 25,
          text: '卫生清理、零星收尾、竣工验收',
          startDate: '2024-11-01',
          duration: 15
        }
      ]
    }
  },

  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';
@import '@/assets/css/dhtmlxgantt.css';

.schedule {
  margin-top: px2rem(20);
  width: 100%;
  flex: 1;
  display: flex;
  padding: 10px 20px;
}
</style>
