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

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

    const $color = [
        ['rgba(5, 114, 234, 1)', 'rgba(36, 140, 255, 1)'],
        ['rgba(0, 150, 255, 1)', 'rgba(80, 182, 254, 1)'],
        ['rgba(42, 184, 198, 1)', 'rgba(89, 229, 243, 1)'],
        ['rgba(83, 193, 136, 1)', 'rgba(89, 211, 148, 1)'],
        ['rgba(240, 239, 131, 1)', 'rgba(255, 254, 159, 1)'],
        ['rgba(255, 205, 94, 1)', 'rgba(255, 220, 142, 1)'],
        ['rgba(178, 72, 232, 1)', 'rgba(208, 115, 255, 1)'],
        ['rgba(28, 64, 133, 1)', 'rgba(46, 92, 181, 1)'],
    ];

    /**
     * 导出配置项
     */
    let option = {
        legend: {
            show: true,
            type: 'scroll',
            orient: 'vertical',
            left: 50,
            top: 'center',
            itemWidth: 14,
            itemHeight: 14,
            height: '80%',
            pageIconColor: '#fff',
            pageIconSize: 12,
            pageTextStyle: {
                color: '#fff',
            },
            formatter: (name) => {
                let res = '';
                $data.forEach((x) => {
                    if (x.name === name) {
                        res = `${name}`;
                    }
                });
                return res;
            },
            textStyle: {
                color: '#fff',
                fontSize: 14,
            },
        },
        tooltip: {
            show: true,
            target: 'item',
            borderWidth: 0,
            formatter: (item) => {
                const find = $data.find((x) => x.name === item.name);
                let res = `${item.marker} ${item.name}<br/> <span style="color:#666;font-weight:bold;">${thousandFormat(item.value, 2)}</span> ${find.unit}`;

                return res;
            },
        },
        series: [
            {
                type: 'pie',
                radius: $param.radius,
                center: $param.center,
                data: $data,
                roseType: 'area',
                label: {
                    show: false,
                },
                itemStyle: {
                    color: (param) => {
                        return {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: $color[param.dataIndex % $color.length][0],
                                },
                                {
                                    offset: 1,
                                    color: $color[param.dataIndex % $color.length][1],
                                },
                            ],
                        };
                    },
                },
            },
        ],
    };

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

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

    return echarts;
};
