<!-- 用户管理 -->
<template>
  <div class="app-container model-detail">
    <!-- 用户新增/编辑表单 -->
    <el-card v-loading="loading">
      <template #header><svg-icon  icon-class="pause" style="width:20px;height:20px;" />未注册网络设备</template>
      <el-row>
        <el-col :lg="24" :xs="24">
          <el-form
            ref="userFormRef"
            :model="formData"
            :rules="rules"
            label-width="100px"
          >
            <el-table :data="list" style="width: 100%" stripe>
              <el-table-column label="选择" width="60" align="center">
                <template #default="scope">
                  <el-radio v-model="radioSelected" :label="scope.row.csmc" @change.native="getCurrentRow(scope.row.csmc)">{{ '' }}</el-radio>
                </template>
              </el-table-column>
              <el-table-column prop="csmc" label="IP地址" align="left" />
              <el-table-column prop="csms" label="芯片信息" align="left" />
              <el-table-column prop="csmc1" label="设备型号" align="left" />
              <el-table-column prop="csmc2" label="设备类型" align="left" />
              <el-table-column prop="csmc3" label="厂商名称" align="left" />
              <el-table-column prop="csmc4" label="服务程序版本" align="left" />
              <el-table-column prop="csmc5" label="连接状态" align="left" />
            </el-table>
            <!-- <el-divider content-position="left"
              ><strong style="color: #409eff">设备信息</strong></el-divider
            >
            <el-form-item label="设备ID号" prop="username">
              <el-input
                v-model="formData.username"
                :readonly="!!formData.id"
                placeholder="请输入设备ID号"
              />
            </el-form-item>
            <el-form-item label="设备名称" prop="nickname">
              <el-input v-model="formData.nickname" placeholder="请输入设备名称" />
            </el-form-item>
            <el-form-item label="设备标签" prop="nickname22">
              <el-input v-model="formData.nickname22" placeholder="请输入设备标签" />
            </el-form-item>
            <el-form-item label="详细信息" prop="nickname33">
              <el-input
                v-model="formData.nickname33"
                :rows="2"
                type="textarea"
                placeholder="请输入详细信息"
              />
            </el-form-item> -->
          </el-form>
        </el-col>
        <el-col :lg="12" :xs="24"> </el-col>
      </el-row>
    </el-card>
    <el-card v-loading="loading" style="margin-top: 12px;">
      <el-row>
        <el-col :lg="12" :xs="24">
          <el-form
            ref="userFormRef"
            :model="formData"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="设备ID号" prop="username">
              <el-input
                v-model="formData.username"
                :readonly="!!formData.id"
                placeholder="请输入设备ID号"
              />
            </el-form-item>
            <el-form-item label="设备名称" prop="nickname">
              <el-input v-model="formData.nickname" placeholder="请输入设备名称" />
            </el-form-item>
            <el-form-item label="设备标签" prop="nickname22">
              <el-input v-model="formData.nickname22" placeholder="请输入设备标签" />
            </el-form-item>
            <el-form-item label="详细信息" prop="nickname33">
              <el-input
                v-model="formData.nickname33"
                :rows="2"
                type="textarea"
                placeholder="请输入详细信息"
              />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :lg="12" :xs="24"> </el-col>
      </el-row>
    </el-card>
<el-card class="card-footer">
        <el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
        <el-button @click="closeBack"><i-ep-close />取 消</el-button>
    </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,
});

const radioSelected = ref('');

// 校验规则
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" });
}

// 单选框选中数据
function getCurrentRow(row) {
  radioSelected = row;//点击当前行时,radio同样有选中效果
}

onMounted(() => {
  //handleQuery();
});
</script>
<style scoped lang='scss'>
.model-detail{
    :deep(.el-card__header){
        padding:8px 4px;
        display: flex;
        align-items: center
    }    
}
.sp-file{
    color:#29d;    
}
.tb-base-info{
    line-height: 30px;
}
:deep(.svg-icon){
    margin-right:8px;
}
.card-footer{
  position: fixed;
  width: calc(100% - 215px);
  bottom: 0px;
  :deep(.el-card__body){
    padding:10px;
    .el-pagination{
      justify-content: end;
    }
  }
}
</style>
