<template>
    <div class="default-main">
        <div v-show="view">
            <TableHeader datePicker :showReset="false" showExport ref="TableHeaderRef" showCustomColumn>
                <template #select>
                    <!--                    <el-form-item label="筛选数据">-->
                    <!--                        <el-input v-model="tableStore.table.params.searchValue" clearable placeholder="输入关键字筛选" />-->
                    <!--                    </el-form-item>-->
                </template>
                <template #operation>
                    <el-button icon="el-icon-Tickets" type="primary" @click="analysis1">分析记录管理</el-button>
                    <el-button icon="el-icon-SuccessFilled" type="primary" @click="firing">启动关联分析</el-button>
                </template>
            </TableHeader>
            <Table ref="tableRef" />
            <!-- 分析记录管理 -->
            <el-dialog draggable v-model="dialogAnalysis" title="分析记录管理" width="60%">
                <vxe-table height="500" auto-resize :data="AnalysisData" v-bind="defaultAttribute">
                    <vxe-column field="timeId" title="策略名称"></vxe-column>
                    <vxe-column field="timeId" title="操作时间"></vxe-column>
                    <vxe-column field="createName" title="操作人"></vxe-column>
                    <vxe-column title="操作" width="100">
                        <template #default="{ row }">
                            <el-popconfirm title="是否确认删除策略！" @confirm="details(row)">
                                <template #reference>
                                    <el-button type="danger" link>删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </vxe-column>
                </vxe-table>
                <el-pagination
                    class="mt10"
                    :currentPage="form.pageNum"
                    :page-size="form.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    background
                    :layout="'sizes,total, ->, prev, pager, next, jumper'"
                    :total="total"
                    @size-change="onTableSizeChange"
                    @current-change="onTableCurrentChange"
                ></el-pagination>
            </el-dialog>
        </div>
        <div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
            <waveForm ref="waveFormRef" senior :boxoList="boxoList" :wp="wp" @backbxlb="backbxlb" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import TableHeader from '@/components/table/header/index.vue'
import { queryRelevantLogPage, delRelevantLog, processEvents, analysis } from '@/api/advance-boot/analyse'
import { ElMessage, ElMessageBox } from 'element-plus'
import { mainHeight } from '@/utils/layout'
import waveForm from '@/components/echarts/waveForm.vue'
import { getMonitorEventAnalyseWave } from '@/api/event-boot/transient'

defineOptions({
    name: 'Advancedanalysis/eventcorrelation'
})
const dialogAnalysis = ref(false)
const AnalysisData = ref([])
const pageHeight = mainHeight(20)
const bxecharts = mainHeight(95).height as any
const loading = ref(false)
const view = ref(true)
const view2 = ref(false)
const TableHeaderRef = ref()
const waveFormRef = ref()
const tableStore = new TableStore({
    url: '/advance-boot/process/querySagEventsPage',
    method: 'POST',
    column: [
        {
            field: 'index',
            title: '序号',
            width: '80',
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { field: 'startTime', title: '暂降发生时刻', sortable: true, minWidth: 200 },
        {
            field: 'featureAmplitude',
            title: '暂降(骤升)幅值(%)',
            sortable: true,
            minWidth: 160
        },
        { field: 'duration', title: '持续时间(s)', sortable: true, minWidth: 120 },
        { field: 'gdName', title: '供电公司', minWidth: 140 },
        { field: 'subName', title: '变电站', minWidth: 140 },
        { field: 'lineName', title: '监测点', minWidth: 140 },

        {
            field: 'dealFlag',
            title: '暂降特征幅值计算',
            render: 'tag',
            minWidth: 160,
            custom: {
                0: 'warning',
                1: 'success',
                2: 'success',
                3: 'warning',
                null: 'info'
            },
            replaceValue: {
                0: '未处理',
                1: '已处理',
                2: '已处理,无结果',
                3: '计算失败',
                null: '/'
            }
        },
        {
            field: 'fileFlag',
            title: '录波文件',
            render: 'tag',
            minWidth: 140,
            custom: {
                0: 'warning',
                1: 'success'
            },
            replaceValue: {
                0: '不存在',
                1: '存在'
            }
        },
        {
            title: '操作',
            fixed: 'right',
            width: '120',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '波形分析',
                    type: 'primary',
                    disabled: row => {
                        return row.fileFlag == 0
                    },
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: async row => {
                        view.value = false
                        setTimeout(() => {
                            waveFormRef.value.open(row)
                        }, 100)
                        // row.loading = true
                        // boxoList.value = row
                        // await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
                        //     .then(res => {
                        //         row.loading = false
                        //         if (res != undefined) {
                        //             wp.value = res.data
                        //             view.value = false
                        //             view2.value = true
                        //         }
                        //     })
                        //     .catch(() => {
                        //         row.loading = false
                        //     })
                    }
                },
                {
                    name: 'edit',
                    title: '暂无波形',
                    type: '',
                    disabled: row => {
                        return row.fileFlag != 0
                    },
                    icon: 'el-icon-Plus',
                    render: 'basicButton'
                }
            ]
        }
    ],

    loadCallback: () => {}
})
tableStore.table.params.searchValue = ''
const bxactiveName = ref('ssbx')
const boxoList = ref({})
const wp = ref({})
const form = ref({
    pageSize: 20,
    pageNum: 1,
    id: ''
})
const total = ref(0)
provide('tableStore', tableStore)

onMounted(() => {
    TableHeaderRef.value.setTheDate(1)
    nextTick(() => {
        // tableStore.index()
        TableHeaderRef.value.onComSearch()
    })
})

// 分页
const onTableSizeChange = (val: number) => {
    form.value.pageSize = val
    form.value.pageNum = 1 // 改变每页条数时回到第一页
    loadAnalysisData() // 重新加载数据
}

const onTableCurrentChange = (val: number) => {
    form.value.pageNum = val
    loadAnalysisData() // 重新加载数据
}

// 封装数据加载逻辑
const loadAnalysisData = async () => {
    try {
        const params = {
            pageNum: form.value.pageNum,
            pageSize: form.value.pageSize
        }
        const res: any = await queryRelevantLogPage(params)
        AnalysisData.value = res.data.records
        total.value = res.data.total
    } catch (error) {
        console.error('获取分析记录失败:', error)
        AnalysisData.value = []
        total.value = 0
    }
}

//分析记录管理
const analysis1 = async () => {
    // 初始化分页参数
    form.value.pageNum = 1
    await loadAnalysisData()
    dialogAnalysis.value = true
}

// 启动关联分析
const firing = () => {
    processEvents({
        startTime: tableStore.table.params.searchBeginTime,
        endTime: tableStore.table.params.searchEndTime
    }).then(res => {
        ElMessage({
            type: 'success',
            message: res.message
        })
        tableStore.index()
    })
}
// 删除策略
const details = (row: any) => {
    delRelevantLog({ id: row.id }).then((res: any) => {
        ElMessage({
            type: 'success',
            message: res.message
        })
        // 重新加载当前页的数据
        loadAnalysisData()
    })
}

const backbxlb = () => {
    view.value = true
    view2.value = false
}
</script>
