<template>
    <div class="default-main">
        <TableHeader select :showReset="false" ref="TableHeaderRef">
            <template #operation>
                <el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef" />
        <Form ref="formRef" @Cancels="tableStore.index()" />
    </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 TableHeader from '@/components/table/header/index.vue'
import { ElMessage } from 'element-plus'
import { toggleActive, csDelete } from '@/api/cs-system-boot/appinfo'
import Form from './form.vue'
defineOptions({
    name: 'govern/alarmConfig'
})
const formTabRef = ref()
const formRef = ref()
const tableStore: any = new TableStore({
    url: '/cs-system-boot/csAlarmSet/listAll',
    method: 'POST',
    showPage: false,
    column: [
        {
            field: 'index',
            title: '序号',
            width: '80',
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { field: 'name', title: '方案名称' },
        { field: 'onlineRateLimit', title: '在线率阈值' },
        { field: 'integrityLimit', title: '完整性阈值' },
        { field: 'updateTime', title: '创建时间' },
        {
            title: '是否启用',
            render: 'switch',
            width: 100,
            field: 'active',
            activeText: '启用',
            inactiveText: '停用',
            inactiveValue: '0',
            activeValue: '1',
            onChangeField: (row: any, value: any) => {
                if (row.active == 1) {
                    return ElMessage({ message: '至少需要保留一条启用的配置!', type: 'warning' })
                    // 至少需要保留一条启用的配置
                }
                toggleActive({
                    id: row.id
                }).then(res => {
                    ElMessage({ message: '启用成功!', type: 'success' })
                    tableStore.index()
                })
            }
        },

        {
            title: '操作',
            fixed: 'right',
            width: '180',
            render: 'buttons',
            buttons: [
                // {
                //     name: 'edit',
                //     title: '启用 ',
                //     type: 'primary',
                //     icon: 'el-icon-Plus',
                //     render: 'basicButton',
                //     disabled: row => {
                //         return row.active == 1
                //     },
                //     click: row => {
                //         toggleActive({ id: row.id }).then(res => {
                //             ElMessage({
                //                 message: '启用成功!',
                //                 type: 'success'
                //             })
                //             tableStore.index()
                //         })
                //     }
                // },
                {
                    name: 'edit',
                    title: '修改 ',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        setTimeout(() => {
                            formRef.value.open({
                                text: '修改配置',
                                row: row
                            })
                        }, 10)
                    }
                },
                {
                    name: 'edit',
                    title: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    disabled: row => {
                        return row.active == 1
                    },
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除吗？'
                    },
                    click: row => {
                        csDelete({ id: row.id }).then(res => {
                            ElMessage({
                                message: '删除成功!',
                                type: 'success'
                            })
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ],

    loadCallback: () => {


    }
})

provide('tableStore', tableStore)
// 新增主题
const add = () => {
    setTimeout(() => {
        formRef.value.open({
            text: '新增配置'
        })
    }, 10)
}
onMounted(() => {
    tableStore.index()
})
</script>
