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

    <el-form ref="formRef" :model="nodeData"  label-width="138px" >
      <div class="formBox">
        <el-form-item label="字段数" >
          <el-input v-model="nodeData.totalColumnCount" disabled></el-input>
        </el-form-item>
        <el-form-item label="未加密字段数量" >
          <el-input v-model="nodeData.unencryptColumnCount" disabled></el-input>
        </el-form-item>
        <el-form-item label="加密字段数量" >
          <el-input v-model="nodeData.encryptColumnCount" disabled></el-input>
        </el-form-item>
        <el-form-item label="操作人" >
          <el-input v-model="nodeData.operator" disabled></el-input>
        </el-form-item>
        <el-form-item label="操作时间">
          <el-input v-model="nodeData.operationTime" disabled></el-input>
        </el-form-item>
        
       
      </div>
    </el-form>
  </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;
} */

.el-descriptions__content {
  background-color: rgba(245, 252, 255, 1);
  
}
.el-descriptions__body .el-descriptions__table .el-descriptions__cell{
  font-size: 12px;
  color: rgba(53, 64, 79, 1);
}
.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>