import * as echarts from 'echarts'
import { } from 'echarts-gl'
import _ from 'lodash';
export const getOption = (datas) => {
    var colorArray = [
        {
            top: '#FFB12A', //黄
            bottom: '#0B2733'
        },
        {
            top: '#00ACFF', //黄
            bottom: '#0B2733'
        }
    ];

    const levelGroupDatas = _.groupBy(datas, 'level');

    let firstDatas, resultDatas = [];
    _.keys(levelGroupDatas).forEach(key => {
        if (!firstDatas) {
            firstDatas = levelGroupDatas[key];
            resultDatas.push(levelGroupDatas[key])
        } else {
            const rs = []
            firstDatas.forEach(firstData => {
                const item = levelGroupDatas[key]?.find(d => d.areaName === firstData.areaName);
                rs.push({
                    ...item,
                    areaName: firstData.areaName,
                    acreage: item?.acreage || 0
                })
            })
            resultDatas.push(rs)
        }
    })
    return {
        tooltip: {
            show: true,
            formatter: "{b}:{c}"
        },
        grid: {
            left: '0',
            top: '0',
            right: '0',
            bottom: '0',
            containLabel: true
        },

        xAxis: {
            type: 'value',
            show: false,
            position: 'top',
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#fff',
                }
            },
            splitLine: {
                show: false
            },
        },
        yAxis: [{
            type: 'category',
            axisTick: {
                show: false,
                alignWithLabel: false,
                length: 5,

            },
            "splitLine": { //网格线
                "show": false
            },
            inverse: 'true', //排序
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#fff',
                }
            },
            data: resultDatas?.[0]?.map(data => data.areaName)
        }

        ],
        series: resultDatas?.map((resultData, i) => {
            return {
                name: '',
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{c}',
                        textStyle: {
                            color: 'white' //color of value
                        }
                    }
                },
                barWidth: 8,
                itemStyle: {
                    normal: {
                        show: true,
                        color: function (params) {
                            return {
                                type: 'linear',
                                colorStops: [{
                                    offset: 0,
                                    color: colorArray[i % 2].bottom
                                }, {
                                    offset: 1,
                                    color: colorArray[i % 2].top
                                }],
                                //globalCoord: false
                            }
                        },
                        barBorderRadius: 70,
                        borderWidth: 0,
                        borderColor: '#333',
                    }
                },
                data: resultData?.map(d => d.acreage)
            }
        })
    };
}