<!-- 用户管理 -->
<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-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :lg="12" :xs="24">
            <el-form-item label="数据集名称" prop="dataset_name">
              <el-input v-model="form.dataset_name" placeholder="请输入数据集名称" />
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xs="24">
            <el-form-item label="数据集版本" prop="dataset_version">
              <el-input
                v-model="form.dataset_version"
                type="number"
                placeholder="请输入数据集版本"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="12" :xs="24">
            <el-form-item label="适用任务类型" prop="modl_sub_type">
              <el-select v-model="form.modl_sub_type" placeholder="请选择适用任务类型">
                <el-option
                  v-for="item in listOpt.modlSubTypeList"
                  :key="item.modl_sub_type"
                  :label="item.modl_sub_type_name"
                  :value="item.modl_sub_type"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xs="24">
            <el-form-item label="数据集格式" prop="dats_dataset_format">
              <el-select
                v-model="form.dats_dataset_format"
                placeholder="请选择数据集格式"
              >
                <el-option
                  v-for="item in listOpt.datasetFormatList"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="12" :xs="24">
            <el-form-item label="标注类型" prop="dats_label_type">
              <el-select v-model="form.dats_label_type" placeholder="请选择标注类型">
                <el-option
                  v-for="item in listOpt.labelTypeList"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xs="24">
            <el-form-item label="图像分辨率" prop="image_height">
              <el-row style="width:100%">
                <el-col :lg="11">
                  <el-input v-model="form.image_width" type="number"  placeholder="请输入分辨率宽度">
                    <template #prepend> 宽 </template>
                  </el-input>
                </el-col>
                <el-col :lg="2" class="fontCenter"><el-icon><Rank /></el-icon></el-col>
                <el-col :lg="11">
                  <el-input v-model="form.image_height" type="number" placeholder="请输入分辨率高度">
                    <template #prepend> 高 </template>
                  </el-input>
                </el-col>
              </el-row>
            </el-form-item>
            
          </el-col>
        </el-row>
        <el-row>
          <el-col :lg="12" :xs="24">
            <el-form-item label="数据集描述" prop="dataset_desc">
              <el-input
                v-model="form.dataset_desc"
                placeholder="请输入数据集描述"
                :rows="2"
                type="textarea"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xs="24"> </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 12px">
      <template #header
        ><svg-icon icon-class="pause" style="width: 20px; height: 20px" />图片信息<strong
          style="color: #409eff"
          >（15）</strong
        >
      </template>
      <el-form>
        <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-form>
    </el-card>
    <el-card class="card-footer">
      <el-button type="primary" @click="handleUpload"
        ><i-ep-upload-filled />上传图片</el-button
      >
      <el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
      <el-button @click="closeBack"><i-ep-close />取 消</el-button>
    </el-card>
    <el-dialog
      v-model="dialogOpen"
      title="dialog.title"
      width="880"
      append-to-body
    >
      <!-- 用户新增/编辑表单 -->
      <el-form
        v-if="dialog.type === 'user-form'"
        ref="userFormRef"
        :model="form"
        label-width="80px"
      >
        <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
          >
        </el-upload>

        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :file-list="imgList2"
          :limit="10"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="i-ep-plus"></i>
        </el-upload>
      </el-form>

      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialog.visible = false">开始上传</el-button>
          <el-button @click="dialog.visible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import ConstApi from "@/api/const";
import ToolChainshApi from "@/api/tool";

const router = useRouter();

const form = ref({}); // 基础表单
const formRef = ref(ElForm); // 表单
const loading = ref(false); //  加载状态
const dialogOpen = ref(false); //  加载状态

// 表单数据
const formData = reactive({
  unregisted: null,
});
// 上传组件
const uploadRef = ref<UploadInstance>();

// 基础数据列表
let listOpt = reactive({
  labelTypeList: [],
  modlSubTypeList: [],
  datasetFormatList: [],
});

// 校验规则
const rules = reactive({
    dataset_name: [{ required: true, message: "数据集名称不能为空", trigger: "blur" }],
    dataset_version: [{ required: true, message: "数据集版本不能为空", trigger: "blur" }],
    modl_sub_type: [{ required: true, message: "适用任务类型不能为空", trigger: "change" }],
    dats_dataset_format: [{ required: true, message: "数据集格式不能为空", trigger: "change" }],
    dats_label_type: [{ required: true, message: "标注类型不能为空", trigger: "change" }],
    image_width: [{ required: true, message: "分辨率宽度不能为空", trigger: "blur" }],
    image_height: [{ required: true, message: "分辨率高度不能为空", trigger: "blur" }],
    dataset_desc: [{ required: false, message: "数据集描述不能为空", trigger: "blur" }],
});

/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
  formRef.value.validate((valid: any) => {
    if (valid) {
      if (!formData.unregisted) {
        ElMessage.error("请选择要注册的工具链");
        return false;
      }
      loading.value = true;
      ToolChainshApi.addTool(formData)
        .then((res) => {
          if (res.data.code == 0) {
            ElMessage.success("保存成功");
            closeBack();
          }
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
}, 3000);

/** 选中未注册工具链 */
function getCurrentRow(row: { [key: string]: any }) {
  formData.uuid = row.uuid;
  formData.tool_type = row.tool_type;
  formData.cmpt_hardware_type = row.cmpt_hardware_type;
  formData.manufacturer = row.manufacturer;
  formData.tool_version = row.tool_version;
}

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

// 初始化选项列表
const initData = () => {
  ConstApi.modlSubType().then((res) => {
    if (res.data.code == 0) {
      listOpt.modlSubTypeList = res.data.data.modl_sub_type_list || [];
    }
  });
  ConstApi.datasetFormatType().then((res) => {
    if (res.data.code == 0) {
      listOpt.datasetFormatList = res.data.data.dats_dataset_format_list || [];
    }
  });
  ConstApi.datsLabelType().then((res) => {
    if (res.data.code == 0) {
      listOpt.labelTypeList = res.data.data.dats_label_type_list || [];
    }
  });
};

onMounted(() => {
  initData();
});
</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>
<style scope>
.el-upload--picture-card {
  display: none !important;
}
.dialog-footer {
  text-align: center;
}
.fontCenter{
  text-align: center;
  color:#CCCCCC;
}
</style>
