<!-- 用户管理 -->
<template>
  <div class="app-container">
    <!-- 用户新增/编辑表单 -->
    <el-card shadow="never" class="form-container">
      <template #header> 新增数据集 </template>
      
          <el-form
            ref="userFormRef"
            :model="formData"
            :rules="rules"
            v-loading="loading"
            label-width="100px"
          >
          <el-row style="width:100%">
        <el-col :lg="12" :xs="24">
          <el-form-item label="数据集名称" prop="username">
              <el-input
                v-model="formData.username"
                :readonly="!!formData.id"
                placeholder="请输入数据集名称"
              />
            </el-form-item>
        </el-col>
          <el-col :lg="12" :xs="24">
            <el-form-item label="数据集版本" prop="roleIds">
              <el-input
                v-model="formData.roleIds"
                :readonly="!!formData.id"
                placeholder="请输入数据集版本"
              />
            </el-form-item>
          </el-col>
      </el-row>
      <el-row style="width:100%">
        <el-col :lg="12" :xs="24">
          <el-form-item label="适合任务" prop="username1">
              <el-input
                v-model="formData.usernam3e"
                :readonly="!!formData.id"
                placeholder="请输入适合任务"
              />
            </el-form-item>
        </el-col>
          <el-col :lg="12" :xs="24">
            <el-form-item label="数据标签" prop="roleId2s">
              <el-input
                v-model="formData.roleIds3"
                :readonly="!!formData.id"
                placeholder="请输入数据标签"
              />
            </el-form-item>
          </el-col>
      </el-row>
      <el-row style="width:100%">
        <el-col :lg="12" :xs="24">
          <el-form-item label="数据集格式" prop="username1">
            <el-select
                    v-model="formData.roleIds2"
                    placeholder="请选择数据集格式"
                    style="width: 100%"
                  >
                    <el-option label="图像分类" value="1" />
                    <el-option label="目标检测" value="2" />
                  </el-select>
            </el-form-item>
        </el-col>
          <el-col :lg="12" :xs="24">
            <el-form-item label="是否已标注" prop="rolfeId2s">
              <el-select
                    v-model="formData.rolfeId2s"
                    placeholder="请选择是否已标注"
                    style="width: 100%"
                  >
                    <el-option label="是" value="1" />
                    <el-option label="否" value="2" />
                  </el-select>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row style="width:100%">
        <el-col :lg="12" :xs="24">
          <el-form-item label="数据集名称" prop="usernamedd">
              <el-input
                v-model="formData.usernamedd"
                :readonly="!!formData.id"
                placeholder="请输入数据集名称"
                :rows="3"
                type="textarea"
              />
            </el-form-item>
        </el-col>
          <el-col :lg="12" :xs="24">
          </el-col>
      </el-row>
      <el-divider content-position="left"
              ><strong style="color: #409eff">数据集图片（10）</strong></el-divider
            >
       <el-row>
        <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :file-list="imgList"
            :limit="10"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="i-ep-plus"></i>
         </el-upload>
         <el-button type="primary"><i-ep-upload-filled />上传图片</el-button>
       </el-row>
     </el-form>
    </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,
});

// 校验规则
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 imgList= [{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'},
{name:'demo.jepg',url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'}]

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

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

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