<template>
  <div class="basic-info-tab">
       <el-descriptions
      title=""
      border
      :column="1"
    >
      <el-descriptions-item label="项目">{{ nodeInfo.projectName || ''}}</el-descriptions-item>
      <el-descriptions-item label="数据源">{{ nodeInfo.datasystemName || ''}}</el-descriptions-item>
      <el-descriptions-item label="数据源类型">{{ nodeInfo.dbType || ''}}</el-descriptions-item>
      <el-descriptions-item label="IP">{{ nodeInfo.ip || ''}}</el-descriptions-item>
      <el-descriptions-item label="管理的SCHEMA">{{ nodeInfo.schema || ''}}</el-descriptions-item>
      <el-descriptions-item label="字段数">{{ nodeInfo.totalFiledNum || ''}}</el-descriptions-item>
      <el-descriptions-item label="加密表数量">{{ nodeInfo.encryptTableCount || ''}}</el-descriptions-item>
      <el-descriptions-item label="加密字段数量">{{ nodeInfo.encryptFiledCount || ''}}</el-descriptions-item>
      <el-descriptions-item label="未加密字段数量">{{ nodeInfo.unencryptTableCount || ''}}</el-descriptions-item>
      <el-descriptions-item label="未加密字段数量">{{ nodeInfo.unencryptFiledCount || ''}}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  nodeData: {
    type: Object,
    default: () => ({})
  }
})

// 可根据不同级别节点展示不同内容
const nodeType = computed(() => props.nodeData?.type)
const nodeInfo = computed(() => props.nodeData || {})
</script>

<style scoped>
.basic-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>