// filename: gantt.vue
// author: liubin
// date: 2023 -09 - 25 14: 28: 12
// description: 甘特图


import * as echarts from 'echarts';

/**
 * 
 * @param {*} params 
 * @param {*} api 
 * 
 * https://echarts.apache.org/zh/option.html#series-custom.renderItem.arguments.params
 */
function renderItem(params, api) { }

export default class Gantt {
    constructor(el) {
        this.chart = echarts.init(el);
        let options = {
            series: [
                {
                    type: 'custom',
                    coordinateSystem: 'cartesian2d',
                    renderItem: renderItem,
                }
            ]
        }
        this.chart.setOption(options);
    }

    update(options) {
        this.chart.setOption(options);
    }

    resize() {
        // todo
    }

    destroy() {
        this.chart.dispose();
    }
}



var data = [];
var categories = ['设备1', '设备2', '设备3'];
var types = [
    { name: '运行', color: '#7b9ce1' },
    { name: '故障', color: '#bd6d6c' },
    { name: '停机', color: '#75d874' },
];
//   return new Date(new Date(timestamp).toLocaleDateString()).getTime()
// })(1691568181000))
function getStartTime(timestamp) {
    return new Date(new Date(timestamp).toLocaleDateString()).getTime()
}


data.push({
    name: 'running',
    value: [0, 1691568181000, 1691568181000 + 60 * 60 * 1000, 60],
    itemStyle: {
        normal: {
            color: types[0].color
        }
    }
})



function renderItem(params, api) {
    var categoryIndex = api.value(0);
    var start = api.coord([api.value(1), categoryIndex]);
    var end = api.coord([api.value(2), categoryIndex]);
    var height = api.size([0, 1])[1] * 0.8;
    var rectShape = echarts.graphic.clipRectByRect(
        {
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
        },
        {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
        }
    );
    return (
        rectShape && {
            type: 'rect',
            transition: ['shape'],
            shape: rectShape,
            style: api.style()
        }
    );
}

option = {
    tooltip: {
        // show: false,
        formatter: function (params) {
            return params.marker + params.name + ': ' + new Date(params.value[1]).toLocaleTimeString() + ' - ' + new Date(params.value[2]).toLocaleTimeString();
        }
    },
    // title: {
    //   text: 'Profile',
    //   left: 'center'
    // },
    // dataZoom: [
    //   {
    //     type: 'slider',
    //     filterMode: 'weakFilter',
    //     showDataShadow: false,
    //     top: 400,
    //     labelFormatter: ''
    //   },
    //   {
    //     type: 'inside',
    //     filterMode: 'weakFilter'
    //   }
    // ],
    grid: {
        height: 300
    },
    xAxis: {
        type: 'time',
        min: getStartTime(1691568181000),
        max: getStartTime(1691568181000 + 3600 * 24 * 1000),
        splitNumber: 10,
        // interval: 60*3600*1000,
        // scale: true,
        axisLabel: {
            // rotate: -15,
            formatter: function (val) {
                return new Date(val).toLocaleTimeString()
            }
        },
        axisTick: {
            show: true
        },
        splitLine: {
            show: false,
        }
    },
    yAxis: [{
        axisLine: {
            // show: false,
            lineStyle: {
                color: ''
            }
        },
        axisLabel: {
            fontSize: 14,
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: true
        },
        data: categories
    }, {
        axisLine: {
            // show: false,
            lineStyle: {
                color: ''
            }
        },
        data: []
    }],
    series: [
        {
            type: 'custom',
            renderItem: renderItem,
            itemStyle: {
                opacity: 0.8
            },
            encode: {
                x: [1, 2],
                y: 0
            },
            data: data
        }
    ]
};