<!-- 用户管理 -->
<template>
  <div class="app-container">
    <!-- 用户新增/编辑表单 -->
    <el-card shadow="never" class="form-container" v-loading="loading">
      <template #header>升级计算设备信息</template>
      <el-row>
        <el-col :lg="12" :xs="24">
          <el-form
            ref="userFormRef"
            :model="formData"
            label-width="100px"
            size="small"
          >
            <el-divider content-position="left"
              ><strong style="color: #409eff">计算设备基本信息</strong></el-divider
            >
            <el-form-item label="设备名称" prop="username"> 目标分类模型 </el-form-item>
            <el-form-item label="设备型号" prop="nickname">
              前置算子/缩放算子
            </el-form-item>
            <el-form-item label="芯片信息" prop="nickname22"> 昇腾310 </el-form-item>
            <el-form-item label="厂商名称" prop="nickname33"> 华为 </el-form-item>
            <el-form-item label="接口类型" prop="username"> Pcie </el-form-item>
            <el-form-item label="设备状态" prop="nickname">
              <el-tag type="success">已连接</el-tag>
            </el-form-item>
            <el-form-item label="设备标签" prop="nickname22">
              <div class="flex gap-2">
                <el-tag type="info">设备标签</el-tag>
                <el-tag type="info">对讲机</el-tag>
                <el-tag type="info">头像识别</el-tag>
              </div>
            </el-form-item>
            <el-form-item label="设备类型" prop="nickname33"> PCIE-AI-NPU </el-form-item>
            <el-form-item label="IP地址" prop="nickname33"> 192.168.1.32 </el-form-item>
            <el-form-item label="ID编号" prop="nickname33">
              6c647c8d-774j-sdjksk-fdof67
            </el-form-item>
            <el-form-item label="程序版本" prop="nickname33"> V3.0 </el-form-item>
            <el-form-item label="详细信息" prop="nickname33">
              <el-input
                v-model="formData.usernamedd"
                :disabled="true"
                placeholder="请输入数据集名称"
                :rows="5"
                type="textarea"
              />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :lg="12" :xs="24">
          <div style="padding-left: 35px">
            <el-form
              ref="userFormRef"
              :model="formData"
              v-loading="loading"
              label-width="100px"
              size="small"
            >
              <el-divider content-position="left"
                ><strong style="color: #409eff">升级文件信息</strong></el-divider
              >
              <el-form-item label="升级文件" prop="username">
                <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  multiple
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :limit="3"
                  :on-exceed="handleExceed"
                >
                  <el-button type="primary"
                    ><el-icon class="el-icon--upload"> <i-ep-upload-filled /> </el-icon
                    >选择文件</el-button
                  >
                  <template #tip>
                    <div class="el-upload__tip">
                      请上传大小不超过 <strong style="color: red">10M</strong>，格式为
                      <strong style="color: red">tar</strong> 的文件
                    </div>
                  </template>
                </el-upload>
              </el-form-item>
              <el-form-item label="检查结果" prop="nickname">
                <div style="max-width: 80%">
                  <el-alert
                    show-icon
                    title="文件检查通过，可升级设备服务程序"
                    type="success"
                    :closable="false"
                    style="margin-top: -8px;"
                  />
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="button-scope">
      <div class="buttonml-55">
        <el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
        <el-button @click="closeBack"><i-ep-close />取 消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "User",
  inheritAttrs: false,
});

import UserAPI from "@/api/user";
import { UserForm } from "@/api/user/model";

const router = useRouter();
const loading = ref(false); //  加载状态

const calTypeList = ref<OptionType[]>(); // 角色下拉数据源

// 用户表单数据
const formData = reactive<UserForm>({
  status: 1,
  usernamedd:
    "1个DaVinciV300 A core，主频1.224GHZ\r\n4个TAISHANV200M处理器核，主频1.6GHz\r\n半精度(FP16):10TFLOPS\r\n整数精度(INT8):20TOPS\r\n内存:LPDDR4X 8GB典型功耗:24.5W",
});

// 校验规则
const rules = reactive({
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
  deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
  roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
  email: [
    {
      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
      message: "请输入正确的邮箱地址",
      trigger: "blur",
    },
  ],
  mobile: [
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
});

const list = [
  {
    csmc: "10.0.8.12",
    csms: "异腾310",
    csmc1: "Atlas 2000 DK A2",
    csmc2: "PCIE-AI-NPU",
    csmc3: "华为",
    csmc4: "1.2",
    csmc5: "已连接",
  },
  {
    csmc: "192.168.1.44",
    csms: "思源220",
    csmc1: "Atlas 2000 DK A2",
    csmc2: "PCIE-AI-NPU",
    csmc3: "华为",
    csmc4: "1.2",
    csmc5: "已连接",
  },
  {
    csmc: "192.168.1.66",
    csms: "RTX4090",
    csmc1: "Atlas 2000 DK A2",
    csmc2: "PCIE-AI-NPU",
    csmc3: "华为",
    csmc4: "1.2",
    csmc5: "已连接",
  },
];

/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
  loading.value = true;
  setTimeout(() => {
    ElMessage.success("保存成功");
    loading.value = false;
    closeBack();
  }, 1000);
}, 3000);

/** 返回默认页面 */
function closeBack() {
  router.replace({ path: "/tester/equipment" });
}

onMounted(() => {
  //handleQuery();
});
</script>
<style scope>
.button-scope {
  position: fixed;
  width: calc(100% - 220px);
  bottom: 0px;
}
.buttonml-55 {
  margin-left: 55px;
}
</style>
