<!-- 用户管理 -->
<template>
  <div class="app-container">
    <el-card shadow="never" class="table-container">
      <template #header>
        <div class="flex justify-between">
          <div>
            <el-button type="primary" @click="openDialog1('user-form')"
              ><i-ep-plus />PCLE设备</el-button
            >
            <el-button type="primary" @click="openDialog2('user-form')"
              ><i-ep-plus />网络设备</el-button
            >
          </div>
          <div>
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
              <el-form-item label="设备名称" prop="keywords">
                <el-input
                  v-model="queryParams.keywords"
                  placeholder="请输入设备名称"
                  clearable
                  style="width: 200px"
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleQuery"
                  ><i-ep-search />搜索</el-button
                >
                <el-button @click="resetQuery">
                  <i-ep-refresh />
                  重置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </template>
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="设备名称" align="left" prop="szmc" width="250" />
        <el-table-column label="设备类型" align="left" prop="sblx" />
        <el-table-column label="芯片信息" align="left" prop="szlx" />
        <el-table-column label="标签" align="left" prop="szzlx" />
        <el-table-column label="连接状态" width="180" align="left" prop="bb" />
        <el-table-column label="工作状态" width="180" align="left" prop="gzzz" />
        <el-table-column label="创建时间" width="180" align="left" prop="hlcjsj" />
        <el-table-column label="操作" fixed="right" width="320">
          <template #default="scope">
            <el-button
              text
              type="primary"
              size="small"
              @click="openDialog3('user-form', scope.row.id)"
              ><i-ep-view />详细</el-button
            >
            <el-button
              text
              type="primary"
              size="small"
              @click="openDialog4('user-form', scope.row)"
              ><i-ep-edit />修改</el-button
            >
            <el-button
              v-if="scope.row.id != 2"
              text
              type="primary"
              size="small"
              @click="openDialog('user-form', scope.row.id)"
              ><i-ep-upload />升级</el-button
            >
            <el-button text type="primary" size="small" @click="handleDelete(scope.row)"
              ><i-ep-delete />删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import OperatorApi from '@/api/operator'

const router = useRouter();

const loading = ref(false); //  加载状态
const total = ref(0); // 数据总数
const pageData = ref([]); // 分页数据
const removeIds = ref([]); // 删除ID集合 用于批量删除
const queryFormRef = ref(ElForm); // 查询表单
const queryParams = reactive({
  page_num: 1,
  page_size: 10,
  operation_id: null,
  oper_main_type: null,
  oper_sub_type: null,
  cmpt_hardware_type: null,
  operator_name: null,
});


defineOptions({
  name: "calculateIndex",
  inheritAttrs: false,
});

import { UserQuery } from "@/api/user/model";

const queryFormRef = ref(ElForm); // 查询表单
const router = useRouter();

const loading = ref(false); //  加载状态
const removeIds = ref([]); // 删除用户ID集合 用于批量删除
const queryParams = reactive<UserQuery>({
  pageNum: 1,
  pageSize: 10,
});
const dateTimeRange = ref("");
const total = ref(0); // 数据总数

watch(dateTimeRange, (newVal) => {
  if (newVal) {
    queryParams.startTime = newVal[0];
    queryParams.endTime = newVal[1];
  }
});

const tableData = [
  {
    id: 1,
    szmc: "Atlas200I智能模组",
    sblx: "PCIE设备",
    szlx: "昇腾310",
    szzlx: "扫描",
    bb: "已连接",
    gzzt: "空闲",
    hlcjsj: "2024-05-03",
  },
  {
    id: 2,
    szmc: "思元220智能模组",
    sblx: "PCIE设备",
    szlx: "思元220",
    szzlx: "扫描",
    bb: "已断开",
    gzzt: "- -",
    hlcjsj: "2024-06-07",
  },
  {
    id: 3,
    szmc: "RTX 4090ti 显卡",
    sblx: "网络设备",
    szlx: "RTX 4090ti",
    szzlx: "轮询",
    bb: "已连接",
    gzzt: "忙碌",
    hlcjsj: "2024-06-08",
  },
];

/** 查询 */
function handleQuery() {
  loading.value = true;
  ElMessage.success("查询成功");
  loading.value = false;
  // UserAPI.getPage(queryParams)
  //   .then((data) => {
  //     console.log("handleQuery", data);
  //     pageData.value = data.list;
  //     total.value = data.total;
  //   })
  //   .finally(() => {
  //     loading.value = false;
  // });
}

/** 重置查询 */
function resetQuery() {
  queryFormRef.value.resetFields();
  dateTimeRange.value = "";
  queryParams.pageNum = 1;
  queryParams.deptId = undefined;
  queryParams.startTime = undefined;
  queryParams.endTime = undefined;
  handleQuery();
}

/** 行选中 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}router.push

/** 删除数据 */
furouter.pushelete(row: { [key: string]: any }) {
  ElMessageBox.confirm("确认删除计算设备信息?", "警告", {
    confirmButtonText: "确定",
  router.pushText: "取消",
    type: "warning",
  }).then(function () {
  router.pushccess("删除成功");
  });
}

/**router.push
 * 打开弹窗
 *router.push
 * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
 * @param id 用户ID
 */
async function openDialog(type: string, id?: number) {
  router.replace({ path: "/tester/equipmentEdit" });
}
async function openDialog1(type: string, id?: number) {
  router.replace({ path: "/tester/equipmentEditPcie" });
}
async function openDialog2(type: string, id?: number) {
  router.replace({ path: "/tester/equipmentEditNet" });
}
async function openDialog3(type: string, id?: number) {
  router.replace({ path: "/tester/equipmentView" });
}
async function openDialog4(type: string, row) {
  if(row.sblx=='网络设备'){
    router.replace({ path: "/tester/equipmentEditNet" });
  }else{
    router.replace({ path: "/tester/equipmentEditPcie" });
  }
}
/** 下载导入模板 */
function downloadTemplate() {
  ElMessage.success("下载模板成功");
}

/** 导出用户 */
function handleExport() {
  ElMessage.success("导出成功");
}

onMounted(() => {
  //handleQuery();
});
</script>
