<template>
    <div id="pie">
        <div id="equipmentArea" ref="df" :style="`width:100%;height:${h};`"></div>
    </div>
</template>

<script>
// import { getTransientCauseData} from "@/api/generaloverview";
import { getReasonData } from '@/api/generaloverview'
import { dicData } from '@/assets/commjs/dictypeData'
export default {
    props: {
        item: {
            type: Array,
            default: undefined
        }
    },
    data() {
        return {
            h: null,
            zoom: null,
            isLoading: false,
            myChartes: '',
            form: {
                deptIndex: '',
                monitorFlag: 2,
                powerFlag: 2,
                serverName: 'event-boot',
                searchBeginTime: this.getCurrentMonthFirst(),
                searchEndTime: this.getNowFormatDate(),
                statisticalType: {}
            }
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.resizeEchartZ()

        this.form.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.getclassificationData()
        this.$nextTick(() => {
            this.getechart()
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            let heightd = window.sessionStorage.getItem('appheight') - 380
            this.h = heightd + 'px'
            this.zoom = 1 / document.body.style.zoom
            if (this.myChartes !== '') {
                this.myChartes.resize()
            }
        },

        //获取统计类型
        getclassificationData() {
            // debugger
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Load_Type'])
            this.form.statisticalType = this.classificationData[1]
        },
        //获取当前月第一天日期
        getCurrentMonthFirst() {
            var date = new Date()
            var year = date.getFullYear()
            date.setDate(1)
            var month = parseInt(date.getMonth() + 1)
            var day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return year + '-' + month + '-' + day
        },
        //获取当天日期
        getNowFormatDate() {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return year + '-' + month + '-' + day
        },
        //echarts图表
        async getechart() {
            this.isLoading = true
            this.form.searchBeginTime = this.item[0]
            this.form.searchEndTime = this.item[1]
            let pie = []
            let echartsColor = JSON.parse(window.localStorage.echartsColor)

            const data = await getReasonData(this.form)
            this.$emit('sendData', data)
            data.data.forEach(item => {
                let obj = { value: item.times, name: item.reason, zb: item.rate - 0 }
                pie.push(obj)
            })
            const echarts = require('echarts')
            let domID1 = document.getElementById('equipmentArea')
            this.myChartes = echarts.init(domID1, null, { renderer: 'svg' })
            this.isLoading = false
            this.myChartes.clear()

            let option = {
                title: {
                    text: '暂态原因统计',
                    left: 'center',
                    top: '10%'
                },
                tooltip: {
                    trigger: 'item',

                    formatter: function (params) {
                        return `暂态原因统计:  <br/>${params.data.name}:${params.data.value}次  <br/>占比:${params.data.zb}%`
                    },
                    confine: true
                },

                color: ['#A42D00', '#003377', '#5F9EA0', '#BB5500', '#66CDAA'],
                legend: {
                    orient: 'vertical',
                    left: '25%',
                    top: '30%',
                    textStyle: {
                        color: '#666666'
                    },
                    itemWidth: 30,
                    itemHeight: 20,
                    itemGap: 10
                },

                series: [
                    {
                        name: '暂态原因统计',
                        type: 'pie',
                        radius: '60%',
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '12',
                                formatter: '{b}: {c} (次) 占比:{d}%',
                                color: echartsColor.WordColor
                            }
                        },
                        data: pie
                        // emphasis: {
                        //   itemStyle: {
                        //     shadowBlur: 10,
                        //     shadowOffsetX: 0,
                        //     shadowColor: "rgba(0, 0, 0, 0.5)",
                        //   },
                        // },
                    }
                ]
            }
            this.myChartes.setOption(option)
            window.echartsArr.push(this.myChartes)
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.df, element => {
                _this.$nextTick(() => {
                    //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
                    ;(domID1.style.width = document.getElementById('pie').offsetWidth - 0 + 'px'),
                        _this.myChartes.resize()
                })
            })
        },
        resizeEchartZ() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('pie'), element => {
                let domeId = document.getElementById('pie')
                let domeId2 = document.getElementById('equipmentArea')
                domeId2.style.width = domeId.offsetWidth - 0 + 'px'
                // this.$nextTick(() => {
                if (this.myChartes !== '') {
                    this.myChartes.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;
}
.box {
    display: flex;
}
</style>
