<script setup>
import Api from '@/api/index';


import * as echarts from 'echarts';
import chinaJons from "@/assets/china.json"
import chinaProvinceJson from "@/assets/chinaProvince.json"
import { onMounted, reactive, ref } from 'vue'
import { ScrollBoard as DvScrollBoard, } from '@kjgl77/datav-vue3'
import TableHeader from './tableHeader.vue';

let list = reactive([])
const config = reactive({
    header: ['城市', '充电站编号', '消费金额', '整体使用率', '综合排名'],
    data: [],
    headerBGC: "#062855",
    oddRowBGC: "rgba(0,67,92,0.5)",
    evenRowBGC: "#012A58",
    index: false,
    align: ['center', 'center', 'center', 'center', 'center', 'center'],
})


let count = ref({
    yearAmount: [],
    yearCount: []
})


onMounted(() => {
    infoGet()
    setInterval(() => {
        infoGet()
    }, 10000)
})


function infoGet() {
    Api.get('/station/list').then((res) => {
        res.sort((a, b) => b.amount - a.amount);
        var data = []
        res.map((item, index) => {
            if (index < 5) {
                data.push([item.cityName, item.stationNo, item.amount, `${item.useRate}%`, index + 1])
            }
        })
        config.data = data
    })
    Api.get('/cityStats/list').then((res) => {
        init(res)
    })

    Api('/orderStats/total').then((res) => {
        res.yearAmount = String(res.yearAmount).split('')
        res.yearCount = String(res.yearCount).split('')
        // count.value = res
        count.value = {
            ...count.value,
            ...res
        }
        // console.log(res, 'resresres');
    })



    Api('/deviceStats/total').then((res) => {
        count.value = {
            ...count.value,
            ...res
        }
    })
}


function init(data) {
    var mapName = 'china';
    var option = null
    function convertData(data) {
        var res = [];
        res = data.map((item, index) => {
            return {
                name: item.cityName,
                value: item.latlng.split(',').concat(item.gunNum)
            }
        })
        return res;
    }
    echarts.registerMap('china', chinaJons);
    echarts.registerMap('chinaProvince', chinaProvinceJson);
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        grid: {
            // show: true,
            right: '10%',
            top: 5,
            bottom: '10%',
            left: '10%',
        },
        geo: [
            {
                map: mapName,
                zlevel: -1,
                zoom: 1.0,
                silent: true,
                layoutCenter: ['50%', '50%'],
                layoutSize: '100%',
                roam: false,
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(192,245,249,.8)',
                        borderWidth: 3,
                        shadowColor: '#6FFDFF',
                        shadowOffsetY: 0,
                        shadowBlur: 10,
                        areaColor: 'rgba(29,85,139,0)',
                    },
                },
                label: {
                    normal: {
                        //静态的时候展示样式
                        show: false, //是否显示地图省份得名称
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                            fontFamily: 'Arial',
                        },
                    },
                    emphasis: {
                        //动态展示的样式
                        show: false,
                        color: '#fff',
                    },
                },
            },
            {
                show: true,
                map: mapName,
                zoom: 1.0,
                layoutCenter: ['50%', '50%'],
                layoutSize: '100%',
                label: {
                    normal: {
                        //静态的时候展示样式
                        show: false, //是否显示地图省份得名称
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                            fontFamily: 'Arial',
                        },
                    },
                    emphasis: {
                        //动态展示的样式
                        color: '#fff',
                    },
                },

                blur: {
                    label: { show: true, color: '#000' },
                },
                roam: false, // 是否开启鼠标滚轮缩放
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            color: '#fff',
                        },
                        color: '#fff',
                        borderColor: '#32CBE0',
                        borderWidth: 1.5,
                        areaColor: 'rgba(0,0,0,0)',
                    },
                    emphasis: {
                        label: {
                            show: true,
                            color: '#fff',
                        },
                        borderWidth: 3,
                        borderColor: 'rgba(255, 230, 175,0.8)',
                        shadowColor: 'rgba(255, 230, 175,0.5)',
                        shadowBlur: 30,
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                            backgroundColor: 'transparent',
                        },
                        areaColor: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: '#1cfbfe',
                                },
                                {
                                    offset: 1,
                                    color: '#3348e7',
                                },
                            ],
                            false
                        ),
                    },
                },
            },
            {
                type: 'map',
                map: mapName,
                zlevel: -2,
                zoom: 1.0,
                layoutCenter: ['50%', '51.4%'],
                layoutSize: '100%',
                roam: false,
                silent: true,
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(35, 161, 184,0.5)',
                        shadowColor: 'rgba(35, 161, 184,0.8)',
                        shadowOffsetY: 5,
                        shadowBlur: 15,
                        areaColor: 'rgba(0,0,0,0)',
                    },
                },
            },
            {
                type: 'map',
                map: mapName,
                zlevel: -3,
                zoom: 1.0,
                layoutCenter: ['50%', '52.4%'],
                layoutSize: '100%',
                roam: false,
                silent: true,
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(7, 65, 117,0.5)',
                        shadowColor: 'rgba(7, 65, 117,0.8)',
                        shadowOffsetY: 15,
                        shadowBlur: 8,
                        areaColor: 'rgba(0,0,0,0)',
                    },
                },
            },
        ],
        series: [
            {
                type: 'map',
                layoutCenter: ['50%', '50%'],
                layoutSize: '100%',
                roam: false,
                label: {
                    normal: {
                        //静态的时候展示样式
                        show: false, //是否显示地图省份得名称
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        },
                    },
                    emphasis: {
                        //动态展示的样式
                        color: '#fff',
                    },
                },
                // geoIndex: 0,
                map: 'chinaProvince',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            color: '#fff',
                        },
                        color: '#fff',
                        borderColor: '#98D1DE',
                        borderWidth: 1.5,
                        "areaColor": "rgba(0,0,0,0)"
                    },
                    emphasis: {
                        label: {
                            show: true,
                            color: '#fff',
                        },
                        borderWidth: 3,
                        borderColor: 'rgba(255, 230, 175,0.8)',
                        shadowColor: 'rgba(255, 230, 175,0.5)',
                        shadowBlur: 30,
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                            backgroundColor: 'transparent',
                        },
                        areaColor: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: '#1cfbfe',
                                },
                                {
                                    offset: 1,
                                    color: '#3348e7',
                                },
                            ],
                            false
                        ),
                    },
                },
                data: data,
            },
            {
                name: '散点',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data),
                symbolSize: 10,
                symbol: 'circle',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                showEffectOn: 'render',
                itemStyle: {
                    normal: {
                        color: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.5,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(14,245,209,0.2)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(14,245,209,0.2)'
                            }, {
                                offset: 1,
                                color: 'rgba(14,245,209,1)'
                            }],
                            global: false // 缺省为 false
                        },
                    }

                },
            }
        ],
    };
    var chart = echarts.init(document.getElementById('chart-panel'));
    chart.setOption(option);
}





</script>

<template>
    <div class="center_note">
        <div class="center_note_count">
            <div class="center_note_count_view">
                <div class="center_note_count_view_top">
                    <div v-for="i in (10 - count.yearAmount.length > 0 ? 12 - count.yearAmount.length : 0)" :key="i">0
                    </div>
                    <div v-for="(item, index) in count.yearAmount" :key="index">{{ item }}</div>
                </div>
                <div class="center_note_count_view_bottom">
                    2026年即途充电站消费总金额
                </div>
            </div>
            <div class="center_note_count_view">
                <div class="center_note_count_view_top">
                    <div v-for="i in (8 - count.yearCount.length > 0 ? 8 - count.yearCount.length : 0)" :key="i">0</div>
                    <div v-for="(item, index) in count.yearCount" :key="index">{{ item }}</div>
                </div>
                <div class="center_note_count_view_bottom center_note_count_view_bgc">
                    2026年即途充电站消费订单数
                </div>
            </div>
        </div>


        <div id="chart-panel"></div>
        <div></div>

        <img src="/src/assets/img/-h-五公里内必有即途.png" style="position: absolute;bottom: 300px;right: 5%;" alt="">
        <!-- <div style="color: #C8F1F9;position: absolute;bottom: 430px;right: 5%;">
            <div class="flex">
                <div>两轮桩：</div>
                <div>{{count.deviceTwoTotal}}</div>
            </div>
            <div class="flex">
                <div>四轮桩：</div>
                <div>{{count.deviceFourTotal}}</div>
            </div>
        </div> -->

        <div class="center_note_view">
            <TableHeader title="充电桩收入排行" />
            <div style="height: 15px;"></div>
            <dv-scroll-board :config="config" style="width:100%;height:220px" />
        </div>
    </div>
</template>

<style scoped lang="scss">
.center_note {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;

    &_count {
        width: 100%;
        padding: 0 5%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 999;

        &_view {

            &_top {
                display: flex;
                align-items: center;

                div {
                    width: 31px;
                    height: 47px;
                    background: rgba(3, 12, 55, 0.5);
                    box-shadow: 0px 4px 30px 0px #00383F;
                    border: 1px solid #0D73A3;
                    margin-right: 10px;
                    font-weight: normal;
                    font-size: 26px;
                    color: #C8F1F9;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            &_bottom {
                margin-top: 10px;
                width: 100%;
                height: 30px;
                background: url("@/assets/img/ssssss.png") no-repeat;
                background-size: 100% 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 15px;
                color: #C8F1F9;
            }

            &_bgc {
                background: url("@/assets/img/sssssss.png") no-repeat;
                background-size: 100% 30px;
            }
        }
    }


    #chart-panel {
        width: 90%;
        height: 90%;
        position: absolute;
        top: 10%;
        left: 0;
    }

    &_view {
        width: 90%;
        background-color: rgba(4, 26, 66, 0.55);
    }
}
</style>
