<template>
    <div class="default-main">
        <TableHeader datePicker 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>
                <el-form-item label="电网标志">
                    <el-select v-model="tableStore.table.params.powerFlag" placeholder="请选择电网标志" filterable>
                        <el-option v-for="item in sign" :key="item.id" :label="item.name" :value="item.algoDescribe" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-DataAnalysis" @click="rankingClick(null, true)">
                        污染最大10个监测点
                    </el-button>
                </el-form-item>
            </template>
        </TableHeader>
        <div v-loading="tableStore.table.loading" class="pr10">
            <el-row>
                <el-col :span="12" class="pd10" style="position: relative">
                    <div class="legend">
                        <el-tag style="background: #339966" class="tag" size="small">1级</el-tag>
                        <span style="color: #339966" class="text">:无污染[0,1]</span>
                        <el-tag style="background: #3399ff" class="tag" size="small">2级</el-tag>
                        <span style="color: #3399ff" class="text">:轻微污染(1,1.2]</span>
                        <el-tag style="background: #ffcc33" class="tag" size="small">3级</el-tag>
                        <span style="color: #ffcc33" class="text">:轻度污染(1.2,1.6]</span>
                        <el-tag style="background: #ff9900" class="tag" size="small">4级</el-tag>
                        <span style="color: #ff9900" class="text">:中度污染(1.6,2]</span>
                        <el-tag style="background: #A52a2a" class="tag" size="small">5级</el-tag>
                        <span style="color: #A52a2a" class="text">:重度污染(2,+∞)</span>
                    </div>
                    <el-tabs v-model="radio1" type="border-card" @tab-change="handleTabChange">
                        <el-tab-pane label="列表" :name="0">
                            <div :style="{ height: layout.height }" style="overflow-y: auto">
                                <div class="cardBox">
                                    <el-card v-for="(item, index) in tableStore.table.data" :key="index">
                                        <template #header>
                                            <div style="cursor: pointer" @click="queryline(item, false)">
                                                <el-tag
                                                    v-if="item.data == 3.14159"
                                                    style="background: #ccc; color: #fff"
                                                    size="small"
                                                >
                                                    无
                                                </el-tag>
                                                <el-tag
                                                    v-if="0 <= item.data && item.data < 1 && item.data !== 3.14159"
                                                    style="background: #339966; color: #fff"
                                                    size="small"
                                                >
                                                    1级
                                                </el-tag>
                                                <el-tag
                                                    v-if="1 <= item.data && item.data < 1.2 && item.data !== 3.14159"
                                                    style="background: #3399ff; color: #fff"
                                                    size="small"
                                                >
                                                    2级
                                                </el-tag>
                                                <el-tag
                                                    v-if="1.2 <= item.data && item.data < 1.6 && item.data !== 3.14159"
                                                    style="background: #ffcc33; color: #fff"
                                                    size="small"
                                                >
                                                    3级
                                                </el-tag>
                                                <el-tag
                                                    v-if="1.6 <= item.data && item.data < 2 && item.data !== 3.14159"
                                                    style="background: #ff9900; color: #fff"
                                                    size="small"
                                                >
                                                    4级
                                                </el-tag>
                                                <el-tag
                                                    v-if="2 <= item.data && item.data && item.data !== 3.14159"
                                                    style="background: #A52a2a; color: #fff"
                                                    size="small"
                                                >
                                                    5级
                                                </el-tag>
                                                <span>{{ item.name }}</span>
                                            </div>
                                        </template>
                                        <div class="card-content">
                                            <div
                                                class="card-item"
                                                v-for="(item1, index1) in item.children"
                                                :key="index1"
                                                @click="queryline(item1, true)"
                                            >
                                                <el-tag
                                                    v-if="item1.data == 3.14159"
                                                    style="background: #ccc; color: #fff"
                                                    size="small"
                                                >
                                                    无
                                                </el-tag>
                                                <el-tag
                                                    v-if="0 <= item1.data && item1.data < 1 && item1.data !== 3.14159"
                                                    style="background: #339966; color: #fff"
                                                    size="small"
                                                >
                                                    1级
                                                </el-tag>
                                                <el-tag
                                                    v-if="1 <= item1.data && item1.data < 1.2 && item1.data !== 3.14159"
                                                    style="background: #3399ff; color: #fff"
                                                    size="small"
                                                >
                                                    2级
                                                </el-tag>
                                                <el-tag
                                                    v-if="
                                                        1.2 <= item1.data && item1.data < 1.6 && item1.data !== 3.14159
                                                    "
                                                    style="background: #ffcc33; color: #fff"
                                                    size="small"
                                                >
                                                    3级
                                                </el-tag>
                                                <el-tag
                                                    v-if="1.6 <= item1.data && item1.data < 2 && item1.data !== 3.14159"
                                                    style="background: #ff9900; color: #fff"
                                                    size="small"
                                                >
                                                    4级
                                                </el-tag>
                                                <el-tag
                                                    v-if="2 <= item1.data && item1.data && item1.data !== 3.14159"
                                                    style="background: #A52a2a; color: #fff"
                                                    size="small"
                                                >
                                                    5级
                                                </el-tag>
                                                <span class="xdf">
                                                    <el-tooltip
                                                        :show-arrow="false"
                                                        :offset="-0"
                                                        :content="item1.name"
                                                        popper-class="atooltip"
                                                        placement="bottom-start"
                                                    >
                                                        <div class="tooltipText">
                                                            {{ item1.name }}
                                                        </div>
                                                    </el-tooltip>
                                                </span>
                                            </div>
                                        </div>
                                    </el-card>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="图形" :name="1">
                            <MyEchartMap
                                :style="layout"
                                style="width: 100%"
                                id="EchartMap"
                                ref="EchartMap"
                                :options="echartMapList"
                                class="map"
                            />
                        </el-tab-pane>
                    </el-tabs>
                </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="zc" title="污染值">
                                <template #default="scope">
                                    <span v-if="scope.row.data == 3.14159" style="color: #000">暂无数据</span>
                                    <span v-if="scope.row.data !== 3.14159" style="color: #000">
                                        {{ scope.row.data }}
                                    </span>
                                </template>
                            </vxe-column>
                            <vxe-column field="zd" 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>
        <!-- 详情 -->
        <provinceDetails ref="provinceDetailsRef" />
        <!-- 排名前10的监测点 -->
        <ranking ref="rankingRef" />
    </div>
</template>
<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'
import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import provinceDetails from './components/provinceDetails.vue'
import ranking from './components/ranking.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'
defineOptions({
    name: 'harmonic-boot/qydetailedAnalysis/pollutionqy'
})
const carouselRef = ref()
const radio1 = ref(0)
const dictData = useDictData()
const echartList = ref({})
const provinceDetailsRef = ref()
const rankingRef = ref()
const EchartMap = ref()
const echartMapList: any = ref({})
const header = ref()
const options = dictData.getBasicData('Pollution_Statis', [
    'I_Neg',
    'V_Inharm',
    'V_Dev',
    'V_Unbalance',
    'Plt',
    'Freq_Dev'
])
const sign = dictData.getBasicData('power_flag')
console.log('🚀 ~ sign:', sign)
const tableStore = new TableStore({
    url: '/harmonic-boot/PollutionSubstation/deptSubstationRelations',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params.reportFlag = tableStore.table.params.interval
    },
    loadCallback: () => {
        histogram(tableStore.table.data)
    }
})
provide('tableStore', tableStore)

tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.statisticalType = options[0]
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = sign[0]?.algoDescribe || 0

tableStore.table.params.serverName = 'event-boot'
const handleTabChange = (val: any) => {
    if (val == 0) return
    setTimeout(() => {
        map(tableStore.table.data)
        EchartMap.value.GetEchar(dictData.state.area[0].name)
        // header.value.areaRef.change()
    }, 100)
}
// 地图数处理
const rankingClick = () => {
    rankingRef.value.open(tableStore.table.params)
}
const queryline = (row: any, flag: boolean) => {
    provinceDetailsRef.value.open(row, flag, tableStore.table.params)
}

// 表格数据处理
// 柱状图数据处理
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 < 1
                            ? '无污染'
                            : params[i].value < 1.2
                            ? '轻微污染'
                            : params[i].value < 1.6
                            ? '轻度污染'
                            : params[i].value < 2
                            ? '中度污染'
                            : '重度污染') +
                        '</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) {
                                    return '#339966'
                                } 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.14159
                                ) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#339966'
                                            }
                                        ],
                                        false
                                    )
                                } else if (params.value == 0.14159) {
                                    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'
                                    }
                                }
                            }
                        ]
                    }
                }
            ]
        }
    }
}

// 地图数处理
const map = (res: any) => {
    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,
            show: false,
            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.14159,
                    label: '无数据',
                    color: '#ccc'
                }
            ]
        },

        options: {
            series: [
                {
                    type: 'map',
                    geoIndex: 0,
                    data: arr1
                }
            ]
        }
    }
}

onMounted(() => {
    setTimeout(() => {
        tableStore.index()
    }, 10)
})
const layout = mainHeight(160) as any
const layout1 = mainHeight(93) as any
</script>
<style lang="scss" scoped>
.tall {
    height: calc(v-bind('layout1.height') / 2);
}

.tag {
    color: #fff;
    border: #fff;
    margin-left: 5px;
    width: 28px;
}

.text {
    font-weight: bold;
    font-size: 12px;
}

:deep(.cardBox) {
    box-sizing: border-box;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: max-content;
    grid-gap: 10px;
    justify-content: center;

    .el-card {
        background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));
        font-weight: bold;

        .el-card__header {
            padding: 10px !important;
            color: #fff;

            div {
                display: flex;
                justify-content: space-between;
            }
        }

        .el-card__body {
            padding: 10px !important;
        }

        .card-content {
            height: 200px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            overflow-y: auto;
            color: #000;

            .card-item {
                margin-bottom: 20px;
                width: 50%;
                display: flex;
                cursor: pointer;
            }

            .xdf {
                width: 70%;
            }

            .tooltipText {
                font-weight: 500;
                font-size: 12px;
                color: #fff;
                // width: 50%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-left: 5px;
            }
        }
    }
}
.map {
    height: v-bind('layout.height');
    width: 100%;
}
:deep(.el-carousel__indicators) {
    display: none;
}
.legend {
    position: absolute;
    right: 15px;
    top: 20px;
    z-index: 99;
}
</style>
