<template>
    <TableHeader datePicker ref="refheader" showCustomColumn showExport>
        <template v-slot:select>
            <el-form-item label="设备选取">
                <el-tree-select
                    v-model="tableStore.table.params.cascader"
                    :data="deviceTree"
                    clearable
                    :props="treeProps"
                    filterable
                    :filter-node-method="filterNode"
                    check-strictly
                    default-expand-all
                    placeholder="请选择需要筛选的数据"
                    @node-click="sourceChange"
                    @clear="onTreeClear"
                    style="width: 100%"
                ></el-tree-select>
            </el-form-item>
            <el-form-item label="告警代码">
                <el-input
                    maxlength="32"
                    show-word-limit
                    style="width: 200px"
                    v-model.trim="tableStore.table.params.searchValue"
                    clearable
                    placeholder="请输入告警代码"
                />
            </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>
    </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'
import { createTreeFilterNode } from '@/components/tree/govern/treeFilterUtils'
const props = defineProps(['deviceTree'])
const treeProps = {
    value: 'id',
    label: 'name',
    children: 'children'
}
const rankOptions = ref([
    {
        value: '1',
        label: '1级'
    },
    {
        value: '2',
        label: '2级'
    },
    {
        value: '3',
        label: '3级'
    }
    // {
    //     value: '4',
    //     label: 'DEBUG'
    // },
    // {
    //     value: '5',
    //     label: 'NORMAL'
    // },
    // {
    //     value: '6',
    //     label: 'WARN'
    // },
    // {
    //     value: '7',
    //     label: 'ERROR'
    // }
])

const tableStore = new TableStore({
    url: '/cs-harmonic-boot/eventUser/queryEventpageWeb',
    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: 'startTime', align: 'center', minWidth: 180, sortable: true },
        {
            title: '监测点名称',
            field: 'lineName',
            minWidth: 150,
            align: 'center',
            formatter: (row: any) => {
                return row.cellValue ? row.cellValue : '/'
            }
        },
        { title: '设备名称', field: 'equipmentName', align: 'center', minWidth: 150 },
        { title: '项目名称', field: 'projectName', align: 'center', minWidth: 150 },
        { title: '工程名称', field: 'engineeringName', align: 'center', minWidth: 150 },
        // { title: '监测点名称', field: 'lineName', align: 'center', minWidth: 120 },

        {
            title: '事件描述',
            minWidth: 300,
            field: 'showName'
        },
        {
            title: '模块信息',
            field: 'moduleNo',
            align: 'center',
            minWidth: 100,
            formatter: (row: any) => {
                return row.cellValue ? row.cellValue : '/'
            }
        },

        {
            title: '告警代码',
            field: 'code',
            align: 'center',
            minWidth: 100,
            formatter: (row: any) => {
                return row.cellValue ? '\u200B' + row.cellValue : '/'
            },
            sortable: true
        },
        {
            title: '级别',
            field: 'level',
            width: 110,
            render: 'tag',
            custom: {
                // 1:Ⅰ级 2:Ⅱ级 3:Ⅲ级 4:DEBUG 5:NORMAL 6:WARN 7:ERROR

                1: 'danger',
                2: 'warning',
                3: 'success',
                4: 'warning',
                5: 'success',
                6: 'warning',
                7: 'danger'
            },
            replaceValue: {
                1: '1级',
                2: '2级',
                3: '3级',
                4: 'DEBUG',
                5: 'NORMAL',
                6: 'WARN',
                7: 'ERROR'
            }
        }
        // {
        //     title: '级别',
        //     field: 'level',
        //     formatter: (row: any) => {
        //         return row.cellValue == 1 ? '1级' : row.cellValue == 2 ? '2级' : row.cellValue == 3 ? '3级' : '/'
        //     }
        // }
    ],
    beforeSearchFun: () => {},
    exportProcessingData: () => {
        tableStore.table.allData = tableStore.table.allData.filter(item => {
            item.level =
                item.level == 1
                    ? '1级'
                    : item.level == 2
                    ? '2级'
                    : item.level == 3
                    ? '3级'
                    : item.level == 4
                    ? 'DEBUG'
                    : item.level == 5
                    ? 'NORMAL'
                    : item.level == 6
                    ? 'WARN'
                    : 'ERROR'
            return item
        })
    }
})

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

const filterNode = createTreeFilterNode()

const onTreeClear = () => {
    tableStore.table.params.engineeringid = ''
    tableStore.table.params.projectId = ''
    tableStore.table.params.deviceId = ''
    tableStore.table.params.lineId = ''
}

const sourceChange = (e: any) => {
    onTreeClear()
    if (e.level == 0) {
        tableStore.table.params.engineeringid = e.id
    } else if (e.level == 1) {
        tableStore.table.params.projectId = e.id
    } else if (e.level == 2) {
        tableStore.table.params.deviceId = e.id
    } else if (e.level == 3) {
        tableStore.table.params.lineId = e.id
    }
}
onMounted(() => {
    tableStore.index()
})
setTimeout(() => {
    // tableStore.table.height = mainHeight(200).height as any
}, 0)
const addMenu = () => {}
</script>
<style></style>
