<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: '2023-09-20',
          duration: 15
        },
        {
          id: 2,
          text: '基坑支护工程',
          startDate: '2023-09-27',
          duration: 38
        },
        {
          id: 3,
          text: '基坑降水工程',
          startDate: '2023-09-30',
          duration: 38
        },
        {
          id: 4,
          text: '承台、底板挖土',
          startDate: '2023-09-27',
          duration: 15
        },
        {
          id: 5,
          text: '承台砖模',
          startDate: '2023-09-30',
          duration: 15
        },
        {
          id: 6,
          text: '试桩',
          startDate: '2023-10-01',
          duration: 15
        },
        {
          id: 7,
          text: '非地下室承台（梁）钢筋砼',
          startDate: '2023-10-02',
          duration: 15
        },
        {
          id: 8,
          text: '地下室底板防水',
          startDate: '2023-10-04',
          duration: 5
        },
        {
          id: 9,
          text: '地下室防水保护层',
          startDate: '2023-10-06',
          duration: 5
        },
        {
          id: 10,
          text: '地下室承台（梁）底板钢筋混凝土',
          startDate: '2023-10-08',
          duration: 10
        },
        {
          id: 11,
          text: '地下室墙、架空层边坎墙柱钢筋模板',
          startDate: '2023-10-10',
          duration: 15
        },
        {
          id: 12,
          text: '±0.00板模板、钢筋、墙柱砼',
          startDate: '2023-10-12',
          duration: 15
        },
        {
          id: 13,
          text: '地下室外墙防水',
          startDate: '2023-10-25',
          duration: 5
        },
        {
          id: 14,
          text: '地下室回填土',
          startDate: '2023-10-30',
          duration: 7
        },
        {
          id: 15,
          text: '越冬维护',
          startDate: '2024-03-18',
          duration: 41
        },
        {
          id: 16,
          text: '主体结构施工',
          startDate: '2024-03-18',
          duration: 41
        },
        {
          id: 17,
          text: '砌筑工程施工',
          startDate: '2024-04-23',
          duration: 18
        },
        {
          id: 18,
          text: '屋面工程',
          startDate: '2024-05-15',
          duration: 30
        },
        {
          id: 19,
          text: '门窗工程',
          startDate: '2024-05-20',
          duration: 41
        },
        {
          id: 20,
          text: '抹灰工程',
          startDate: '2024-05-25',
          duration: 15
        },
        {
          id: 21,
          text: '地面工程',
          startDate: '2024-06-01',
          duration: 7
        },
        {
          id: 22,
          text: '室内精装修工程',
          startDate: '2024-06-01',
          duration: 55
        },
        {
          id: 23,
          text: '外墙工程',
          startDate: '2024-06-01',
          duration: 45
        },
        {
          id: 24,
          text: '室外工程',
          startDate: '2024-06-15',
          duration: 35
        },
        {
          id: 25,
          text: '楼内专业配套工程',
          startDate: '2023-10-01',
          duration: 294
        },
        {
          id: 26,
          text: '清理保洁',
          startDate: '2024-07-26',
          duration: 6
        }
      ]
    }
  },

  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>
