<template>
    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>

<script>
    import mixins from '@/mixins';
    import {legend} from '@/defaultSetting';

    export default {
        mixins: [mixins],
        props: {
            theme: {
                type: String,
            },
        },
        data() {
            return {
                total: 0
            };
        },
        methods: {
            updateChart: function () {
                let legends = [];
                this.total = 0;
                const countMap = {};
                this.data.forEach(item => {
                    legends.push(item.name);
                    this.total += item.value / 1;
                    countMap[item.name] = item.value >= 0 ? item.value : 0;
                });
                this.total = this.total.toFixed(this.setting.fixed);
                const that = this;
                const options = {
                    color: this.setting.color,
                    title: {
                        text: this.data.title,
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: `{a} <br/>{b} : {c}${this.unit || ''} ({d}%)`,
                    },
                    legend: {
                        ...legend,
                        data: legends,
                        right: -2,
                        top: 'middle',
                        orient: 'vertical',
                        itemGap: 20,
                        ...this.setting.legend,
                        formatter: function (name) {
                            return `{name|${name}}{count|${countMap[name]}${that.unit || ''}}`;
                        },
                        textStyle: {
                            rich: {
                                name: {
                                    align: 'left',
                                    color: '#666',
                                    width: 50
                                },
                                count: {
                                    align: 'right',
                                    color: '#7e7e7e',
                                    width: this.setting.richCount || 50,
                                    fontWeight: 600
                                }
                            }
                        }
                    },
                    toolbox: this.setting.toolbox,
                    series: [{
                        name: this.theme,
                        type: 'pie',
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: function () {
                                    return `{count|${that.total}}\r\n总数`;
                                },
                                textStyle: {
                                    color: '#5F6264',
                                },
                                rich: {
                                    count: {
                                        fontSize: 30,
                                        color: '#5F6264'
                                    }
                                }
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    fontSize: '14',
                                    fontWeight: 'bold',
                                },
                            },
                        },
                        radius: this.setting.radius || ['50%', '65%'],
                        center: this.setting.center || ['26%', '50%'],
                        data: this.data,
                    }],
                };
                this.chart.setOption(options, true);
            },
        },
    };
</script>
