<template>
    <!-- 均值图 -->
    <!-- <div style="width: 100%;margin-top: 5px;"> -->
    <!-- <div class="tableTitle">
            <div>
                <span
                    style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
                ></span>
                <span style="font-size:18px;">{{ componentName + '-'  + chartName + '-' + '均值图'+'-'+status }}</span>
            </div>
        </div> -->
    <div :id="echartsRef" ref="barChart" style="width: 705px; height: 300px"></div>
    <!-- </div> -->
</template>

<script>
export default {
    name: 'barChart', //均值图图组件
    props: {
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        typeValue: {
            type: Object
        },
        // 组件名称
        componentName: {
            type: String
        },
        chartName: {
            type: String
        },
        status: {
            type: String
        },
        intersectionName: {
            type: Array,
            default() {
                return [];
            }
        },
        chatShowType: {
            type: String
        },
        echartsRef: {
            type: String
        },
        dataList: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            max: [],
            min: [],
            med: [],
            avg: []
        };
    },
    methods: {
        initEcharts() {
            this.max = [];
            this.min = [];
            this.med = [];
            this.avg = [];
            // console.log("均值图",arr)
            // let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
            // if (myChart == null) {
            //     myChart = this.$echarts.init(this.$refs.barChart);
            // }
            // this.dataProcessing(this.dataList);
            if (this.dataList.length > 10) {
                this.dataList = this.dataList.slice(-10);
            }
            for (let i = 0; i < this.dataList.length; i++) {
                if (this.dataList[i].max) {
                    this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
                } else {
                    this.max.push(0);
                }

                if (this.dataList[i].min) {
                    this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
                } else {
                    this.min.push(0);
                }

                if (this.dataList[i].med) {
                    this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
                } else {
                    this.med.push(0);
                }

                if (this.dataList[i].avg) {
                    this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
                } else {
                    this.avg.push(0);
                }

                // this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
                // this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
                // this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
                // this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
            }
            let maxData = '';
            let minData = '';
            let medData = '';
            let avgData = '';
            for (let i = 0; i < this.max.length; i++) {
                maxData = this.max[i];
            }
            for (let i = 0; i < this.min.length; i++) {
                minData = this.min[i];
            }
            for (let i = 0; i < this.med.length; i++) {
                medData = this.med[i];
            }
            for (let i = 0; i < this.avg.length; i++) {
                avgData = this.avg[i];
            }
            let myChart = this.chart;
            let chartData = [{ stage: '', number: 40 }];
            let option = {
                tooltip: {},
                color: ['#0EECE4'],
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '10%',
                    top: '15%',
                    z: 22
                },
                xAxis: [
                    {
                        type: 'category',
                        gridIndex: 0,
                        data: chartData.map((item) => item.stage),
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    }
                ],
                yAxis: {
                    type: 'value',

                    splitArea: { show: false },
                    gridIndex: 0,
                    min: 0,
                    splitNumber: 12,
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    max: 200
                },
                series: [
                    {
                        name: '外框',
                        type: 'bar',
                        barGap: '-120%', // 设置外框粗细
                        data: [300],
                        barWidth: 150,
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,0,0,.1)', // 填充色
                                barBorderWidth: 1, // 边框宽度
                                label: {
                                    // 标签显示位置
                                    show: false
                                }
                            }
                        },
                        z: 1
                    },
                    {
                        name: '平均值',
                        type: 'bar',
                        stack: 'val',
                        barWidth: 150,
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        label: {
                            show: true,
                            position: 'right',
                            // offset: [10, 20],
                            distance: 15,
                            color: '#000',
                            fontSize: 17,
                            formatter: '{c}' + '[avg]'
                        },
                        itemStyle: {
                            color: '#89c6ff'
                        },
                        data: [avgData],
                        zlevel: 9
                    },
                    {
                        name: '中间值',
                        type: 'bar',
                        barWidth: 150,
                        stack: 'val',
                        label: {
                            show: true,
                            position: 'left',
                            distance: 15,
                            color: '#000',
                            fontSize: 17,
                            formatter: '{c}' + '[med]',
                            rich: {}
                        },
                        itemStyle: {
                            color: '#67b4fd'
                        },
                        data: [medData],
                        zlevel: 9
                    },

                    {
                        name: '最大值',
                        type: 'bar',
                        stack: 'val',
                        barWidth: 150,
                        barGap: '-100%',
                        data: [maxData],
                        label: {
                            show: true,
                            position: 'right',
                            distance: 10,
                            color: '#000',
                            fontSize: 17,
                            offset: [0, -30],
                            formatter: '{c}' + '[max]'
                        },
                        itemStyle: {
                            color: '#319cff'
                        },
                        zlevel: 9
                    },
                    {
                        name: '最小值',
                        type: 'bar',
                        stack: 'val',
                        barWidth: 150,
                        barGap: '-100%',
                        data: [minData],
                        label: {
                            offset: [10, 20],
                            show: true,
                            position: 'left',
                            distance: 10,
                            color: '#000',
                            offset: [0, -30],
                            fontSize: 17,
                            formatter: '{c}' + '[min]'
                        },
                        // tooltip: {
                        //     backgroundColor: 'transparent',
                        //     formatter: ' '
                        // },
                        itemStyle: {
                            color: '#328adc'
                        },
                        zlevel: 9
                    }
                ]
            };
            if (myChart) {
                myChart.setOption(option);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }

            //  this.$nextTick(() => {
            //     myChart.setOption(option)
            //     myChart.resize();
            // })
        }
    },
    mounted() {
        let that = this;
        const $dom = document.getElementById(this.echartsRef);
        $dom.style.width = '440px';
        $dom.style.height = '260px';
        setTimeout(() => {
            that.$nextTick(() => {
                this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
                if (this.chart == null) {
                    this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
                }
                that.initEcharts();
            });
        }, 300);
    },
    watch: {
        intersectionName: {
            handler: function (oldValues, newValues) {
                this.$nextTick(() => {
                    this.initEcharts();
                });
            }
        },
        chatShowType: {
            handler: function (oldValues, newValues) {
                let that = this;
                setTimeout(() => {
                    that.$nextTick(() => {
                        this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
                        if (this.chart == null) {
                            this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
                        }
                        that.initEcharts();
                    });
                }, 300);
            }
        },
        echartsRef: {
            handler: function (oldValues, newValues) {
                console.log('old', oldValues);
                console.log('newV', newValues);
                let that = this;
                setTimeout(() => {
                    that.$nextTick(() => {
                        this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
                        if (this.chart == null) {
                            this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
                        }
                        that.initEcharts();
                    });
                }, 300);
            }
        },
        dataList: {
            handler: function (oldValues, newValues) {
                this.$nextTick(() => {
                    this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
                    if (this.chart == null) {
                        this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
                    }
                    this.initEcharts();
                });
            }
        }
    }
};
</script>
<style>
.tableTitle {
    background: #f7f8fa;
    margin-bottom: 5px;
    padding: 8px;
}
#meanValue {
    width: 100%;
    height: 100%;
}
</style>
