<template>
    <div class="default-main">
        <TableHeader area ref="header">
            <template v-slot:select>
                <el-form-item label="统计类型">
                    <el-select
                        v-model="tableStore.table.params.statisticalType"
                        value-key="id"
                        placeholder="请选择统计类型"
                        filterable
                    >
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
                    </el-select>
                </el-form-item>
            </template>
        </TableHeader>
        <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="qy"
                                :title="
                                    titleA == '电压等级'
                                        ? '电压等级'
                                        : titleA == '终端厂家'
                                        ? '终端厂家'
                                        : titleA == '干扰源类型'
                                        ? '干扰源类型'
                                        : titleA == '电网拓扑'
                                        ? '区域'
                                        : ''
                                "
                                show-overflow-tooltip
                            ></vxe-column>
                            <vxe-column field="jcd" title="监测点数(个数)"></vxe-column>
                            <vxe-column field="zc" title="通讯正常(个数)" sortable></vxe-column>
                            <vxe-column field="zd" title="通讯中断(个数)" sortable></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 { defaultAttribute } from '@/components/table/defaultAttribute'
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'
defineOptions({
    name: 'Region/distribution'
})
const EchartMap = ref()
const dictData = useDictData()
const options = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const echartMapList: any = ref({})
const echartList = ref({})
const titleA = ref('')
const header = ref()
const distributionData: any = ref([])

const tableStore = new TableStore({
    url: '/event-boot/area/getAreaLineDetail',
    method: 'POST',
    column: [],
    loadCallback: () => {
        titleA.value = tableStore.table.params.statisticalType.name
        header.value.areaRef.change()
        // 处理地图数据
        map(tableStore.table.data)
        tabulation(tableStore.table.data)
        histogram(tableStore.table.data)
        EchartMap.value.GetEchar(header.value.areaRef.areaName)
    }
})
provide('tableStore', tableStore)

// tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.serverName = 'event-boot'

// 地图点击事件
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: '监测网分布' //+ "(" + _this.titles + ")",
        },
        tooltip: {
            formatter: function (params: any) {
                //console.log(params)
                var tips = ''
                if (params.value == 0) {
                    tips = "<font style='color: #000'>暂无数据</font><br/>"
                } else {
                    tips +=
                        "<font style='color: #000'> " +
                        params.name +
                        '</font><br/>区域暂降评估' +
                        "<font style='color: #000'>:" +
                        params.value +
                        '</font><br/>'
                }
                return tips
            }
        },
        color: ['green', 'red'],
        legend: {
            selectedMode: false,
            data: [
                {
                    name: '正常'
                },
                {
                    name: '中断'
                }
            ]
        },
        options: {
            series: []
        }
    }
    let mapList: any = [[], [], []]
    if (res.substationDetailVOList != null) {
        res.substationDetailVOList.forEach((item: any) => {
            if (item.color == 'green') {
                mapList[0].push(item)
            } else if (item.color == 'red') {
                mapList[1].push(item)
            }
        })
    }
    mapList.forEach((item: any, ind: number) => {
        echartMapList.value.options.series.push({
            type: 'scatter',
            mapName: 'china',
            name: ind == 0 ? '正常' : ind == 1 ? '中断' : '变电站',
            coordinateSystem: 'geo',
            geoIndex: 0,
            animation: false, //坐标点是否显示动画
            roam: true,
            symbol: 'pin',
            symbolSize: function () {
                //坐标点大小
                return 30
            },
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            data: item.map(function (itemOpt: any) {
                // console.log(itemOpt);
                return {
                    name: itemOpt.srbName,
                    value: [
                        parseFloat(itemOpt.coordY), //经度
                        parseFloat(itemOpt.coordX) //维度
                    ],

                    itemStyle: {
                        //地图区域的多边形
                        normal: {
                            color: itemOpt.color, //坐标点颜色
                            shadowBlur: 0, // 图形阴影的模糊大小
                            shadowOffsetX: 0 // 阴影水平方向上的偏移距离。
                        }
                    },
                    tooltip: {
                        //仅在 options中最外层的 tooltip.trigger 为 'item'时有效
                        position: 'bottom', //提示框位置,仅在 options中最外层的 tooltip.trigger 为 'item'时有效
                        formatter: function (params: any, ticket: any, callback: any) {
                            var strHtml = '<div>变电站(场站):' + itemOpt.subName + '<br/>' + '监测点:' + itemOpt.srbName

                            strHtml += '</div>'
                            return strHtml
                        }
                    }
                }
            })
        })
    })
}

// 表格数据处理
const tabulation = (res: any) => {
    distributionData.value = []
    for (var i = 0; i < res.areaValue.length; i++) {
        distributionData.value.push({
            qy: res.areaValue[i][0],
            jcd: res.areaValue[i][1],
            zc: res.areaValue[i][2],
            zd: res.areaValue[i][3]
        })
    }
}
// 柱状图数据处理
const histogram = (res: any) => {
    echartList.value = {
        title: {
            text:
                titleA.value == '电压等级'
                    ? '电压等级'
                    : titleA.value == '终端厂家'
                    ? '终端厂家'
                    : titleA.value == '干扰源类型'
                    ? '干扰源类型'
                    : titleA.value == '电网拓扑'
                    ? header.value.areaRef.areaName
                    : '' // 给X轴加单位
        },
        tooltip: {
            formatter: function (params: any) {
                // console.log(params);
                var tips = ''
                for (var i = 0; i < params.length; i++) {
                    tips += params[i].name + '</br/>'
                    tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
                }
                return tips
            }
        },

        xAxis: {
            name:
                titleA.value == '电压等级'
                    ? '(电压\n等级)'
                    : titleA.value == '终端厂家'
                    ? '(终端\n厂家)'
                    : titleA.value == '干扰源类型'
                    ? '(干扰\n源类型)'
                    : titleA.value == '电网拓扑'
                    ? '(区域)'
                    : '', // 给X轴加单位
            data: distributionData.value.map((item: any) => item.qy)
        },
        yAxis: {
            name: '监测点数（个）' // 给X轴加单位
        },
        options: {
            series: [
                {
                    //   name: '暂降次数',
                    type: 'bar',
                    data: distributionData.value.map((item: any) => item.jcd),
                    barMaxWidth: 30,
                    itemStyle: {
                        normal: {
                            color: '#07CCCA'
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            //数值样式
                            color: '#000'
                        },
                        fontSize: 12
                    }
                }
            ]
        }
    }
}

onMounted(() => {
    tableStore.index()
})
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>
