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

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

    /**
     * 导出配置项
     */
    let option = {
        color: ['rgba(17, 113, 253, 1)', 'rgba(255, 193, 63, 1)', 'rgba(0, 220, 255, 1)'],
        legend: {
            show: true,
            bottom: 20,
            right: 'center',
            width: '90%',
            icon: 'rect',
            itemWidth: 13,
            itemHeight: 10,
            itemGap: 15,
            textStyle: {
                color: '#fff',
                fontSize: 12,
            },
        },
        tooltip: {
            show: false,
            formatter: (item) => {
                const find = $data.find((x) => x.name === item.name);

                return `${item.marker} ${find.name} ${find.value} ${find.unit || ''}`;
            },
        },
        series: [
            {
                type: 'pie',
                radius: $param.radius,
                center: $param.center,
                label: {
                    color: 'rgba(255, 255, 255, 1)',
                    lineHeight: 20,
                    formatter: function (params) {
                        const find = $data.find((x) => x.name === params.name);

                        return `${params.percent}%\n${params.name}\n{number|${params.value}${find.unit}}`;
                    },
                    rich: {
                        number: {
                            color: 'rgba(59, 191, 254, 1)',
                            fontSize: 14,
                            fontWeight: 'bold',
                        },
                    },
                },
                labelLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)',
                    },
                },
                itemStyle: {
                    borderRadius: 5,
                },
                data: $data,
                startAngle: 150,
            },
        ],
    };

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

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