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

export default ({ dom, param, opt }) => {
    const { $color } = echartsStyle();

    /**
     * 对外参数
     */
    const $data = param.data;
    const $param = {
        ...param,
        radius: param.radius || [20, 60],
        center: param.center || ['center', 120],
    };

    /**
     * 导出配置项
     */
    let option = {
        color: $color.theme,
        legend: {
            show: true,
            type: 'scroll',
            pageIconColor: '#fff',
            pageTextStyle: {
                color: '#fff'
            },
            icon: 'rect',
            bottom: 20,
            right: 'center',
            width: '90%',
            itemWidth: 14,
            itemGap: 16,
            textStyle: {
                color: '#fff',
                fontSize: 12,
            },
            formatter: (name) => {
                let res = '';
                $data.forEach((x) => {
                    if (x.name === name) {
                        res = `${name} {blue|${x.value.toFixed(2)} ${x.unit || ''}}`;
                    }
                });
                return res;
            },
            textStyle: {
                color: '#fff',
                rich: {
                    blue: {
                        color: '#00DEFF',
                    },
                },
            },
        },
        series: [
            {
                type: 'pie',
                radius: $param.radius,
                center: $param.center,
                label: {
                    formatter: function (params) {
                        return `{number|${params.percent}%}`;
                    },
                    rich: {
                        number: {
                            color: 'rgba(255, 255, 255, 1)',
                        },
                    },
                },
                itemStyle: {
                    borderRadius: 0,
                },
                data: $data,
                roseType: 'area',
            },
        ],
    };

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

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

    return echarts
};
