<!-- 报警统计 -->
<template>
    <div :id="id" class="chart" />
</template>

<script>
    import ChartBase from '@/components/Base/ChartsBase.js';
    import {
        ChartStyle,
    } from '@/common/const.js';
    import {
        getWarnColorByName,
        getWarnColor,
        sliceString
    } from '@/common/util.js';
    import echarts from 'echarts';

    export default {
        mixins: [ChartBase],
        methods: {
            // 自定义柱状
            beforeInit(echarts) {
                // 绘制正面
                const CubeLeft = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0
                    },
                    buildPath: function(ctx, shape) {
                        const xAxisPoint = shape.xAxisPoint;
                        const c0 = [shape.x + 15, shape.y]; // 右上角
                        const c1 = [shape.x - 15, shape.y]; // 左上角
                        const c2 = [xAxisPoint[0] - 15, xAxisPoint[1]]; // 左下角
                        const c3 = [xAxisPoint[0] + 15, xAxisPoint[1]]; // 右下角
                        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[
                            1]).closePath();
                    }
                })
                // 绘制右侧面
                const CubeRight = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0
                    },
                    buildPath: function(ctx, shape) {
                        const xAxisPoint = shape.xAxisPoint;
                        const c1 = [shape.x + 15, shape.y]; // 左上角
                        const c2 = [xAxisPoint[0] + 15, xAxisPoint[1]]; // 左下角
                        const c3 = [xAxisPoint[0] + 25, xAxisPoint[1] - 10]; // 右下角
                        const c4 = [shape.x + 25, shape.y - 10]; // 右上角
                        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[
                            1]).closePath();
                    }
                })
                // 绘制顶面
                const CubeTop = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0
                    },
                    buildPath: function(ctx, shape) {
                        const c1 = [shape.x + 15, shape.y]; // 右下角
                        const c2 = [shape.x + 25, shape.y - 10]; // 右上角
                        const c3 = [shape.x - 5, shape.y - 10]; // 左上角
                        const c4 = [shape.x - 15, shape.y]; // 左下角
                        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[
                            1]).closePath();
                    }
                })
                // 注册三个面图形
                echarts.graphic.registerShape('CubeLeft', CubeLeft)
                echarts.graphic.registerShape('CubeRight', CubeRight)
                echarts.graphic.registerShape('CubeTop', CubeTop)
            },
            setOptions(chartData) {
                if (!this.chart || !chartData) return;
                let option = {
                    tooltip: {
                      // formatter: params => {
                      //   if (!params.value) return '';
                      //   let str = params.value.toString();
                      //   return parseFloat(str.substr(0, str.length - 2));
                      // }
                    },
                    xAxis: {
                        type: 'category',
                        data: chartData.xAxis || chartData.xaxis,
                        axisLine: {
                            lineStyle: {
                                color: ChartStyle.axis.color,
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            fontSize: ChartStyle.axis.fontSize,
                            formatter(value, index) {
                                return sliceString(value, 6);
                            }
                        }
                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: ChartStyle.axis.color,
                            fontSize: ChartStyle.axis.fontSize
                        },
                        splitLine: {
                            lineStyle: {
                                color: ChartStyle.split.color,
                                type: 'dashed',
                                opacity: ChartStyle.split.opacity,
                            }
                        }
                    },
                    grid: {
                        top: '15%',
                        left: '2%',
                        right: '2%',
                        bottom: '1%',
                        containLabel: true
                    },
                    series: []
                };
                // 渐变颜色
                for (let i = 0, len = chartData.dataList.length; i < len; i++) {
                    const item = chartData.dataList[i];
                    option.series.push({
                        type: 'custom',
                        name: item.name,
                        data: item.value,
                        renderItem: (params, api) => {
                            const location = api.coord([api.value(0), api.value(1)]);
                            // const colors = getWarnColor(api.value(1).toString().substr(-2), 1);
                            const colors = getWarnColor(item.state[params.dataIndex], 1);
                            const shape = {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            }
                            const toTop = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: colors[1]
                            }, {
                                offset: 1,
                                color: colors[0]
                            }]);
                            const toBottom = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: colors[0]
                            }, {
                                offset: 1,
                                color: colors[1]
                            }]);
                            return {
                                type: 'group',
                                position: [-5, 0],
                                children: [{
                                    type: 'CubeLeft',
                                    shape,
                                    style: {
                                        fill: toTop
                                    }
                                }, {
                                    type: 'CubeRight',
                                    shape,
                                    style: {
                                        fill: toBottom
                                    }
                                }, {
                                    type: 'CubeTop',
                                    shape,
                                    style: {
                                        fill: toTop
                                    }
                                }]
                            }
                        },
                    })
                    option.series.push({
                        type: 'bar',
                        name: item.name,
                        data: item.value,
                        label: {
                            show: true,
                            position: 'top',
                            color: ChartStyle.label.color,
                            fontSize: ChartStyle.label.fontSize,
                            // formatter: params => {
                            //     if (!params.value) return '';
                            //     let str = params.value.toString();
                            //     return parseFloat(str.substr(0, str.length - 2));
                            // }
                        },
                        itemStyle: {
                            color: 'transparent'
                        },
                        barMaxWidth: 40
                    });
                }
                this.chart.setOption(option);
            },
            // setOptions(chartData) {
            //     if (!this.chart || !chartData) return;
            //     let option = {
            //         tooltip: {},
            //         legend: {
            //             bottom: 3,
            //             itemWidth: 10,
            //             itemHeight: 10,
            //             textStyle: {
            //                 color: ChartStyle.legend.color,
            //                 fontSize: ChartStyle.legend.fontSize,
            //                 padding: [2, 0, 0, 0]
            //             },
            //             icon: 'rect',
            //             selectedMode: false
            //         },
            //         color: chartData.dataList.map(i => getWarnColorByName(i.name)),
            //         xAxis: {
            //             type: 'category',
            //             data: chartData.xAxis || chartData.xaxis,
            //             axisLine: {
            //                 lineStyle: {
            //                     color: ChartStyle.axis.color,
            //                 }
            //             },
            //             axisTick: {
            //                 show: false
            //             },
            //             axisLabel: {
            //                 fontSize: ChartStyle.axis.fontSize
            //             }
            //         },
            //         yAxis: {
            //             axisLine: {
            //                 show: false
            //             },
            //             axisTick: {
            //                 show: false
            //             },
            //             axisLabel: {
            //                 color: ChartStyle.axis.color,
            //                 fontSize: ChartStyle.axis.fontSize
            //             },
            //             splitLine: {
            //                 lineStyle: {
            //                     color: ChartStyle.split.color,
            //                     type: 'dashed',
            //                     opacity: ChartStyle.split.opacity,
            //                 }
            //             }
            //         },
            //         grid: {
            //             top: '10%',
            //             left: '1%',
            //             right: '1%',
            //             bottom: '12%',
            //             containLabel: true
            //         },
            //         series: []
            //     };
            //     // 定义x轴偏移量
            //     let xPos = [];
            //     if (chartData.dataList.length == 3) {
            //         xPos = [-60, -8, 44];
            //     }
            //     for (let i = 0, len = chartData.dataList.length; i < len; i++) {
            //         const item = chartData.dataList[i];
            //         const colors = getWarnColorByName(item.name, 1); // 渐变颜色
            //         option.series.push({
            //             type: 'custom',
            //             name: item.name,
            //             data: item.value,
            //             renderItem: (params, api) => {
            //                 const location = api.coord([api.value(0), api.value(1)]);
            //                 const shape = {
            //                     api,
            //                     xValue: api.value(0),
            //                     yValue: api.value(1),
            //                     x: location[0],
            //                     y: location[1],
            //                     xAxisPoint: api.coord([api.value(0), 0])
            //                 }
            //                 const toTop = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                     offset: 0,
            //                     color: colors[1]
            //                 }, {
            //                     offset: 1,
            //                     color: colors[0]
            //                 }]);
            //                 const toBottom = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                     offset: 0,
            //                     color: colors[0]
            //                 }, {
            //                     offset: 1,
            //                     color: colors[1]
            //                 }]);
            //                 return {
            //                     type: 'group',
            //                     position: [xPos[i], 0],
            //                     children: [{
            //                         type: 'CubeLeft',
            //                         shape,
            //                         style: {
            //                             fill: toTop
            //                         }
            //                     }, {
            //                         type: 'CubeRight',
            //                         shape,
            //                         style: {
            //                             fill: toBottom
            //                         }
            //                     }, {
            //                         type: 'CubeTop',
            //                         shape,
            //                         style: {
            //                             fill: toTop
            //                         }
            //                     }]
            //                 }
            //             },
            //         })
            //         option.series.push({
            //             type: 'bar',
            //             name: item.name,
            //             data: item.value,
            //             label: {
            //                 show: true,
            //                 position: 'top',
            //                 color: ChartStyle.label.color,
            //                 fontSize: ChartStyle.label.fontSize
            //             },
            //             itemStyle: {
            //                 color: 'transparent'
            //             },
            //             barMaxWidth: 40
            //         });
            //     }
            //     this.chart.setOption(option);
            // },
        },
    };
</script>

<style lang="scss" scoped>
    .chart {
        width: 100%;
        height: 100%;
    }
</style>
