<template>
    <div class="hour-prog-pie" :id="'hour-prog-pie'+id"></div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector"
export default {
    props: {
        count: {
            type: Array,
            default: () => {
                return [0, 0, 0]
            }
        }
    },
    data() {
        return {
            id: '',
            myData: [],
            techScoreGau: undefined,
            option: {
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['30%', '70%'],
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: 1048,
                                name: '已完成',
                                itemStyle: {
                                    color: '#19be6b'
                                }
                            },
                            {
                                value: 735,
                                name: '进行中',
                                itemStyle: {
                                    color: '#ff9900'
                                }
                            },
                            {
                                value: 580,
                                name: '未开始',
                                itemStyle: {
                                    color: '#ed4014'
                                }
                            }
                        ]
                    }
                ]
            }
        }
    },
    mounted() {
        this.techScoreGau = this.$echarts.init(document.getElementById('hour-prog-pie' + this.id))
        this.techScoreGau.setOption(this.option)
        this.erd = elementResizeDetectorMaker()
        this.erd.listenTo(document.getElementById("hour-prog-pie" + this.id), () => {
            this.$nextTick(() => {
                //监听到事件后执行的业务逻辑
                this.techScoreGau.resize()
            })
        })
    },
    created() {
        this.id = this.id || this.$jsFn.getBtwRandom(10000, 99999)
    },
    methods: {
    },
    watch: {
        count: {
            handler(n, o) {
                if (this.count && this.count.length) {
                    console.log('统计数据', this.count)
                    this.option.series[0].data.forEach((item, index) => {
                        item.value = this.count[index]
                    })
                    if (this.techScoreGau) {
                        this.techScoreGau.setOption(this.option)
                    } else {
                        this.id = this.id || this.$jsFn.getBtwRandom(10000, 99999)
                        this.$nextTick(() => {
                            this.techScoreGau = this.$echarts.init(document.getElementById('hour-prog-pie' + this.id))
                            this.techScoreGau.setOption(this.option)
                        })
                    }
                }
            },
            immediate: true,
            deep: true
        }
    }
}
</script>
<style lang="less" scoped>
.hour-prog-pie {
    width: 400px;
    height: 240px;
}
</style>
<style>
</style>