<template>
  <div class="table-info-tab">
  <!-- 表基本信息 -->
    <el-descriptions
      title=""
      border
      :column="1"
    >
      <el-descriptions-item label="字段数">{{ nodeData.totalColumnCount }}</el-descriptions-item>
      <el-descriptions-item label="未加密字段数量">{{ nodeData.unencryptColumnCount }}</el-descriptions-item>
      <el-descriptions-item label="加密字段数量">{{ nodeData.encryptColumnCount }}</el-descriptions-item>
      <el-descriptions-item label="操作人">{{ nodeData.operator }}</el-descriptions-item>
      <el-descriptions-item label="操作时间">{{ nodeData.operationTime }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
// 可以留空，因为数据是静态的
const props = defineProps({
  nodeData: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style scoped>
.table-info-tab {
  padding: 20px;
  background-color: white;
}

:deep(.el-descriptions__title) {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
}

:deep(.el-descriptions__header) {
  margin-bottom: 16px;
}

:deep(.el-descriptions__label) {
  width: 180px;
  background-color: #f5f7fa;
  font-weight: bold;
  color: #333;
}

:deep(.el-descriptions__content) {
  background-color: white;
}
</style>