<template>
  <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'level'">
        {{ levelOptions.find(item => item.value == record.level)?.label }}
      </template>
      <template v-if="column.key === 'module'">
        {{ modelOptions.find(item => item.value == record.module)?.label }}
      </template>
      <template v-if="column.key === 'action'">
        <TableAction
          :actions="[
            {
              icon: 'ant-design:file-search-outlined',
              onClick: () => {
              },
            },
            {
              icon: 'carbon:calendar-tools',
              onClick: () => {
              },
            },
          ]"
        />
      </template>
    </template>
  </BasicTable>
</template>

<script setup lang="ts">
import {} from "vue"
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { columns, searchFormSchema, levelOptions, modelOptions } from './utils'
import { GetManageDeviceHmsList } from '@/api/demo/device'
const [registerTable, { reload, expandAll, getForm}] = useTable({
  title: '告警信息',
  api: GetManageDeviceHmsList,
  columns,
  rowKey: 'id',
  formConfig: {
    labelWidth: 100,
    schemas: searchFormSchema,
  },
  striped: false,
  // 序号列
  showIndexColumn: false,
  // 使用搜索表单
  useSearchForm: true,
  // 显示表格设置工具
  showTableSetting: true,
  bordered: true,
  beforeFetch(data) {
    return data
  },
  afterFetch(data) {
  },
  // actionColumn: {
  //   width: 100,
  //   title: '操作',
  //   dataIndex: 'action',
  // },
  handleSearchInfoFn(info) {
    return info;
  },
});
</script>

<style lang="scss" scoped></style>
