<template>
    <div class="chart" :id="id"></div>
</template>

<script>
    import util from "@/helper/util.js";
    import partten from "@/helper/partten.js";
    import * as echarts from "echarts";

    export default {
        name: "multiple-bar-chart",
        componentName: "multiple-bar-chart",
        props: {
            width: {
                type: String,
                default: "100%",
            },
            height: {
                type: String,
                default: "800px",
            },
            // 传入数据
            bardata: {
                type: Object,
                default: () => {
                    return {
                        area: [
                            "风场1",
                            "风场2",
                            "风场3",
                            "风场4",
                            "风场5",
                            "风场6",
                            "风场7",
                            "风场8",
                            "风场9",
                        ],
                        legend: [
                            "实际电量",
                            "计划检修损失",
                            "非计划检修损失",
                            "限电损失",
                            "受累损失",
                            "性能损失",
                        ],
                        data: [
                            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
                            [320, 302, 301, 334, 390, 330, 320, 100, 50],
                            [320, 302, 301, 334, 390, 330, 320, 100, 50],
                            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
                            [320, 302, 301, 334, 390, 330, 320, 100, 50],
                            [320, 302, 301, 334, 390, 330, 320, 100, 50],
                            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
                            [320, 302, 301, 334, 390, 330, 320, 100, 50],
                        ],
                    };
                },
            },
            lineData: {
                type: Array,
                default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
            },
            lineName: {
                type: String,
                default: "损失电量",
            },
            // 单位
            units: {
                type: Array,
                default: () => ["(万KWh)", "(风速)"],
            },
            // 显示 legend
            showLegend: {
                type: Boolean,
                default: true,
            },
            // 颜色
            color: {
                type: Array,
                default: () => ["#323E6F", "#e17e23", "#ba3237", "#c531c7", "#ffffff", "#EDEB2F"],
            },
            // 每页显示个数
            pageSize: {
                type: Number,
                default: 20,
            },
        },
        data() {
            return {
                id: "",
                chart: null,
                themeName: 'light',
                areaData: [],
            };
        },
        methods: {
            initChart() {
                let chart = echarts.init(this.$el);
                this.chart = chart
                let option = {
                    color: this.color,
                    grid: {
                        left: 40,
                        right: 40,
                        bottom: 16,
                        top: 16,
                        containLabel: true,
                    },
                    legend: {
                        show: this.showLegend,
                        data: this.bardata.legend,
                        right: 56,
                        icon: "ract",
                        itemWidth: 8,
                        itemHeight: 8,
                        inactiveColor: this.themeName === "dark" ?
                            partten.getColor("gray") :
                            "#838383",
                        textStyle: {
                            color: this.themeName === "dark" ?
                                partten.getColor("grayl") :
                                "#838383",
                            fontSize: 12,
                        },
                    },
                    tooltip: {
                        trigger: "axis",
                        backgroundColor: true ?
                            "rgba(255,255,255,0.9)" :
                            "rgba(255,255,255,0.9)",
                        borderColor: this.themeName === "dark" ?
                            partten.getColor("gray") :
                            "#838383",
                        textStyle: {
                            color: this.themeName === "dark" ? "#fff" : "#838383",
                            fontSize: util.vh(16),
                        },
                    },
                    dataZoom: [{
                            type: "inside",
                            start: 0,
                            end: this.end,
                            yAxisIndex: [0],
                        },
                        {
                            start: 0,
                            end: this.end,
                            top: 20,
                            bottom: 40,
                            yAxisIndex: [0],
                            backgroundColor: "transparent",
                            // handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
                            handleStyle: {
                                color: this.themeName === "dark" ?
                                    partten.getColor("green") :
                                    partten.getColor("blue"),
                            },
                            moveHandleSize: 0,
                            // dataBackground: {
                            //   lineStyle: {
                            //     color: partten.getColor("gray"),
                            //   },
                            //   areaStyle: {
                            //     color: partten.getColor("gray"),
                            //   },
                            // },
                            // selectedDataBackground: {
                            //   lineStyle: {
                            //     color: partten.getColor("yellow"),
                            //   },
                            //   areaStyle: {
                            //     color: partten.getColor("yellow"),
                            //   },
                            // },
                            fillerColor: "transparent",
                            textStyle: {
                                color: this.themeName === "dark" ?
                                    partten.getColor("grayl") :
                                    "#838383",
                            },
                            borderColor: this.themeName === "dark" ?
                                partten.getColor("gray") :
                                "#838383",
                            brushSelect: false,
                        },
                    ],
                    yAxis: [{
                        type: "category",
                        axisLabel: {
                            color: this.themeName === "dark" ?
                                partten.getColor("gray") :
                                "#838383",
                        },
                        inverse: true,
                        // minInterval: 10,
                        // maxInterval: 10,
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        data: this.areaData,
                    }, ],
                    xAxis: [{
                            type: "value",
                            name: '万kWh',
                            axisLabel: {
                                color: this.themeName === "dark" ?
                                    partten.getColor("gray") :
                                    "#838383",
                                // formatter: "{value}万kWh",
                            },
                            axisLine: {
                                type: "dashed",
                                lineStyle: {
                                    color: this.themeName === "dark" ?
                                        partten.getColor("gray") :
                                        "#838383",
                                },
                                width: 5,
                            },
                            axisTick: {
                                show: false,
                            },
                            splitLine: {
                                lineStyle: {
                                    type: "dashed",
                                    dashOffset: 10,
                                    color: this.themeName === "dark" ? "#5a6162" : "#838383" + 80,
                                },
                            },
                        },
                        {
                            type: "value",
                            name: "",
                            axisLabel: {
                                show: false,
                                // formatter: "{value}万kWh",
                                // color: partten.getColor("gray"),
                            },
                            axisLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                            },
                        },
                    ],
                    series: [],
                };

                if (this.bardata && this.bardata.legend)
                    // bar data
                    for (var i = 0; i < this.bardata.legend.length; i++) {
                        option.series.push({
                            name: this.bardata.legend[i],
                            type: "bar",
                            stack: "总量",
                            barWidth: 16,
                            label: {
                                show: false,
                                position: "insideRight",
                            },
                            data: this.bardata.data[i],
                        });
                    }

                // line data
                if (this.lineData.length > 0) {
                    option.series.push({
                        name: this.lineName,
                        type: "line",
                        data: this.lineData,
                        smooth: false, //平滑展示
                        xAxisIndex: 1,
                        lineStyle: {
                            color: this.themeName === "dark" ?
                                partten.getColor("green") :
                                partten.getColor("blue"),
                        },
                        itemStyle: {
                            color: this.themeName === "dark" ?
                                partten.getColor("green") :
                                partten.getColor("blue"),
                        },
                    });
                }
                chart.setOption(option);
                chart.resize()
            },
        },
        created() {
            this.id = "pie-chart-" + util.newGUID();
            if (this.bardata.area && this.bardata.area.length < this.pageSize) {
                this.areaData = this.bardata.area;
                for (let i = this.bardata.area.length; i <= this.pageSize; i++) {
                    this.areaData.push("");
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.$el.style.width = this.width;
                this.$el.style.height = this.height;
                this.initChart();
            });
        },
        updated() {
            this.$nextTick(() => {
                this.initChart();
            });
        },
        beforeUpdate() {
            this.areaData = this.bardata.area;
        },
        beforeUpdate() {
            this.areaData = this.bardata.area;
        },
        activated() {
            this.$nextTick(() => {
                this.$el.style.width = this.width;
                this.$el.style.height = this.height;
                this.initChart();
            });
        },
        computed: {
            collapse() {
                return this.$store.state.collapse
            },
            legend() {
                return this.bardata.legend;
            },
            end() {
                var result = 20;
                if (this.areaData) {
                    result = parseInt((this.pageSize / this.areaData.length) * 100);
                }
                return result;
            },
        },
        watch: {
            collapse(val) {
                if (this.chart) {
                    setTimeout(() => {
                        this.chart.resize()
                    }, 300)
                }
            },
            bardata(val) {
                if (val.area && val.area.length < this.pageSize) {
                    this.areaData = val.area;
                    for (let i = val.area.length; i <= this.pageSize; i++) {
                        this.areaData.push("");
                    }
                }
            },
        },
    };
</script>

<style lang="less" scoped>
    .chart {
        width: 100%;
        height: 100%;
        display: inline-block;
    }
</style>