<template>
    <div class="default-main">
        <TableHeader area date-picker ref="header" />
        <div v-loading="tableStore.table.loading" class="pr10">
            <el-row>
                <el-col :span="12">
                    <MyEchartMap
                        ref="EchartMap"
                        :options="echartMapList"
                        class="map"
                        @eliminate="eliminate"
                        @getRegionByRegion="getRegionByRegion"
                    />
                </el-col>
                <el-col :span="12">
                    <my-echart class="tall" :options="echartList" />
                    <div class="tall">
                        <vxe-table
                            height="auto"
                            auto-resize
                            :data="tableStore.table.data.param"
                            v-bind="defaultAttribute"
                        >
                            <vxe-column field="name" title="区域"></vxe-column>
                            <vxe-column field="count" title="暂降次数"></vxe-column>
                            <vxe-column field="size" title="监测点个数"></vxe-column>
                        </vxe-table>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableStore from '@/utils/tableStore'
import { ref, onMounted, provide } from 'vue'
import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
defineOptions({
    name: 'Region/sagSeverity'
})
const EchartMap = ref()
const dictData = useDictData()
const echartMapList: any = ref({})
const echartList = ref({})
const header = ref()

const tableStore = new TableStore({
    url: '/event-boot/largeScreen/getAreaDownStatistics',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {},
    loadCallback: () => {
        header.value.areaRef.change()
        let allData: any = []
        tableStore.table.data.param.forEach(item => {
            allData.push({
                name: item.name,
                value: item.count
            })
        })

        map(allData)
        histogram(allData)
        EchartMap.value.GetEchar(header.value.areaRef.areaName)
    }
})

provide('tableStore', tableStore)

// 地图点击事件
const getRegionByRegion = (list: any) => {
    tableStore.table.params.deptIndex = list.id
    tableStore.onTableAction('search', {})
}
// 消除点
const eliminate = (name: string) => {
    echartMapList.value.options.series = []
    EchartMap.value.GetEchar(name)
}

// 地图数处理
const map = (res: any) => {
   
    echartMapList.value = {
        name: '',
        title: {
            text: '区域暂降次数统计'
        },
        tooltip: {
            formatter: function (params) {
                var tips = ''
                if (params.value >= 0) {
                    tips += params.name + '</br/>'
                    tips += '暂降次数' + ':' + params.value + '次' + '<br/>'
                }
                return tips
            }
        },

        visualMap: {
            left: 25,
            bottom: 40,
            show: true,
            inRange: {
                color: ['#ccc', '#07CCCA ']
            },
            min: 0,
            max: res.reduce((max, obj) => Math.max(max, obj.value), 0) || 1,
            calculable: true,
            textStyle: {
                color: '#000',
                fontSize: 12
            }
        },

        options: {
            series: [
                {
                    type: 'map',
                    mapType: 'china',
                    coordinateSystem: 'geo',
                    geoIndex: 0,
                    animation: false, //坐标点是否显示动画
                    roam: true,
                    selectedMode: 'false', //是否允许选中多个区域
                    symbol: 'pin',
                    rippleEffect: {
                        brushType: 'fill' // stroke|fill
                    },
                    data: res
                    // 鼠标移入
                }
            ]
        }
    }
}

// 柱状图数据处理
const histogram = (res: any) => {
    echartList.value = {
        title: {
            text: '区域暂降次数'
        },
        xAxis: {
            name: '(区域)',
            data: res.map((item: any) => item.name)
        },
        yAxis: {
            name: '暂降次数'
        },
        options: {
            series: [
                {
                    name: '暂降次数',
                    type: 'bar',
                    data: res
                }
            ]
        }
    }
}

onMounted(() => {
    setTimeout(() => {
        tableStore.index()
    }, 10)
})
const layout = mainHeight(83) as any
const layout1 = mainHeight(93) as any
</script>
<style lang="scss" scoped>
.map {
    height: v-bind('layout.height');
}
.tall {
    height: calc(v-bind('layout1.height') / 2);
}
</style>
