import { defineComponent, PropType } from 'vue';
type Align = "left" | "center" | "right" | "justify" | "char" | undefined
/**
 * 错误信息表格
 */
const ErrorTable = defineComponent({
  props: {
    dataSource: {
      type: Array,
      required: true,
    },
    align: {
      type: String as PropType<Align>,
      default: 'left'
    }
  },
  render() {
    return (
      <table style={{ borderCollapse: 'collapse', border: '1px solid #E5E7EC' }}>
        <thead>
          <tr>
            <th align={this.align} style={{ minWidth: '180px', padding: '8px 12px', border: '1px solid #E5E7EC' }}>名称</th>
            <th align={this.align} style={{ minWidth: '180px', padding: '8px 12px', border: '1px solid #E5E7EC' }}>行数</th>
            <th align={this.align} style={{ minWidth: '180px', padding: '8px 12px', border: '1px solid #E5E7EC' }}>错误</th>
          </tr>
        </thead>
        <tbody>
          {this.dataSource.map((item: any) => (
            <tr>
              <td align={this.align} style={{ minWidth: '180px', padding: '8px 12px', border: '1px solid #E5E7EC' }}>{item.fieldName}</td>
              <td align={this.align} style={{ minWidth: '180px', padding: '8px 12px', border: '1px solid #E5E7EC' }}>第{item.rowNum}行</td>
              <td align={this.align} style={{ minWidth: '180px', padding: '8px 12px', border: '1px solid #E5E7EC' }}>{item.tips}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  },
});

export default ErrorTable;