<!-- 暂态 -->
<template>
    <el-dialog draggable title="暂态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
        <div v-loading="loading">
            <div>
                <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="365px" :data="tableData">
                    <vxe-column field="name" title="区域" />

                    <vxe-column sortable field="sagTimes" title="暂降次数">
                        <template #default="{ row }">
                            <span class="text-style" @click="transientOpen(row.sagTimesIds, row.name, '暂降')">
                                {{ row.sagTimes }}
                            </span>
                        </template>
                    </vxe-column>
                    <vxe-column sortable field="swellTimes" title="暂升次数">
                        <template #default="{ row }">
                            <span class="text-style" @click="transientOpen(row.swellTimesIds, row.name, '暂升')">
                                {{ row.swellTimes }}
                            </span>
                        </template>
                    </vxe-column>
                    <vxe-column sortable field="interruptTimes" title="短时中断次数">
                        <template #default="{ row }">
                            <span
                                class="text-style"
                                @click="transientOpen(row.interruptTimesIds, row.name, '短时中断')"
                            >
                                {{ row.interruptTimes }}
                            </span>
                        </template>
                    </vxe-column>
                    <vxe-colgroup title="暂态严重度占比">
                        <vxe-column sortable field="rate90" title="SARFI-90" />
                        <vxe-column sortable field="rate50" title="SARFI-50" />
                        <vxe-column sortable field="rate20" title="SARFI-20" />
                    </vxe-colgroup>
                </vxe-table>
            </div>
            <div style="margin-top: 10px; display: flex">
                <!-- 
            -->
                <div class="statistics-main">
                    <div class="statistics-box">
                        <MyEChart style="height: 250px" :options="picEChart" />

                        <el-table size="small" height="250px" :data="descentData">
                            <el-table-column prop="name" label="暂降原因" width="80px" align="center" />
                            <el-table-column prop="value" label="暂降次数" width="80px" align="center" />
                        </el-table>
                    </div>

                    <div class="statistics-box">
                        <MyEChart style="height: 250px" :options="picEChart1" />
                        <el-table size="small" height="250px" :data="resembleData">
                            <el-table-column prop="name" label="触发类型" width="80px" align="center" />
                            <el-table-column prop="value" label="暂降次数" width="80px" align="center" />
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
    <!-- 暂态详情 -->
    <transientDetails ref="transientRef" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getEventReason, getEventDetailByList } from '@/api/device-boot/panorama'
import transientDetails from './transientDetails.vue'
import { ElMessage } from 'element-plus'
const dialogVisible: any = ref(false)
const transientRef = ref()
const tableData: any = ref([])
const descentData = ref([])
const resembleData = ref([])
const picEChart = ref({})
const picEChart1 = ref({})
const loading = ref(false)
const open = async (row: any) => {
    const [year, , day] = row.startTime.split('-')
    dialogVisible.value = true
    loading.value = true
     getEventDetailByList({
        ...row,
        deviceInfoParam: row,
        searchBeginTime: `${year}-01-${day}`,
        startTime: `${year}-01-${day}`
    }).then((res: any) => {
        tableData.value = res.data
    })
    await getEventReason({ ...row, searchBeginTime: `${year}-01-${day}`, startTime: `${year}-01-${day}` }).then(res => {
        descentData.value = res.data.reason
        resembleData.value = res.data.type
        picEChart.value = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: '10px'
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            options: {
                dataZoom: null,
                series: [
                    {
                        type: 'pie',
                        center: ['60%', '50%'],
                        radius: '50%',
                        label: {
                            show: false,
                            position: 'outside',
                            textStyle: {
                                //数值样式
                            }
                        },
                        data: res.data.reason
                    }
                ]
            }
        }
        picEChart1.value = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: '10px'
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            options: {
                dataZoom: null,
                series: [
                    {
                        type: 'pie',
                        center: ['60%', '50%'],
                        radius: '50%',
                        label: {
                            show: false,
                            position: 'outside',
                            textStyle: {
                                //数值样式
                            }
                        },
                        data: res.data.type
                    }
                ]
            }
        }
    })
    loading.value = false
}
// 查看详情
const transientOpen = (row: any, name: string, type: string) => {
    if (row == null || row?.length == 0) {
        return ElMessage.info('暂无详情')
    }
    transientRef.value.open(row, name, type)
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.statistics-main {
    // height: 300px;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;

    .statistics-box {
        // height: 300px;
        // display: flex;
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
}
:deep(.el-dialog__body) {
    max-height: none !important;
}
.text-style {
    cursor: pointer;
    text-decoration: underline;
}
</style>
