import _ from 'lodash-es';
import echartstyle from '../../libs/echarts-style.js';
import { $echarts } from '../../index.js';

export default ({ dom, param, opt }) => {
    const { $color } = echartstyle();
    /**
     * 对外参数
     */
    const $data = param.data;
    const $param = {
        ...param,
        radius: param.radius || [20, 60],
        center: param.center || ['center', 120],
    };

    /**
     * 导出配置项
     */
    let option = {
        legend: {
            show: false,
            icon: 'circle',
            bottom: 20,
            right: 'center',
            width: '90%',
            itemWidth: 5,
            itemHeight: 5,
            itemGap: 15,
            textStyle: {
                color: '#fff',
                fontSize: 12,
            },
        },
        tooltip: {
            show: true,
        },
        series: [
            {
                type: 'pie',
                color: $color.theme,
                radius: $param.radius,
                center: $param.center,
                label: {
                    show: false,
                    color: 'white',
                    formatter: function (params) {
                        return `{name|${params.name}} {number|${params.value}%}`;
                    },
                    rich: {
                        name: {
                            color: 'rgba(255, 255, 255, 0.6)',
                        },
                        number: {
                            color: 'rgba(52, 236, 255, 1)',
                        },
                    },
                    emphasis: {
                        show: true,
                    },
                },
                itemStyle: {
                    borderRadius: 5,
                },
                data: $data,
            },
        ],
    };

    /**
     * 渲染
     */
    let extensOption = $echarts.extens(opt, option);

    let echarts = $echarts.render(dom, extensOption);

    return echarts;
};
