<template>
  <div class="structure-tab">
    <el-table 
      :data="tableData" 
      max-height="500px"
      border 
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa', color: '#333' }"
      :row-style="{ height: '40px' }"
      :cell-style="{ padding: '8px 0', textAlign: 'center' }"
    >
      <el-table-column label="主键" width="80" fixed>
        <template #default="scope">
          <el-tag v-if="scope.row.primarykey === '1'" type="success">是</el-tag>
        </template> 
      </el-table-column>
      <el-table-column prop="columnname" label="字段名" width="180" />
      <el-table-column prop="remarks" label="注释" min-width="200" />
      <el-table-column prop="typename" label="类型" width="120" />
      <el-table-column prop="columnsize" label="长度" width="120" />
      <el-table-column prop="decimaldigits" label="精度" width="120" />
    </el-table>
  </div>
</template>

<script setup>
const props = defineProps({
  tableData: {
    type: Array,
    required: true,
    default: () => []
  }
})
</script>

<style scoped>
.structure-tab {
  padding: 10px;
  background-color: white;
}

:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #fafafa;
}
</style>