<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 pt10" :options="echartList" />
                    <div class="tall">
                        <vxe-table height="auto" auto-resize :data="list" v-bind="defaultAttribute">
                            <vxe-column field="gdName" title="供电公司"></vxe-column>
                            <vxe-column field="subName" title="变电站"></vxe-column>
                            <vxe-column field="lineName" title="监测点"></vxe-column>
                            <vxe-column field="tail" 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'
import { color } from 'echarts'
defineOptions({
    name: 'Region/thermodynamicDiagram'
})
const EchartMap = ref()
const dictData = useDictData()
const echartMapList: any = ref({})
const echartList = ref({})
const header = ref()
const list: any = ref([])
const geoCoordMap: any = ref([])

const tableStore = new TableStore({
    url: '/event-boot/area/getEventHeatMap',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {},
    loadCallback: () => {
        geoCoordMap.value = []
          list.value=[]
        header.value.areaRef.change()
        // 处理地图数据
        tableStore.table.data.eventHeatMapValue.forEach(val => {
            val.forEach(item => {
                list.value.push(item)
                geoCoordMap.value.push([item.lng, item.lat, item.tail])
            })
        })

        map(geoCoordMap.value)
        histogram(tableStore.table.data.areaValue)
        EchartMap.value.GetEchar(header.value.areaRef.areaName)
    }
})

tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.reportFlag = 3
tableStore.table.params.statFlag = true
tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Load_Type'])[3]
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) => {
    let areaData: any = []

    res.map(item => {
        areaData.push(...new Array(3).fill(item))
    })
    let maxNum = 0
    let minNum = 0
    let num: any = []

    if (areaData.length > 0) {
        areaData.forEach(item => {
            num.push(item[2])
        })
        for (let i = 0; i < num.length; i++) {
            if (num[i] > maxNum) {
                maxNum = num[i]
            } else if (num[i] < minNum) {
                minNum = num[i]
            }
        }
    }
    console.log('areaData', areaData)
    echartMapList.value = {
        name: '',
        title: {
            text: '区域暂降热力图分布'
        },

        visualMap: {
            left: 26,
            bottom: 40,

            show: true,
            color: ['#A52a2a', '#DAA520'],
            min: 0,
            max: maxNum||100,
            textStyle: {
                color: '#000',
                fontSize: 12
            }
        },

        options: {
            series: [
                {
                    mapType: 'nanshan',
                    type: 'heatmap',
                    top: 'center',
                    left: 'center',
                    width: '65%',
                    height: '95%',

                    // name: 'AQI',

                    coordinateSystem: 'geo',
                    blurSize: 40,
                    data: areaData
                    // 鼠标移入
                }
            ]
        }
    }
}

// 柱状图数据处理
const histogram = (res: any) => {
    echartMapList.value.visualMap.max = Math.max(...res.map((item: any) => item.count)) || 1
    
    echartList.value = {
        title: {
            text: '区域暂降次数'
        },
        xAxis: {
            name: '(区域)',
            data: res.map((item: any) => item.name)
        },
        yAxis: {
            name: '暂降次数'
        },

        options: {
            series: [
                {
                    name: '暂降次数',
                    type: 'bar',
                    data: res.map((item: any) => item.count)
                }
            ]
        }
    }
}

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>
