<!-- 
 * @Description: 预警管理
 * @Author: huguodong 
 * @Date: 2023-12-15 15:44:05
!-->
<template>
  <div class="table-box">
    <ProTable ref="proTable" title="预警列表" :columns="columns" :data="tableData">
      <!-- 表格 header 按钮 -->

      <!-- 表格 菜单类型 按钮 -->
      <!-- 状态 -->
      <template #status="scope">
        <el-tag v-if="scope.row.status === 1" type="success">已部署</el-tag>
        <el-tag v-else type="danger">未部署</el-tag>
      </template>
      <template #menuType="scope">
        <el-space wrap>
          <el-tag v-if="scope.row.menuType === MenuTypeDictEnum.MENU" type="success">{{
            dictStore.dictTranslation(SysDictEnum.MENU_TYPE, MenuTypeDictEnum.MENU)
          }}</el-tag>
          <el-tag v-else-if="scope.row.menuType === MenuTypeDictEnum.LINK" type="warning">{{
            dictStore.dictTranslation(SysDictEnum.MENU_TYPE, MenuTypeDictEnum.LINK)
          }}</el-tag>
          <el-tag v-else type="info">{{ dictStore.dictTranslation(SysDictEnum.MENU_TYPE, scope.row.menuType) }}</el-tag>
          <el-tag v-if="scope.row.isHome === true" type="danger">首页</el-tag>
        </el-space>
      </template>
    </ProTable>
  </div>
</template>
  
  <script setup lang="tsx" name="sysSpa">
  import { warnZJRQApi } from "@/api";
  import { ZJRQ } from "@/api/interface";
  import { useHandleData } from "@/hooks/useHandleData";
  import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
  import { useDictStore } from "@/stores/modules";
  import { FormOptEnum, SysDictEnum, MenuTypeDictEnum } from "@/enums";
import { dividerDark } from "naive-ui";
  const visible = ref(false); //是否显示表单

  // 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
  const proTable = ref<ProTableInstance>();
  const dictStore = useDictStore();
  
  // 表格配置项
  const columns: ColumnProps<ZJRQ.WarnInfo>[] = [
    {
      prop: "name",
      label: "模型名称",
    //   render: () => {
    //     return "演示学校";
    //   }
    },
    {
      prop: "type",
      label: "模型类型",
    //   render: () => {
    //     return "楼道";
    //   }
    },
    {
      prop: "core",
      label: "分数",
    },
    {
      prop: "time",
      label: "训练时间",
    },
    {
      prop: "status",
      label: "部署状态",
    },
    { 
      prop: "isshow", 
      label: "训练模型开关",
      render: scope => {
        return (
            <el-switch 
                v-model={scope.row.isshow}
                onChange={() => {
                    switchChange(scope.row)
                }}
            />
        );
      }
    },
    { 
      prop: "ishandle", 
      label: "实训业务开关",
      render: scope => {
        return (
            <el-switch 
                v-model={scope.row.ishandle}
                onChange={() => {
                    switchChange(scope.row)
                }}
            />
        );
      }
    },
  ];
  function switchChange(row: object) {
    console.log(row)
    RefreshTable();
  }
 
  const tableData = ref([
  {
    name: '无人机巡检算法',
    type: "物体分类",
    core: "95",
    time: "2024-02-10 15:00:25",
    status: 1,
    isshow: true,
    ishandle: true
  },
  {
    name: '越界检测',
    type: "物体分类",
    core: "89",
    time: "2024-03-10 16:00:25",
    status: 1,
    isshow: true,
    ishandle: false
  },
  {
    name: '口罩识别',
    type: "物体分类",
    core: "80",
    time: "2024-05-26 15:10:00",
    status: 1,
    isshow: true,
    ishandle: true
  },
  {
    name: '监控室脱岗检测',
    type: "边界检测",
    core: "80",
    time: "2024-08-10 16:20:25",
    status: 0,
    isshow: true,
    ishandle: true
  },

  {
    name: '反光衣识别',
    type: "物体分类",
    core: "70",
    time: "2024-06-02 18:00:25",
    status: 1,
    isshow: true,
    ishandle: true
  },
]);
  /**
   * 刷新表格
   */
  function RefreshTable() {
    proTable.value?.refresh();
  }

  </script>
  
  <style lang="scss" scoped>
.detailpic {
  width: 800px;
  object-fit: cover;
}
.linebox {
  margin-top: 20px;
}
</style>
  