<template>
    <div style="padding:10px;" v-loading="loading">
        <canvas :class="className" :style="{
            height: height, width: width
        }"></canvas>
    </div>
</template>

<script>
import Chart from '../../assets/languages/chart.js'

export default {
    name: '',
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: "350px"
        },
        chartData: {
            type: Object,
            required: true
        },
        loading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            chart: null,
            padding: "10px"
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    watch: {
        chartData: {
            deep: true,
            handler(val) {
                this.chartUpdata()
            }
        }
    },
    methods: {
        initChart() {
            let ctx = document.getElementsByClassName(this.className)
            this.chart = new Chart(ctx, this.setOptions(this.chartData))
        },
        setOptions({ names, data1, data2, data3 }) {
            // let setOption = ({
            //     tooltip: {
            //         trigger: 'axis',
            //         axisPointer: { // 坐标轴指示器，坐标轴触发有效
            //             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            //         }
            //     },
            //     legend: {
            //         show: true
            //     },
            //     dataZoom: [
            //         {
            //             type: 'inside',
            //             xAxisIndex: [0],
            //         },
            //         {
            //             type: 'slider',
            //             show: true,
            //             start: 0,
            //             end: 85,
            //             handleSize: 8
            //         },
            //     ],
            //     grid: {
            //         top: '15%',
            //         left: '2%',
            //         right: '2%',
            //         containLabel: true
            //     },
            //     xAxis: [{
            //         type: 'category',
            //         data: names,
            //         axisTick: {
            //             alignWithLabel: true
            //         }
            //     }],
            //     yAxis: [{
            //         type: 'value',
            //         axisTick: {
            //             show: false
            //         }
            //     }],
            //     series: [{
            //         name: '件数',
            //         type: 'bar',
            //         data: data1,
            //         barWidth: '10%',
            //         barGap: '0%',
            //         label: {
            //             show: true,
            //             position: 'top',
            //             fontSize: 14
            //         },
            //         animationDuration: 1000
            //     },
            //     {
            //         name: '票数',
            //         type: 'bar',
            //         data: data2,
            //         barWidth: '10%',
            //         barGap: '0%',
            //         label: {
            //             show: true,
            //             position: 'top',
            //             fontSize: 14
            //         },
            //         animationDuration: 1000
            //     },
            //     {
            //         name: '重量',
            //         type: 'bar',
            //         data: data3,
            //         barWidth: '10%',
            //         barGap: '0%',
            //         label: {
            //             show: true,
            //             position: 'top',
            //             fontSize: 14
            //         },
            //         animationDuration: 1000
            //     }]
            // })
            let setOption = {
                type: 'bar',
                data: {
                    labels: names,
                    datasets: [{
                        label: '件数',
                        data: data1,
                        backgroundColor: 'rgba(255, 99, 132, 1)',
                        stack: 'group1'
                    },
                    {
                        label: '票数',
                        data: data2,
                        backgroundColor: 'rgba(153, 102, 255, 1)',
                        stack: 'group2'
                    },
                    {
                        label: '重量',
                        data: data3,
                        backgroundColor: 'rgba(255, 205, 86, 1)',
                        stack: 'group3'
                    }]
                },
                options: {
                    events: [''],
                    hover: {
                        intersect: false,
                        animationDuration: 0
                    },
                    animation: {
                        duration: 500,
                        onComplete: (val) => {
                            let ctx = val.chart.ctx
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'bottom';
                            ctx.font = '14px \"Helvetica Neue\", Helvetica, Arial, sans-serif'
                            val.chart.data.datasets.forEach((dataset, i) => {
                                if (val.chart.isDatasetVisible(i)) {
                                    var meta = val.chart.getDatasetMeta(i);
                                    meta.data.forEach(function (bar, index) {
                                        var data = dataset.data[index];
                                        ctx.fillText(data, bar.x, bar.y - 5);
                                    });
                                }
                            });
                        }
                    },
                    legend: {
                        display: true
                    },
                    tooltips: {
                        enabled: false,
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            }
            return setOption
        },
        chartUpdata() {
            this.chart.data = {
                labels: this.chartData.names,
                datasets: [{
                    label: '件数',
                    data: this.chartData.data1,
                    backgroundColor: 'rgba(255, 99, 132, 1)',
                    stack: 'group1'
                },
                {
                    label: '票数',
                    data: this.chartData.data2,
                    backgroundColor: 'rgba(153, 102, 255, 1)',
                    stack: 'group2'
                },
                {
                    label: '重量',
                    data: this.chartData.data3,
                    backgroundColor: 'rgba(255, 205, 86, 1)',
                    stack: 'group3'
                }]
            }
            this.chart.update()
        }
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.destroy()
        this.chart = null
    }
}
</script>

<style>

</style>