<template>
    <div :id="id" class="pie-charts"></div>
</template>

<script>
import * as echarts from 'echarts' // 引入charts
export default {
    name: 'pieCharts',
    props: {
        id: {
            type: String,
            require: true,
        },
        data: {
            type: Array,
            require: true,
        },
        config: {
            type: Object,
            default: () => {},
        },
        key_: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            myChart: null,
            option: null,
        }
    },
    mounted() {
        this.init()
    },
    watch: {
        data: {
            deep: true,
            handler(val) {
                this.option.series[0].data = val
                this.myChart.setOption(this.option)
            },
        },
    },
    methods: {
        init() {
            let chartDom = document.getElementById(this.id)

            this.myChart = echarts.init(chartDom)
            this.option = {
                color: this.color,
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        // params 包含了关于当前鼠标悬停的数据项的所有信息
                        return `${params.name}: ${params.value}`
                    },
                },
                // graphic: {
                //   type: 'text',
                //   left: 'center',
                //   top: '48%',
                //   style: {
                //     text: '74.5%',
                //     textAlign: 'center',
                //     fill: '#fff',
                //     fontSize: 12,
                //   },
                // },
                legend: {
                    bottom: '40%',
                    left: '70%',
                    icon: 'circle',
                    textStyle: {
                        color: '#fff',
                    },
                },
                ...this.config,
                series: [
                    {
                        name: '设备信息',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        // center: ['25%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                            formatter: (a) => {
                                // if (this.key_ == 1) {
                                //     return a.percent.toFixed(2) + '%'
                                // } else {
                                //     return (100 - a.percent).toFixed(2) + '%'
                                // }
                                return a.value + '个'
                            }, //'{d}%',
                            color: '#fff',
                            fontSize: 16,
                        },
                        emphasis: {
                            label: {
                                show: false,
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        ...this.config.series,
                        data: this.data,
                    },
                ],
            }

            this.option && this.myChart.setOption(this.option)
            this.myChart.on('click', this.handleClick)
        },
        //弹窗数据传递
        handleClick(params) {
            // params 包含了关于点击事件的信息，包括点击的是哪个数据项
            if (params.seriesType === 'pie') {
                // 根据点击的扇区名称或值决定展示哪个弹窗
                let popupContent
                switch (params.name) {
                    case '在线设备':
                        popupContent = this.getOnlineDevices()
                        break
                    case '离线设备':
                        popupContent = this.getOfflineDevices()
                        break
                    default:
                        return // 如果不是预期的扇区，则不执行任何操作
                }

                // 展示弹窗
                // this.showPopup(popupContent);
            }
        },
        //在线设备获取
        getOnlineDevices() {
            // 获取并返回在线设备信息

            this.$emit('getDevicesDetail', 1)
            return /* 在线设备信息 */
        },
        //离线设备获取
        getOfflineDevices() {
            // 获取并返回离线设备信息
            this.$emit('getDevicesDetail', 0)
            console.log('离线设备')

            return /* 离线设备信息 */
        },
    },
}
</script>

<style lang="scss" scoped>
.pie-charts {
    width: 100%;
    height: 100%;
}
</style>
