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

export default ({ dom, param, opt }) => {
    /**
     * 对外参数
     */
    const $data = param.data;

    const $color = [
        ['rgba(255, 255, 255, 1)', 'rgba(78, 193, 252, 1)'],
        ['rgba(65, 171, 184, 1)', 'rgba(81, 242, 103, 1)'],
    ];

    /**
     * 数据处理
     */
    const max = $data.reduce((a, b) => ({ value: a.value + b.value }), { value: 0 });

    const series = [];

    $data.map((item, index) => {
        series.push({
            type: 'bar',
            name: item.name,
            data: [item.value],
            coordinateSystem: 'polar',
            barWidth: 10,
            itemStyle: {
                color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: $color[index][0],
                        },
                        {
                            offset: 1,
                            color: $color[index][1],
                        },
                    ],
                },
                borderRadius: 30,
            },
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(3, 16, 48, 1)',
            },
            barGap: '100%',
        });
    });

    /**
     * 导出配置项
     */
    let option = {
        tooltip: {
            show: true,
            formatter: (item) => {
                const find = $data.find((x) => x.name === item.seriesName);

                let res = `${item.marker} ${find.name} <span style="color:#666;font-weight:bold;">${find.value}</span> ${find.unit}`;

                return res;
            },
            position: (pos, params, dom, rect, size) => {
                const obj = { top: pos[1], left: pos[0] + 20 };

                return obj;
            },
        },
        legend: {
            show: true,
            data: $data.map((x) => x.name),
            icon: 'rect',
            left: 'center',
            bottom: '0%',
            height: '60%',
            itemWidth: 15,
            itemHeight: 15,
            itemGap: 9,
            textStyle: {
                color: '#fff',
                fontSize: 12,
            },
            formatter: (name) => {
                let res = '';

                const arr = $data.map((x) => x.value);

                const max = arr.reduce((a, b) => a + b, 0);

                $data.forEach((x) => {
                    if (x.name === name) {
                        if (x.value === 0) {
                            res = `${x.name}　{blue|0%}`;
                        } else {
                            res = `${x.name}　{blue|${((x.value / max) * 100).toFixed(2)}%}`;
                        }
                    }
                });

                return res;
            },
            textStyle: {
                color: '#fff',
                rich: {
                    blue: {
                        color: '#00E1FF',
                    },
                },
            },
        },
        polar: {
            radius: 130,
            center: ['50%', '40%'],
        },
        angleAxis: {
            max: max.value || 100,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        radiusAxis: {
            type: 'category',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
        },
        series: series,
    };

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

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