<template>
    <div ref="ganttContainer"></div>
</template>
<script>
    import {gantt} from 'dhtmlx-gantt';
    export default {
        props: {
            tasks: {
                type: Object,
                default () {
                    return {
                        data: [], 
                        links: [],
                    }
                }
            },
            start_date:{
                type:String,
                default () {
                    return ''
                }
            },
            end_date:{
                type:String,
                default () {
                    return ''
                }
            },
        },
        mounted: function () {
            gantt.clearAll();// 清空之前的配置
            gantt.i18n.setLocale('cn'); // 设置中文
            gantt.config.date_format = "%Y-%m-%d";
            gantt.config.date_grid = "%Y/%m/%d";
            gantt.config.readonly = true; // 设置中文
            gantt.config.autosize = true;//自适应尺寸
            gantt.plugins({tooltip: true});
            gantt.config.bar_height = 20; //task高度
            // gantt.config.start_date = new Date(2023, 9, 1);
            // gantt.config.end_date = new Date(2023, 9, 10);
            //更改父项图标
            // gantt.templates.grid_folder = (item) => {
            //     return ""
            // }
            //更改子项图标
            // gantt.templates.grid_file = (item) => {
            //     return ""
            // }
            gantt.config.columns = [
                {name: 'number',label: '任务编号',tree: true,width: '*',align: 'left'},
                {name: 'cate',label: '规格型号', width: '70',align: 'center'},
                {name: 'count',label: '完成量',width: '50', align: 'center'}
            ];
            gantt.attachEvent('onGanttReady', function () {
                gantt.templates.tooltip_text = function (start, end, task) {
                    return task.number + 
                    '<br/>计划产量：' + task.count + 
                    '<br/>当日产量：' + task.count_real + 
                    '<br/>完成产量：' + task.count_ok + 
                    '<br/>开工时间：' + gantt.templates.tooltip_date_format(start) + 
                    '<br/>完工时间：' + gantt.templates.tooltip_date_format(start);
                };
            });
            //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
            // gantt.config.autosize = true;
            // gantt.config.open_split_tasks = true;

            // gantt.config.scale_unit = "day";
            // gantt.config.step = 1;
            // gantt.config.date_scale = " %Y/%m/%d";
            //时间轴样式
            var yearScaleCss = function () {
                return 'yearScaleStyle';
            };
            var monthScaleCss = function () {
                return 'monthScaleStyle';
            };
            gantt.config.scales = [
                { unit: 'year', step: 1, format: " %Y年", css: yearScaleCss },
                { unit: 'day', step: 1, format: " %m月%d日", css: monthScaleCss }
            ];
            gantt.config.duration_step = 1;
             // 初始化甘特图
            gantt.init(this.$refs.ganttContainer);
            gantt.parse(this.$props.tasks);
        }
    }
  </script>
  <style>
      @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
  </style>