<template>
    <div class="default-main">
        <TableHeader area date-picker 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"
                        @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" v-bind="defaultAttribute">
                            <vxe-column field="name" title="名称"></vxe-column>
                            <vxe-column field="data" :title="changeName">
                                <template #default="scope">
                                    <span v-if="scope.row.data == 3.14159" type="primary" size="small">暂无数据</span>
                                    <span v-if="scope.row.data !== 3.14159 && scope.row.data !== 0.1" type="primary"
                                        size="small">
                                        {{ scope.row.data }}
                                    </span>
                                    <span v-if="scope.row.data == 0.1" type="primary" size="small">/</span>
                                </template>
                            </vxe-column>

                            <vxe-column field="data" title="污区严重度评估">
                                <template #default="scope">
                                    <span v-if="
                                        0 <= scope.row.data &&
                                        scope.row.data < 1 &&
                                        scope.row.data !== 3.14159
                                    " style=" font-weight: bold;color: #339966;">
                                        无污染
                                    </span>
                                    <span v-if="
                                        1 <= scope.row.data &&
                                        scope.row.data < 1.2 &&
                                        scope.row.data !== 3.14159
                                    " style=" font-weight: bold;color: #3399ff;">
                                        轻微污染
                                    </span>
                                    <span v-if="
                                        1.2 <= scope.row.data &&
                                        scope.row.data < 1.6 &&
                                        scope.row.data !== 3.14159
                                    " style=" font-weight: bold;color: #ffcc33;">
                                        轻度污染
                                    </span>
                                    <span v-if="
                                        1.6 <= scope.row.data &&
                                        scope.row.data < 2 &&
                                        scope.row.data !== 3.14159
                                    " style=" font-weight: bold;color: #ff9900;">
                                        中度污染
                                    </span>
                                    <span v-if="
                                        2 <= scope.row.data && scope.row.data && scope.row.data !== 3.14159
                                    " style=" font-weight: bold;color: #A52a2a;">
                                        重度污染
                                    </span>
                                    <span v-if="scope.row.data == 3.14159" style="color: #000;">
                                        暂无评估
                                    </span>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="mask"></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 * as echarts from 'echarts/core'
import { defaultAttribute } from '@/components/table/defaultAttribute'
defineOptions({
    name: 'harmonic-boot/detailedAnalysis/pollution'
})
const EchartMap = ref()
const dictData = useDictData()
const changeName = ref('')
const echartMapList: any = ref({})
const echartList = ref({})
const header = ref()
const list: any = ref([])
const geoCoordMap: any = ref([])
const options = dictData.getBasicData('Pollution_Statis', ['V_All', 'I_Neg', 'V_Inharm', 'V_Dev', 'V_Unbalance', 'Plt', 'Freq_Dev'])
const tableStore = new TableStore({
    url: '/harmonic-boot/PollutionSubstation/deptSubstationRelations',
    method: 'POST',
    column: [],
    beforeSearchFun: () => { },
    loadCallback: () => {
        changeName.value = tableStore.table.params.statisticalType.name
        map(tableStore.table.data)
        histogram(tableStore.table.data)
        EchartMap.value.GetEchar(header.value.areaRef.areaName)
       // console.log("🚀 ~ header.value.areaRef.areaName:", header.value.areaRef.areaName)

    }
})

tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.reportFlag = 3
tableStore.table.params.statisticalType = options[0]
provide('tableStore', tableStore)

// 地图点击事件
const getRegionByRegion = (list: any) => {
   // console.log("🚀 ~ getRegionByRegion ~ list:", list)
    tableStore.table.params.deptIndex = list.id
    tableStore.onTableAction('search', {})
}




// 地图数处理
const map = (res: any) => {
   // console.log("🚀 ~ map ~ res:", res)
    let areaData: any = []
    let xarr = []
    let yarr = []
    let arr = []
    let arr1: any = []
    res.forEach(element => {
        xarr.push(element.name)
        if (element.data == 0) {
            element.data = 0.1
            yarr.push(element.data)
        }
        yarr.push(element.data)
        let p = {
            name: element.name,
            value: element.data
        }
        arr.push(p)
        let d = element.name.split('\n')
        let p1 = {
            name: d[0],
            value: element.data == 3.14159 ? -1 : element.data
        }

        arr1.push(p1)
    })


    echartMapList.value = {
        name: '',
        title: {
            text: '电能质量污区图分布'
        },
        tooltip: {
            formatter: function (params) {
                var tips = ''

                if (params.value === -1 || window.isNaN(params.value)) {
                    tips =
                        "<font style='color:#fff'>" +
                        params.name +
                        '</font><br/>区域污染评估:' +
                        "<font style='color:#fff'><font style='color:#fff'>暂无数据</font><br/>"
                } else if (params.value === 0.1 || window.isNaN(params.value)) {
                    tips =
                        "<font style='color:#fff'>" +
                        params.name +
                        '</font><br/>区域污染评估:' +
                        "<font style='color:#fff'><font style='color:#fff'>暂无数据</font><br/>"
                } else {
                    tips +=
                        "<font style='color:#fff'>" +
                        params.name +
                        '</font><br/>区域污染评估' +
                        "<font style='color:#fff'>：" +
                        params.value +
                        '</font><br/>'
                }
                return tips
            }
        },


        visualMap: {
            min: 0,
            max: 2,
            left: 25,
            bottom: 40,
            pieces: [
                {
                    gt: 2,
                    lt: 10000,
                    label: '重度污染',
                    color: '#A52a2a',
                },
                {
                    gte: 1.2,
                    lt: 1.6,
                    label: '轻度污染',
                    color: '#FFCC33'
                },
                {
                    gt: 1.6,
                    lt: 2,
                    label: '中度污染',
                    color: '#FF9900'
                },
                {
                    gte: 1,
                    lte: 1.2,
                    label: '轻微污染',
                    color: '#3399FF'
                },
                {
                    gte: 0.1,
                    lte: 1,
                    label: '无污染',
                    color: '#339966'
                },
                {
                    gte: -1,
                    lte: 0.05,
                    label: '无数据',
                    color: '#ccc'
                }
            ],
        },

        options: {
            series: [
                {

                    type: "map",
                    geoIndex: 0,
                    data: arr1,

                }
            ]
        }


    }
}

// 柱状图数据处理
const histogram = (res: any) => {
    echartList.value = {
        title: {
            text: '区域'
        },
        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 == 0.14159 ? '暂无数据' : params[i].value) + '</br/>'
                }
                return tips
            }
        },

        xAxis: {
            name: '区域',
            data: res.map((item: any) => item.name)
        },
        yAxis: {
            name: '等级',// 给X轴加单位
            min: 0,
            max: 2,
            interval: 0.2,
            splitLine: {
                show: false
            },
            axisLabel: {
                show: true,

                // 这里重新定义就可以
                formatter: function (value, index) {
                    var texts = []
                    if (value === 1) {
                        texts.push('1级')
                    } else if (value === 1.2) {
                        texts.push('2级')
                    } else if (value === 1.4) {
                        texts.push('3级')
                    } else if (value === 1.6) {
                        texts.push('4级')
                    } else if (value === 2) {
                        texts.push('5级')
                    }
                    return texts
                }
            },
        },

        options: {
            dataZoom: null,
            series: [
                {

                    type: 'bar',
                    data: res.map((item: any) => {
                        return item.data == 3.14159 ? 0.14159 : item.data
                    }),
                    barMaxWidth: 30,

                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                if (params.value == 0 || params.value == 0.14159) {
                                    return '#ccc'
                                } else if (params.value > 2) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#A52a2a'
                                            }
                                        ],
                                        false
                                    )
                                } else if (1.6 < params.value && params.value <= 2) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#FF9900'
                                            }
                                        ],
                                        false
                                    )
                                } else if (1.2 < params.value && params.value <= 1.6) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#FFCC33'
                                            }
                                        ],
                                        false
                                    )
                                } else if (1 < params.value && params.value <= 1.2) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#3399FF'
                                            }
                                        ],
                                        false
                                    )
                                } else if (
                                    0 < params.value &&
                                    params.value <= 1 &&
                                    params.value >= 0 &&
                                    params.value !== 0.05
                                ) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#339966'
                                            }
                                        ],
                                        false
                                    )
                                } else if (params.value == 0.05) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#999999'
                                            }
                                        ],
                                        false
                                    )
                                }
                            }
                        }
                    },
                    markLine: {
                        silent: false,
                        symbol: 'circle',
                        lineStyle: {
                            color: 'red',
                            width: 1
                        },
                        emphasis: {
                            lineStyle: {
                                width: 1
                            }
                        },
                        data: [
                            {
                                name: '',
                                yAxis: 1,
                                lineStyle: {
                                    color: '#339966'
                                },
                                label: {
                                    //position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#339966'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 1.2,
                                lineStyle: {
                                    color: '#3399FF'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#3399FF'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 1.4,
                                lineStyle: {
                                    color: '#FFCC33'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#FFCC33'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 1.6,
                                lineStyle: {
                                    color: '#FF9900'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#FF9900'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 2,
                                lineStyle: {
                                    color: '#A52a2a'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#A52a2a'
                                    }
                                }
                            }
                        ]
                    },

                }
            ]
        }
    }
}

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);
}

.mask {
    width: 100px;
    height: 150px;
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    left: 25px;
    bottom: 40px;
    z-index: 999;
}
</style>
