<template>
    <div id="progress-pie"></div>
</template>
<script>
    import elementResizeDetectorMaker from "element-resize-detector"
    export default {
        props: {
            pieData: {
                type: Array,
                default: () => {
                    return [0,0]
                }
            }
        },
        data() {
            return {
                progressPie: undefined,
                option: {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c} ({d}%)'
                    },
                    legend: {
                        data: [
                            {
                                name: '已完成',
                                textStyle: {
                                    color:'white'
                                }
                            },
                            {
                                name: '未完成',
                                textStyle: {
                                    color:'white'
                                }
                            }
                        ]
                    },
                    series: [
                        {
                            hoverOffset:5, 
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '60%'],
                            selectedMode: 'single',
                            data: [
                                {
                                    value: 0,
                                    name: '已完成',
                                    itemStyle: {
                                        color:'#69EFEF'
                                    }
                                },
                                {
                                    value: 0,
                                    name: '未完成',
                                    itemStyle: {
                                        color:'#AAAAAA'
                                    }
                                }
                            ]
                        }
                    ]
                }
            }
        },
        mounted() {
            this.progressPie = this.$echarts.init(document.getElementById('progress-pie'))
            this.progressPie.setOption(this.option)
            let _this = this
            let erd11 = elementResizeDetectorMaker()
            erd11.listenTo(document.getElementById("rogress-pie"), () => {
                this.$nextTick(() => {
                    //监听到事件后执行的业务逻辑
                    this.progressPie.resize()
                })
            })
        },
        watch: {
            pieData: {
                handler(n, o) {
                    this.$nextTick(() => {
                        if (!this.progressPie) {
                            this.progressPie = this.$echarts.init(document.getElementById('progress-pie'))
                        }
                        this.option.series[0].data[0].value = this.pieData[0]
                        this.option.series[0].data[1].value = this.pieData[1]
                        this.progressPie.setOption(this.option)
                    })
                },
                deep: true,
                immediate: true
            }
        }
    }
</script>
<style scoped lang="less">
    #progress-pie {
        width: 100%;
        height: 100%;
    }
</style>
<style>
    
</style>