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

                <vxe-column sortable field="sagTimes" title="暂降次数" />
                <vxe-column sortable field="swellTimes" title="暂升次数" />
                <vxe-column sortable field="interruptTimes" title="短时中断次数" />

                <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>
    </el-dialog>
</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'

const dialogVisible: any = ref(false)

const tableData: any = ref([])
const descentData = ref([])
const resembleData = ref([])

const picEChart = ref({})
const picEChart1 = ref({})
const open = async (row: any) => {
    getEventDetailByList({ ...row, deviceInfoParam: row }).then((res: any) => {
        tableData.value = res.data
    })
    getEventReason(row).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
                    }
                ]
            }
        }
    })
    dialogVisible.value = true
}

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;
}
</style>
