<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :lg="4" :xs="24" class="mb-[12px]">
        <el-card shadow="never">
          <el-input placeholder="名称" clearable>
            <template #prefix>
              <i-ep-search />
            </template>
          </el-input>

          <el-tree
            ref="sideTreeTreeRef"
            class="mt-2"
            :data="treeList"
            :props="{ children: 'children', label: 'label', disabled: '' }"
            :expand-on-click-node="false"
            default-expand-all
          />
        </el-card>
      </el-col>
      <el-col :lg="20" :xs="24">
        <el-card shadow="never" class="right">
          <template #header>
            <div class="flex" style="justify-content: space-around">
              <div>
                <el-button type="success" @click="dialog.visible = true">
                  模型导入
                </el-button>
              </div>
              <div>
                <el-button type="warning">模型保存</el-button>
              </div>
            </div>
          </template>
          <div class="text-center">
            <el-upload
              class="upload-demo"
              drag
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                拖拉模型文件到此处 或
                <em>点击上传模型</em>
              </div>
            </el-upload>
            <el-descriptions
              size=""
              class="mt-50"
              direction="vertical"
              border
              :column="5"
            >
              <el-descriptions-item label="网络层">
                网络结构
              </el-descriptions-item>
              <el-descriptions-item label="input">1024</el-descriptions-item>
              <el-descriptions-item label="GCN1">1024*256</el-descriptions-item>
              <el-descriptions-item label="BN1">256</el-descriptions-item>
              <el-descriptions-item label="FC1">256*9</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { UploadFilled } from "@element-plus/icons-vue";
defineOptions({
  name: "DiagnosticModelManage",
  inherititems: false,
});
import { reactive } from "vue";

const treeList = [
  {
    value: 1,
    label: "图神经网络",
    children: [
      {
        value: 11,
        label: "DVGNN",
      },
      {
        value: 12,
        label: "DVGAT",
      },
    ],
  },
  {
    value: 2,
    label: "卷积神经网络",
    children: [
      {
        value: 21,
        label: "CNN",
      },
      {
        value: 22,
        label: "K-Means",
      },
    ],
  },
];
const dialog = reactive({
  visible: false,
  title: "",
});
</script>

<style lang="scss" scoped>
.right {
  height: calc(100vh - 100px);
}
</style>
