<template>
    <!-- 变电站 -->
    <el-dialog draggable title="变电站统计" v-model="dialogVisible" width="1400px" :before-close="handleClose">
        <el-row style="height: 300px" :gutter="20">
            <el-col :span="12">
                <div class="title">
                    <span>趋势分析</span>
                    <!-- <el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
                        <el-option label="年" value="1" />
                        <el-option label="月" value="3" />
                    </el-select> -->
                    <el-radio-group v-model="time" style="margin-right: 50px" @change="analysis" size="small">
                        <el-radio-button label="1">年</el-radio-button>
                        <el-radio-button label="3">月</el-radio-button>
                    </el-radio-group>
                </div>
                <MyEChart style="height: 260px" :options="trendEChart" />
            </el-col>
            <el-col :span="12">
                <div class="title">
                    <span class="text-style" @click="jump">
                        污染告警
                        <el-popover placement="right" :width="190" trigger="hover">
                            <template #reference>
                                <WarningFilled class="WarningFilled" />
                            </template>
                            <div class="text">
                                <span style="color: #00b07d">无污染：0</span>
                                <br />
                                <span style="color: #3399ff">轻微污染：(0 , 100]</span>
                                <br />
                                <span style="color: #ffcc33">轻度污染：(100 , 1000]</span>
                                <br />
                                <span style="color: #ff9900">中度污染：(1000 , 10000]</span>
                                <br />
                                <span style="color: #a52a2a">重度污染：(10000</span>
                            </div>
                        </el-popover>
                    </span>
                    <!-- <el-select v-model="contaminate" style="width: 120px; margin-right: 80px" @change="contaminateC">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select> -->
                    <el-radio-group
                        v-model="contaminate"
                        style="margin-right: 50px"
                        @change="contaminateC"
                        size="small"
                    >
                        <el-radio-button v-for="item in options" :label="item.id">{{ item.name }}</el-radio-button>
                    </el-radio-group>
                </div>
                <!-- :style="i == 3 ? `margin-left: 20%;` : ``" -->
                <div class="pie">
                    <MyEChart v-for="(item, i) in picEChart" @click="echartClick" class="MyEChart" :options="item" />
                </div>
            </el-col>
        </el-row>
        <div>
            <div class="title mb10">
                <span>区域变电站统计</span>
            </div>
            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="325px" :data="tableData">
                <vxe-column field="name" title="区域" />
                <vxe-column field="num" sortable title="变电站总数" />
                <vxe-column field="num1" sortable title="无污染数量" :formatter="formatter" />
                <vxe-column field="num2" sortable title="轻微污染数量" :formatter="formatter" />
                <vxe-column field="num3" sortable title="轻度污染数量" :formatter="formatter" />
                <vxe-column field="num4" sortable title="中度污染数量" :formatter="formatter" />
                <vxe-column field="num5" sortable title="重度污染数量" :formatter="formatter" />
                <!-- <vxe-column field="num6" sortable title="暂无数据数量" :formatter="formatter" /> -->
            </vxe-table>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { WarningFilled } from '@element-plus/icons-vue'
import { getPollutionAlarmList, getPollutionAlarmData, getGridDiagramSubTendency } from '@/api/device-boot/panorama'
import { useRouter } from 'vue-router'
const router = useRouter()
const dictData = useDictData()
const dialogVisible: any = ref(false)
const time = ref('1')
const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
const options: any = dictData.getBasicData('Pollution_Calc')
// .filter(item => {
//     if (item.code == 'V_Harmonic' || item.code == 'I_All') {
//         return item
//     }
// })
const contaminate = ref(options[0]?.id)
const rowList: any = ref({})
const trendEChart: any = ref({})
const tableData: any = ref([])

const picEChart: any = ref([{}, {}, {}, {}, {}])

const open = async (row: any) => {
    time.value = '1'
    rowList.value = {
        deviceInfoParam: {
            ...row
        },
        pageNum: 1,
        pageSize: 1000,
        ...row
    }
    analysis(1)
    // 污染
    contaminateC()
    // 列表

    dialogVisible.value = true
}
const contaminateC = () => {
    // rowList.value.deviceInfoParam.ids=[contaminate.value]
    // getPollutionAlarmData({ ...rowList.value, ids: [contaminate.value] }).then(res => {
    //     let data = []

    //     let a1 = 0
    //     let a2 = 0
    //     let a3 = 0
    //     let a4 = 0
    //     let a5 = 0
    //     if (rowList.value.isUpToGrid == 0) {
    //         data = res.data.info
    //     } else {
    //         data = res.data.gwInfo
    //     }
    //     for (let i = 0; i < data.length; i++) {
    //         if (data[i] >= 2) {
    //             ++a5
    //         } else if (data[i] >= 1.6 && data[i] < 2) {
    //             ++a4
    //         } else if (data[i] >= 1.2 && data[i] < 1.6) {
    //             ++a3
    //         } else if (data[i] >= 1 && data[i] < 1.2) {
    //             ++a2
    //         } else if (data[i] >= 0 && data[i] < 1) {
    //             ++a1
    //         }
    //     }

    //     let list = [
    //         {
    //             value: ((a1 / data.length || 0) * 100).toFixed(2),
    //             name: `无污染：${a1}座`
    //         },
    //         {
    //             value: ((a2 / data.length || 0) * 100).toFixed(2),
    //             name: `轻微污染：：${a2}座`
    //         },
    //         {
    //             value: ((a3 / data.length || 0) * 100).toFixed(2),
    //             name: `轻度污染：${a3}座`
    //         },
    //         {
    //             value: ((a4 / data.length || 0) * 100).toFixed(2),
    //             name: `中度污染：${a4}座`
    //         },
    //         {
    //             value: ((a5 / data.length || 0) * 100).toFixed(2),
    //             name: `重度污染：${a5}座`
    //         }
    //     ]
    //     const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#A52a2a']

    //     list.forEach((item, i) => {
    //         picEChart.value[i] = {
    //             legend: {
    //                 type: 'scroll',
    //                 orient: 'vertical',
    //                 left: 10,
    //                 top: '10%'
    //             },
    //             xAxis: {
    //                 show: false
    //             },
    //             yAxis: {
    //                 show: false
    //             },
    //             options: {
    //                 toolbox:null,
    //                 dataZoom: null,
    //                 series: [
    //                     {
    //                         type: 'gauge',
    //                         startAngle: 180,
    //                         center: ['50%', '80%'],
    //                         radius: '135%',
    //                         endAngle: 0,
    //                         min: 0,
    //                         max: 100,
    //                         progress: {
    //                             show: true,
    //                             width: 15,
    //                             itemStyle: {
    //                                 color: color[i]
    //                             }
    //                         },
    //                         pointer: {
    //                             show: false
    //                         },
    //                         axisLine: {
    //                             lineStyle: {
    //                                 width: 15,
    //                                 color: [[1, '#f4f4f4']]
    //                             }
    //                         },
    //                         axisTick: {
    //                             show: false
    //                         },
    //                         splitLine: {
    //                             show: false
    //                         },
    //                         axisLabel: {
    //                             show: false
    //                             // distance: 5,
    //                             // color: '#666',
    //                             // fontSize: 12,
    //                             // formatter: function (value: any) {
    //                             //     if (value === 0 || value === 100) {
    //                             //         return value + '%'
    //                             //     }
    //                             // }
    //                         },
    //                         anchor: {
    //                             show: false,
    //                             showAbove: false,
    //                             size: 25,
    //                             itemStyle: {
    //                                 borderWidth: 60
    //                             }
    //                         },
    //                         title: {
    //                             show: true,
    //                             offsetCenter: [0, '20%'],
    //                             fontSize: 14
    //                         },
    //                         detail: {
    //                             valueAnimation: true,
    //                             fontSize: 14,
    //                             lineHeight: 20,
    //                             color: color[i],
    //                             fontWeight: 'bold',
    //                             offsetCenter: [0, '-20%'],
    //                             formatter: function (value: any) {
    //                                 return '{a|占比} ' + '\n' + value + '{a|%}'
    //                             },
    //                             rich: {
    //                                 a: {
    //                                     color: '#333',
    //                                     fontSize: 16,
    //                                     lineHeight: 30
    //                                 }
    //                             }
    //                         },
    //                         data: [item]
    //                     }
    //                 ]
    //             }
    //         }
    //     })
    // })
    getPollutionAlarmList({ ...rowList.value, ids: [contaminate.value] }).then(res => {
        tableData.value = res.data.map((item: any) => {
            return {
                name: item[0],
                num: item[1],
                num1: item[2],
                num2: item[3],
                num3: item[4],
                num4: item[5],
                num5: item[6],
                num6: item[7]
            }
        })
 

        let data = []
        let a1 = tableData.value.reduce((t, item) => t + (item.num1 - 0 || 0), 0)
        let a2 = tableData.value.reduce((t, item) => t + (item.num2 - 0 || 0), 0)
        let a3 = tableData.value.reduce((t, item) => t + (item.num3 - 0 || 0), 0)
        let a4 = tableData.value.reduce((t, item) => t + (item.num4 - 0 || 0), 0)
        let a5 = tableData.value.reduce((t, item) => t + (item.num5 - 0 || 0), 0)
        let total = a1 + a2 + a3 + a4 + a5
        // if (rowList.value.isUpToGrid == 0) {
        //     data = res.data.info
        // } else {
        //     data = res.data.gwInfo
        // }
        // for (let i = 0; i < data.length; i++) {
        //     if (data[i] >= 2) {
        //         ++a5
        //     } else if (data[i] >= 1.6 && data[i] < 2) {
        //         ++a4
        //     } else if (data[i] >= 1.2 && data[i] < 1.6) {
        //         ++a3
        //     } else if (data[i] >= 1 && data[i] < 1.2) {
        //         ++a2
        //     } else if (data[i] >= 0 && data[i] < 1) {
        //         ++a1
        //     }
        // }

        let list = [
            {
                value: ((a1 / total || 0) * 100).toFixed(2),
                name: `无污染：${a1}座`
            },
            {
                value: ((a2 / total || 0) * 100).toFixed(2),
                name: `轻微污染：：${a2}座`
            },
            {
                value: ((a3 / total || 0) * 100).toFixed(2),
                name: `轻度污染：${a3}座`
            },
            {
                value: ((a4 / total || 0) * 100).toFixed(2),
                name: `中度污染：${a4}座`
            },
            {
                value: ((a5 / total || 0) * 100).toFixed(2),
                name: `重度污染：${a5}座`
            }
        ]
        const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#A52a2a', '#ccc']

        list.forEach((item, i) => {
            picEChart.value[i] = {
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    left: 10,
                    top: '10%'
                },
                xAxis: {
                    show: false
                },
                yAxis: {
                    show: false
                },
                options: {
                    toolbox: null,
                    dataZoom: null,
                    series: [
                        {
                            type: 'gauge',
                            startAngle: 180,
                            center: ['50%', '80%'],
                            radius: '135%',
                            endAngle: 0,
                            min: 0,
                            max: 100,
                            progress: {
                                show: true,
                                width: 15,
                                itemStyle: {
                                    color: color[i]
                                }
                            },
                            pointer: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 15,
                                    color: [[1, '#f4f4f4']]
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                                // distance: 5,
                                // color: '#666',
                                // fontSize: 12,
                                // formatter: function (value: any) {
                                //     if (value === 0 || value === 100) {
                                //         return value + '%'
                                //     }
                                // }
                            },
                            anchor: {
                                show: false,
                                showAbove: false,
                                size: 25,
                                itemStyle: {
                                    borderWidth: 60
                                }
                            },
                            title: {
                                show: true,
                                offsetCenter: [0, '20%'],
                                fontSize: 14
                            },
                            detail: {
                                valueAnimation: true,
                                fontSize: 14,
                                lineHeight: 20,
                                color: color[i],
                                fontWeight: 'bold',
                                offsetCenter: [0, '-20%'],
                                formatter: function (value: any) {
                                    return '{a|占比} ' + '\n' + value + '{a|%}'
                                },
                                rich: {
                                    a: {
                                        color: '#333',
                                        fontSize: 16,
                                        lineHeight: 30
                                    }
                                }
                            },
                            data: [item]
                        }
                    ]
                }
            }
        })
    })
}
const analysis = (e: any) => {
    let time = rowList.value.searchBeginTime?.slice(0, 4) + `-01-01`
    // 分析
    getGridDiagramSubTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
        let name = []
        let data = []
        let num = 0
        for (let k in res.data) {
            name.push(k)
            // num = num + res.data[k]
            data.push(res.data[k])
        }

        trendEChart.value = {
            title: {
                text: '变电站接入总数量'
            },
            xAxis: {
                name: '时间',
                data: name
            },
            legend: {
                show: false
            },
            yAxis: {
                name: '座'
            },

            options: {
                dataZoom: null,
                series: [
                    {
                        name: '接入',
                        type: 'line',
                        data: data,
                        smooth: true,
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 12
                        }
                    }
                ]
            }
        }
    })
}
const formatter = (row: any) => {
    if (row.column.field == 'dataV') {
        return row.cellValue == 3.14159 ? '/' : row.cellValue
    } else if (row.column.field == 'data') {
        return row.cellValue == 3.14159 ? '/' : row.cellValue
    } else if (row.column.field == 'voltageLevel') {
        return Voltage.filter((item: any) => item.id == row.cellValue)[0]?.name
    } else {
        return row.cellValue
    }
}
const handleClose = () => {
    tableData.value = []
    dialogVisible.value = false
}

const jump = () => {
    router.push({
        name: 'harmonic-boot/qydetailedAnalysis/pollutionReport',
        query: {
            type: '2',
            statisticalType: contaminate.value,
            t: Date.now()
        }
    })
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-select) {
    min-width: 80px;
}
.title {
    display: flex;
    justify-content: space-between;
    position: relative;
    span {
        font-weight: 550;
        font-size: 18px;
    }
    .WarningFilled {
        width: 16px;
        cursor: pointer;
    }
}
.pie {
    display: flex;
    flex-wrap: wrap;
    .MyEChart {
        height: 130px;
        width: 30%;
        margin-right: 3%;
    }
}
:deep(.el-dialog__body) {
    max-height: none !important;
}
.text-style {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--el-color-primary);
    text-underline-offset: 4px;
}
</style>
