<template>
    <!-- 异常事件 -->
    <TableHeader datePicker ref="refheader" showExport >
        <!-- <template v-slot:select>
            <el-form-item label="数据来源">
                <el-cascader
                    placeholder="请选择数据来源"
                    @change="sourceChange"
                    :options="props.deviceTree"
                    :show-all-levels="false"
                    :props="{ checkStrictly: true }"
                    clearable
                ></el-cascader>
            </el-form-item>
            <el-form-item label="级别">
                <el-select v-model.trim="tableStore.table.params.level" placeholder="请选择级别" clearable>
                    <el-option
                        v-for="item in rankOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
        </template> -->
        <template #select>
            <el-form-item label="关键字筛选">
                <el-input maxlength="32" show-word-limit 
                    
                    clearable
                    
                    v-model.trim="tableStore.table.params.searchValue"
                    placeholder="请输入设备名称"
                />
            </el-form-item>
        </template>
    </TableHeader>
    <!-- <div style="height: 300px;"> -->
    <Table ref="tableRef" :isGroup="true" />
    <!-- </div> -->
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'

const props = defineProps(['deviceTree'])

const refheader = ref()
const deviceTree = ref([])
const tabsList = ref([
    {
        label: '设备告警',
        name: 3
    },
    {
        label: '稳态越限告警',
        name: 1
    },
    {
        label: '暂态事件',
        name: 0
    }
])
const rankOptions = ref([
    {
        value: '1',
        label: '1级'
    },
    {
        value: '2',
        label: '2级'
    },
    {
        value: '3',
        label: '3级'
    }
])

const tableStore = new TableStore({
    url: '/zl-event-boot/csDevErrEvt/list',
    method: 'POST',
    exportName: '异常事件',
    publicHeight: 65,
    column: [
        {
            title: '序号',
            width: 80,
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { title: '异常时间', field: 'evtTime', align: 'center', sortable: true },
        { title: '网络设备ID', field: 'ndid', align: 'center' },
        {
            title: '告警代码',
            field: 'code',
            align: 'center',
            sortable: true,
            formatter: (row: any) => {
                return row.cellValue ? '\u200B' + row.cellValue : '/'
            }
        }
    ]
})

provide('tableStore', tableStore)
//   "target": [],
//   "type": "",
//   "userId": ""
// tableStore.table.params.engineeringid = ''
// tableStore.table.params.projectId = ''
// tableStore.table.params.deviceId = ''
tableStore.table.params.type = 3
// tableStore.table.params.eventIds = []
// tableStore.table.params.status = ''
// tableStore.table.params.target = []
// tableStore.table.params.userId = ''
tableStore.table.params.searchValue = ''

const sourceChange = (e: any) => {
    tableStore.table.params.engineeringid = e[0] || ''
    tableStore.table.params.projectId = e[1] || ''
    tableStore.table.params.deviceId = e[2] || ''
}

onMounted(() => {
    tableStore.index()
})
setTimeout(() => {
    tableStore.table.height = mainHeight(200).height as any
}, 0)
const addMenu = () => {}
</script>
<style></style>
