<template>
    <div id="echart22" :style="`width:100%;height:100%;`" ref="ymoth"></div>
</template>
<script>
import yan from '@/assets/commjs/color'

// import jquery from "jquery";
// import { getAreaData, dictDataCache } from "@/api/Tableabove";
// import { dicData } from "@/assets/commjs/dictypeData";
export default {
    props: {
        monthlyStatistics: {
            type: Array,
            default: undefined
        },
        intervald: {
            type: [String, Number],
            default: undefined
        }
    },
    data() {
        return {
            device: null,
            zoom: undefined, //图表焦点校验
            h: null,
            isLoading1: false,
            myChart: ''
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.resizeEchartZ()

        this.$nextTick(() => {
            // this.relation();
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.h = (window.sessionStorage.getItem('appheight') - 120) / 2 + `px`
            this.zoom = 1 / document.body.style.zoom
            if (this.myChart !== '') {
                this.myChart.resize()
            }
        },
        //echarts图
        async relation() {
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            // this.isLoading1 = true;
            let echartsndArr = []
            let echartsArr = []
            let echartswArr = []
            this.monthlyStatistics.forEach((item, i) => {
                if (i != 0) {
                    item.month = item.month.slice(5)
                } else if (i == 0) {
                    let date = item.month.slice(5)
                    // let t = item.month.slice(0, 4);
                    // item.month = date + "\n" + "(" + t + ")";
                    item.month = date
                }

                echartsndArr.push(item.month)
                // if (item.linked == 0 || item.notAssociated == 0) {
                //   item.linked = 3.14159;
                //   item.notAssociated = 3.14159;
                // }
                if (item.linked == 0) {
                    item.linked = 1.1
                } else if (item.linked == 1) {
                    item.linked = 1.3
                }
                echartsArr.push(item.linked)
                if (item.notAssociated == 0) {
                    item.notAssociated = 1.1
                } else if (item.notAssociated == 1) {
                    item.notAssociated = 1.3
                }
                echartswArr.push(item.notAssociated)
            })

            let echarts = require('echarts')
            let domID1 = document.getElementById('echart22')
            let myChart = echarts.init(domID1)
            this.myChart = myChart
            setTimeout(() => {
                ;(domID1.style.width = document.getElementById('csshesy').offsetWidth - 0 + 'px'),
                    (domID1.style.height = (window.sessionStorage.getItem('appheight') - 120) / 2 + `px`)
            }, 0)
            // this.isLoading1 = false;
            let colors = echartsColor.FigureColor
            let option = {
                title: {
                    text:
                        this.intervald == 1 ? '年份' : this.intervald == 2 ? '季度' : this.intervald == 3 ? '月份' : '',
                    left: 'center',
                    textStyle: {
                        fontSize: yan.EchartObject.titleNamefontSize1,
                        color: echartsColor.WordColor
                    }
                },
                tooltip: {
                    //提示框组件
                    trigger: 'axis',

                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0,
                    formatter: function (params) {
                        // console.log(params);
                        let html = '时间：' + params[0].name
                        params.forEach((item, index) => {
                            if (item.value == 1.1) {
                                html += `<br/>${item.seriesName}: ${0}次`
                            } else if (item.value == 1.3) {
                                html += `<br/>${item.seriesName}: ${1}次`
                            } else {
                                html += `<br/>${item.seriesName}: ${item.value}次`
                            }
                        })
                        return html
                        // var tips = "";
                        // tips += params[0].name + "<br/>";
                        // // for (var i = 0; i < params.length; i++) {
                        // //   if (params[i].value == 3.14159) {
                        // //     tips += params[i].seriesName + ":暂无数据<br/>";
                        // //   } else {
                        // //     // tips += params[i].name + "<br/>";
                        // //     tips += params[i].seriesName + ":" + params[i].value + "<br/>";
                        // //   }
                        // // }
                        // params.forEach((item, i) => {
                        //   if (item.value == 3.14159) {
                        //     tips += item.seriesName + ":暂无数据<br/>";
                        //   } else {
                        //     tips += item.seriesName + ":" + item.value + "<br/>";
                        //   }
                        // });
                        // return tips;
                    }
                },
                grid: yan.EchartObject.grid11,
                dataZoom: yan.EchartObject.dataZoom,
                legend: {
                    data: ['未关联暂降次数', '已关联处理事件'],
                    right: 80,
                    top: 10,
                    itemGap: 28,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                xAxis: [
                    {
                        name:
                            this.intervald == 1
                                ? '月份'
                                : this.intervald == 2
                                ? '月份'
                                : this.intervald == 3
                                ? '日'
                                : '', // 给X轴加单位
                        type: 'category',
                        data: echartsndArr,
                        axisTick: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                fontFamily: yan.EchartObject.fontFamily,
                                color: echartsColor.WordColor,
                                fontSize: yan.EchartObject.xNamefontSize
                            }
                        }
                    }
                ],
                color: [echartsColor.FigureColor[0], echartsColor.FigureColor[5]],
                yAxis: [
                    {
                        type: 'value',
                        name: yan.EchartObject.number,
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        minInterval: 1,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: echartsColor.thread
                            }
                        },
                        axisLabel: {
                            color: echartsColor.WordColor,
                            fontSize: yan.EchartObject.yNamefontSize
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: [echartsColor.thread],
                                type: 'dashed',
                                opacity: 0.5
                            }
                        }
                    }
                ],

                series: [
                    // {
                    //   name: '未关联暂降次数',
                    //   type: 'bar',
                    //   data: list1,
                    // },
                    {
                        name: '未关联暂降次数',
                        type: 'bar',
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        barMinHeight: 5,
                        data: echartswArr,
                        itemStyle: {
                            normal: {
                                label: {
                                    // show: true, //数字开启显示
                                    textStyle: {
                                        //数值样式
                                        color: '#fff',
                                        fontSize: 14,
                                        fontWeight: 600
                                    }
                                },
                                color: function (params) {
                                    // console.log(params,'1111111111111111111111');
                                    if (params.data == 1.1) {
                                        return echartsColor.FigureColor[9]
                                    } else {
                                        return echartsColor.FigureColor[0]
                                    }
                                }
                            }
                        }
                    },
                    {
                        name: '已关联处理事件',
                        type: 'bar',
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        data: echartsArr,
                        itemStyle: {
                            normal: {
                                label: {
                                    // show: true, //数字开启显示
                                    textStyle: {
                                        //数值样式
                                        color: '#fff',
                                        fontSize: 14,
                                        fontWeight: 600
                                    }
                                },
                                color: function (params) {
                                    // console.log(params,'1111111111111111111111');
                                    if (params.data == 1.1) {
                                        return echartsColor.FigureColor[9]
                                    } else {
                                        return echartsColor.FigureColor[5]
                                    }
                                }
                            }
                        }
                    }
                    // {
                    //   name: '已关联处理事件',
                    //   type: 'bar',
                    //   data: list2,
                    // },
                ]
            }
            myChart.setOption(option)
            window.echartsArr.push(myChart)
            let _this = this
            _this.$erd.listenTo(_this.$refs.ymoth, element => {
                _this.$nextTick(() => {
                    domID1.style.width = document.getElementById('csshesy').offsetWidth - 0 + 'px'
                    myChart.resize()
                })
            })

            // myChart.resize();
            setTimeout(function () {
                myChart.resize()
            }, 0)
        },
        resizeEchartZ() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('csshesy'), element => {
                // let  domeId=document.getElementById("ceshi")
                let domeId2 = document.getElementById('echart22')
                domeId2.style.width = document.getElementById('csshesy').offsetWidth - 0 + 'px'
                //this.$nextTick(() => {
                if (this.myChart !== '') {
                    this.myChart.resize()
                }

                // });
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
</style>
