<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="distributionData" v-bind="defaultAttribute">
                            >
                            <vxe-column field="areaName" title=" 区域" show-overflow-tooltip></vxe-column>
                            <vxe-column field="ci" title="区域暂降评估">
                                <template #default="{ row }">
                                    {{ row.ci == 0.05 ? '暂无数据' : row.ci.toFixed(2) }}
                                </template>
                            </vxe-column>
                            <vxe-column sortable field="isCount" title="等级">
                                <template #default="{ row }">
                                    <span v-if="row.ci == 0.05">暂无等级</span>
                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.2 && row.ci < 0.4">1级</span>
                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.4 && row.ci < 0.8">2级</span>
                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.8 && row.ci < 1.2">3级</span>
                                    <span v-if="row.ci !== 0.05 && row.ci >= 1.2">4级</span>
                                </template>
                            </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/distribution'
})
const EchartMap = ref()
const dictData = useDictData()
const echartMapList: any = ref({})
const echartList = ref({})
const header = ref()
const distributionData: any = ref([])
const list: any = ref([])
const geoCoordMap: any = ref([])

const tableStore = new TableStore({
    url: '/event-boot/area/getEventHeatMap',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {},
    loadCallback: () => {
        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(tableStore.table.data)
        // tabulation(tableStore.table.data)
        // histogram(tableStore.table.data)
        EchartMap.value.GetEchar(header.value.areaRef.areaName)
    }
})

tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 1
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 = []

    if (geoCoordMap.value.lengt > 0) {
        geoCoordMap.value.map(item => {
            // console.log("🚀 ~ map ~ item:", item)
            areaData.push(...new Array(3).fill(item))
        })
    }
    let maxNum = 0
    let minNum = 0
    let num: any = []
    // console.log('🚀 ~ map ~ areaData:', areaData)

    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]
            }
        }
    }

    echartMapList.value = {
        name: '',
        title: {
            text: '区域暂降热力图分布'
        },

        visualMap: {
            left: 26,
            bottom: 40,
            show: true,
            color: ['#ff0000', '#37b70c'],
            min: minNum,
            max: maxNum,
            calculable: true,
            textStyle: {
                color: '#000',
                fontSize: 12
            }
        },

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

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

// 表格数据处理
const tabulation = (res: any) => {
    distributionData.value = res
    distributionData.value.forEach((item: any) => {
        if (item.ci == 0) {
            item.ci = 0.05
        }
    })
}
// 柱状图数据处理
const histogram = (res: any) => {
    echartList.value = {
        title: {
            text: header.value.areaRef.areaName
        },
        tooltip: {
            formatter: function (params: any) {
                var tips = ''
                for (var i = 0; i < params.length; i++) {
                    if (params[i].value == 0.05) {
                        tips += params[i].name + '</br>'
                        tips += '评估值:0'
                    } else {
                        tips += params[i].name + '</br>'
                        tips += '评估值:' + params[i].value
                    }
                }
                return tips
            }
        },

        xAxis: {
            name: '(区域)',

            data: res.map((item: any) => item.areaName)
        },
        yAxis: {
            name: ' 等级',
            min: 0,
            max: 2,
            // minInterval: 0.2,
            axisLabel: {
                fontSize: 14,
                // interval: 4,
                formatter: function (value: any) {
                    var texts = ''
                    if (value === 0.4) {
                        texts = '1级'
                    } else if (value === 0.8) {
                        texts = '2级'
                    } else if (value === 1.2) {
                        texts = '3级'
                    } else if (value === 2) {
                        texts = '4级'
                    }
                    return texts
                }
            }
        },
        options: {
            series: [
                //
                {
                    name: '',
                    data: res.map((item: any) => {
                        if (item.ci == 0) {
                            return (item.ci = 0.05)
                        }
                        return item.ci.toFixed(2)
                    }),

                    barMaxWidth: 30,
                    barMinHeight: 1,
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: function (params: any) {
                                if (params.value > 2 && params.value !== 0.05) {
                                    return '#339966'
                                } else if (0.8 < params.value && params.value <= 1.2 && params.value !== 0.05) {
                                    return '#3399FF'
                                } else if (0.4 < params.value && params.value <= 0.8 && params.value !== 0.05) {
                                    return '#FF9900'
                                } else if (0 < params.value && params.value <= 0.4 && params.value !== 0.05) {
                                    return '#A52a2a'
                                } else if (params.value == 0.05) {
                                    return '#A52a2a'
                                }
                            }
                        }
                    },
                    markLine: {
                        silent: false,
                        symbol: 'circle',
                        lineStyle: {
                            color: 'red',
                            width: 1
                        },
                        emphasis: {
                            lineStyle: {
                                width: 1
                            }
                        },
                        data: [
                            {
                                name: '',
                                yAxis: 0.4,
                                lineStyle: {
                                    color: '#A52a2a'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#A52a2a'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 0.8,
                                lineStyle: {
                                    color: '#FF9900'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#FF9900'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 1.2,
                                lineStyle: {
                                    color: '#3399FF'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#3399FF'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 2,
                                lineStyle: {
                                    color: '#339966'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#339966'
                                    }
                                }
                            }
                        ]
                    }
                }
            ]
        }
    }
}

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>
