<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> -->

    <el-form ref="formRef" :model="nodeInfo"  label-width="138px" >
      <div class="formBox">
        <el-form-item label="项目" >
          <el-input v-model="nodeInfo.projectName" disabled></el-input>
        </el-form-item>
        <el-form-item label="数据源" >
          <el-input v-model="nodeInfo.datasystemName" disabled></el-input>
        </el-form-item>
        <el-form-item label="数据源类型" >
          <el-input v-model="nodeInfo.dbType" disabled></el-input>
        </el-form-item>
        <el-form-item label="IP" >
          <el-input v-model="nodeInfo.ip" disabled></el-input>
        </el-form-item>
        <el-form-item label="管理的schema">
          <el-input v-model="nodeInfo.schema" disabled></el-input>
        </el-form-item>
        <el-form-item label="字段数" >
          <el-input v-model="nodeInfo.totalFiledNum" disabled></el-input>
        </el-form-item>
        <el-form-item label="加密表数量" >
          <el-input v-model="nodeInfo.encryptTableCount" disabled></el-input>
        </el-form-item>
         <el-form-item label="加密字段数量" >
          <el-input v-model="nodeInfo.encryptFiledCount" disabled></el-input>
        </el-form-item>
         <el-form-item label="未加密表数量" >
          <el-input v-model="nodeInfo.unencryptTableCount" disabled></el-input>
        </el-form-item>
        <el-form-item label="未加密字段数量" >
          <el-input v-model="nodeInfo.unencryptFiledCount" disabled></el-input>
        </el-form-item>
       
      </div>
    </el-form>
  </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: rgba(245, 252, 255, 1);
  
}
:deep(.el-descriptions__body .el-descriptions__table .el-descriptions__cell){
  font-size: 12px;
  color: rgba(53, 64, 79, 1);
}
:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label){
  background-color: rgba(245, 252, 255, 1);
  text-align: right;
  font-size: 12px;
  color: rgba(148, 148, 148, 1);
}

  :deep(.formBox) {
          border-radius: 5px;
          background: #ebebeb;
          border: 1px solid rgba(29, 178, 245, 1);
          overflow: hidden;
          .el-form-item__content {
            margin-left: 1px;
            background: #f5fcff;
          }
          .el-form-item__label {
            height: 40px;
            line-height: 40px;
            background: #f5fcff;
            color: rgba(148, 148, 148, 1);
          }
          .el-form-item {
            margin-bottom: 1px;
          }
          .el-input {
            height: 40px;
            line-height: 40px;
          }
          .is-disabled {
            background: #f5fcff;
            .el-input__wrapper {
              background: #f5fcff;
              box-shadow: none;
              border-radius: 0;
            }
            .el-input__inner {
              -webkit-text-fill-color: rgba(53, 64, 79, 1);
            }
          }
          .el-form-item__error {
            top: 30% !important;
            left: auto !important;
            right: 89px !important;
          }
        }
</style>