<template>
    <div class="default-main">
        <TableHeader datePicker area ref="header">
            <!-- <template v-slot:select>
               
            </template> -->
        </TableHeader>
        <div v-loading="tableStore.table.loading">
            <el-row :gutter="10" class="pd10">
                <el-col :span="11" style="position: relative">
                    <el-card>
                        <el-radio-group v-model="tableStore.table.params.radio" class="group">
                            <el-radio-button label="风电场" value="1" />
                            <el-radio-button label="光伏电站" value="2" />
                        </el-radio-group>
                        <MyEchartMap
                            ref="EchartMap"
                            :options="echartMapList"
                            class="map"
                            @eliminate="eliminate"
                            @getRegionByRegion="getRegionByRegion"
                            @clickMap="clickMap"
                        />
                    </el-card>
                </el-col>
                <el-col :span="13">
                    <el-card>
                        <div class="tall">
                            <h3 class="mb10">暂降列表</h3>
                            <vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
                                <vxe-column field="qy" title="风电场 " show-overflow-tooltip></vxe-column>
                                <vxe-column field="jcd" title="暂降发生时刻"></vxe-column>
                                <vxe-column field="zc" title="暂降(骤升)幅值(%)" sortable></vxe-column>
                                <vxe-column field="zc" title="暂降原因" sortable></vxe-column>
                                <vxe-column field="zc" title="严重度" sortable></vxe-column>
                                <vxe-column title="操作">
                                    <template #default="{ row }">
                                        <el-button type="text" size="small" link>查看波形</el-button>
                                    </template>
                                </vxe-column>
                            </vxe-table>
                        </div>
                    </el-card>
                    <el-card class="mt10">
                        <div class="tall">
                            <h3 class="mb10">暂降波形</h3>
                        </div>
                    </el-card>
                </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 TableStore from '@/utils/tableStore'
import { ref, onMounted, provide } from 'vue'
import { mainHeight } from '@/utils/layout'
defineOptions({
    name: 'newEnergy/highAndLowPressure'
})
const EchartMap = ref()
const dictData = useDictData()
const options = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const echartMapList: any = ref({})
const titleA = ref('')
const header = ref()
const distributionData: any = ref([])

const tableStore = new TableStore({
    url: '/event-boot/voltageRideThrough/view',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params.areaId =tableStore.table.params.deptIndex
        tableStore.table.params.type =tableStore.table.params.radio
    },
    loadCallback: () => {
        titleA.value = tableStore.table.params.statisticalType.name
        header.value.areaRef.change()
        // 处理地图数据
        map(tableStore.table.data)
        tabulation(tableStore.table.data)
        EchartMap.value.GetEchar(header.value.areaRef.areaName)
    }
})
provide('tableStore', tableStore)
tableStore.table.params.radio = '1'
// 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 = {
        title: {
            text: '高/低电压穿越'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                if (params.seriesType == 'bar3D') {
                    return [params.seriesName, params.name + '：' + params.value[2] + (params.value[3] || '')].join(
                        '<br />'
                    )
                }
            }
        },

        legend: {
            selectedMode: false
        },
        geo3D: {
            show: true,
            name: '浙江',
            itemStyle: {
                color: getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary-light-3'),
                borderWidth: 1,
                borderColor: '#fff'
            },
            emphasis: {
                label: { show: true, fontSize: 16 },
                itemStyle: {
                    color: getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary-light-7')
                }
            },
            viewControl: {
                alpha: 60,
                distance: 120
            },
            label: {
                show: true,
                color: '#fff',
                fontSize: 16,
                textStyle: {
                    color: '#fff',

                    backgroundColor: '#fff'
                }
            },

            data: [
                { name: '目标数', field: 'mbs', unit: '万人' },
                { name: '完成数', field: 'wcs', unit: '万人' }
            ]
        },
        options: {
            series: [
                {
                    name: '低压',
                    type: 'bar3D',
                    coordinateSystem: 'geo3D',
                    shading: 'lambert',
                    label: {
                        show: true,
                        position: 'top',
                        formatter: params => {
                            return params.value[2] || ''
                        }
                    },
                    data: [
                        {
                            adcode: 330100,
                            name: '沈阳',
                            wcs: 10,
                            mbs: 50,
                            wcl: 100,
                            value: [123.364125, 41.722823, 50, '']
                        },
                        {
                            adcode: 330200,
                            name: '葫芦岛',
                            wcs: 10,
                            mbs: 20,
                            wcl: 80,
                            value: [120.80488, 40.816372, 20, '']
                        },
                        {
                            adcode: 330300,
                            name: '本溪',
                            wcs: 10,
                            mbs: 30,
                            wcl: 100,
                            value: [124.024811, 41.428257, 30, '']
                        },
                        {
                            adcode: 330400,
                            name: '大连',
                            lng: '120.750865',
                            lat: '30.662653',
                            wcs: 10,
                            mbs: 40,
                            wcl: 100,
                            value: [121.57391, 38.947468, 40, '']
                        }
                    ],
                    barSize: 1,
                    minHeight: 1,
                    itemStyle: {
                        color: '#77DA63'
                    },
                    emphasis: {
                        label: { show: true }
                    },
                    zlevel: 1
                },
                {
                    name: '高压',
                    type: 'bar3D',
                    coordinateSystem: 'geo3D',
                    shading: 'lambert',
                    label: {
                        show: true,
                        position: 'top',
                        formatter: params => {
                            return params.value[2] || ''
                        }
                    },
                    data: [
                        {
                            adcode: 330100,
                            name: '沈阳',
                            wcs: 10,
                            mbs: 50,
                            wcl: 100,
                            value: [123.464125, 41.722823, 50, '']
                        },
                        {
                            adcode: 330200,
                            name: '葫芦岛',
                            wcs: 10,
                            mbs: 20,
                            wcl: 80,
                            value: [120.90488, 40.816372, 20, '']
                        },
                        {
                            adcode: 330300,
                            name: '本溪',
                            wcs: 10,
                            mbs: 30,
                            wcl: 100,
                            value: [124.124811, 41.428257, 30, '']
                        },
                        {
                            adcode: 330400,
                            name: '大连',

                            wcs: 10,
                            mbs: 40,
                            wcl: 100,
                            value: [121.67391, 38.947468, 40, '']
                        }
                    ],
                    barSize: 1,
                    minHeight: 1,
                    itemStyle: {
                        color: '#FFBF00'
                    },
                    emphasis: {
                        label: { show: true }
                    }
                }
            ]
        }
    }
}

// 表格数据处理
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 clickMap = (e: any) => {
    console.log('🚀 ~ clickMap ~ e:', e)
}
onMounted(() => {
    tableStore.index()
})
const layout = mainHeight(83) as any
const layout1 = mainHeight(93) as any
</script>
<style lang="scss" scoped>
.map {
    height: calc(v-bind('layout1.height') - 30px);
}
.tall {
    height: calc((v-bind('layout1.height') - 60px) / 2);
}
.group {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 10;
}

:deep(.el-card__body) {
    padding: 10px;
}
</style>
