<!-- 用户管理 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :lg="4" :xs="24" class="mb-[12px]">
        <sideTree />
      </el-col>

      <el-col :lg="20" :xs="24">
        <div class="graph">图谱展示</div>

        <el-card shadow="never" class="table">
          <el-descriptions border :column="5">
            <el-descriptions-item
              :rowspan="2"
              :width="0"
              label=""
              align="center"
            >
              <el-image
                style="width: 100px; height: 100px"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
            </el-descriptions-item>
            <el-descriptions-item label="重量：">1.5kg</el-descriptions-item>
            <el-descriptions-item label="内环宽度：">1cm</el-descriptions-item>
            <el-descriptions-item label="节圆直径：">
              1.2cm
            </el-descriptions-item>
            <el-descriptions-item label="经向静态载荷：">
              7.9kN
            </el-descriptions-item>
            <el-descriptions-item label="最高转速：">
              7000rpm
            </el-descriptions-item>
            <el-descriptions-item label="外环宽度：">2cm</el-descriptions-item>
            <el-descriptions-item label="滚珠个数：">9</el-descriptions-item>
            <el-descriptions-item label="经向动态载荷：">
              14kN
            </el-descriptions-item>
          </el-descriptions>
          <template #footer>
            <div class="footer">
              <el-button type="primary" @click="dialog.visible = true">
                查看模型
              </el-button>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog v-model="dialog.visible" append-to-body>
      <div class="text-center">
        <el-image
          style="width: 300px; height: 300px"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
        <el-descriptions border :column="4">
          <el-descriptions-item label="重量：">1.5kg</el-descriptions-item>
          <el-descriptions-item label="内环宽度：">1cm</el-descriptions-item>
          <el-descriptions-item label="节圆直径：">1.2cm</el-descriptions-item>
          <el-descriptions-item label="经向静态载荷：">
            7.9kN
          </el-descriptions-item>
          <el-descriptions-item label="最高转速：">
            7000rpm
          </el-descriptions-item>
          <el-descriptions-item label="外环宽度：">2cm</el-descriptions-item>
          <el-descriptions-item label="滚珠个数：">9</el-descriptions-item>
          <el-descriptions-item label="经向动态载荷：">
            14kN
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <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">
defineOptions({
  name: "HomePage",
  inheritAttrs: false,
});

const userFormRef = ref(ElForm);

const removeIds = ref([]);
/**  用户弹窗对象  */
const dialog = reactive({
  visible: false,
  title: "",
});
/**
 * 打开弹窗
 *
 * @param id 用户ID
 */
async function handleOpenDialog(id?: number) {
  dialog.visible = true;
}

/** 关闭弹窗 */
function handleCloseDialog() {
  dialog.visible = false;
  userFormRef.value.resetFields();
  userFormRef.value.clearValidate();
}

/** 表单提交 */
const handleSubmit = useThrottleFn(() => {}, 3000);
onMounted(() => {});
</script>
<style lang="scss" scoped>
.graph {
  width: 100%;
  height: calc(100vh - 410px);
  padding: 10px;
  // background-color: aqua;
  border: 1px solid #ccc;
  border-radius: 20px;
}

.table {
  // background-color: aquamarine;
  position: relative;
  width: 100%;
  max-height: 300px;
  padding-bottom: 20px;
  margin-top: 30px;
  border: none;

  .footer {
    position: absolute;
    right: 50px;
    bottom: 10px;
  }
}
</style>
