<template>
    <div id="ac-type-count"></div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector"
let title = '总量'
export default {
    props: {
        count: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            index: 0,
            color: ['#00f492', '#fa8d38', '#f862bb', '#65dcda', '#d6b8ff'],
            typeCountPie: undefined,
            option: {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}({c})',
                    textStyle: {
                        color: '#000'
                    },
                    backgroundColor: '#fff',
                    extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(19,83,88,0.2);'
                },
                // backgroundColor: "#27262b",
                title: [],
                legend: {
                    data: [],
                    textStyle: {
                        color: '#757575',
                        padding: [5, 0, 5, 0]
                    },
                    icon: 'circle',
                    bottom: 10
                },
                grid: {
                    left: '20px',
                    right: '20px',
                    top: '20px',
                    bottom: '20px',
                    containLabel: true
                },
                series: [
                    {
                        name: this.$t('home.countNum'),
                        type: 'pie',
                        top: -60,
                        radius: [85, 115],
                        labelLine: {
                            show: false
                        },
                        data: []
                    }
                ]
            }
        }
    },
    mounted() {
        this.typeCountPie = this.$echarts.init(document.getElementById('ac-type-count'))
        this.typeCountPie.setOption(this.option)
        this.erd = elementResizeDetectorMaker()
        this.erd.listenTo(document.getElementById("ac-type-count"), () => {
            this.$nextTick(() => {
                //监听到事件后执行的业务逻辑
                this.typeCountPie.resize()
            })
        })
    },
    computed: {
        total() {
            let t = 0
            this.option.series[0].data.forEach(item => {
                t += item.value
            })
            return t
        }
    },
    watch: {
        count: {
            handler(n, o) {
                console.log('统计数据：', this.count)
                this.option.legend.data = this.count.map(item => {
                    return item.name
                })
                this.option.series[0].data = this.count.map((item, index) => {
                    item.itemStyle = {
                        color: this.color[index]
                    }
                    return item
                })
                this.option.title = []
                this.option.title.push({
                    text: '{name|' + title + '}\n{val|' + this.total + '}',
                    top: '30%',
                    left: 'center',
                    textStyle: {
                        rich: {
                            name: {
                                fontSize: 16,
                                fontWeight: 'normal',
                                color: '#757575',
                                padding: [10, 0],
                            },
                            val: {
                                fontSize: 40,
                                fontWeight: 'bold',
                                color: '#303030',
                            },
                        },
                    },
                })
                this.$nextTick(() => {
                    if (!this.typeCountPie) {
                        this.typeCountPie = this.$echarts.init(document.getElementById('ac-type-count'))
                    }
                    this.typeCountPie.setOption(this.option)
                })
            },
            deep: true,
            immediate: true
        }
    }
}
</script>
<style scoped lang="less">
#ac-type-count {
    width: 100%;
    height: 360px;
    display: flex;
    justify-content: center;
}
</style>
<style>
</style>