<template>
  <a-modal width="80%" v-model:open="props.open" title="错误信息" :footer="null" @cancel="emits('update:open', false)" :destroyOnClose="true">
    <div class="content">
      <a-table :dataSource="props.data" :columns="columns" :pagination="false" :scroll="{ y: 630 }"/>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, watch } from "vue"
const props = defineProps(["open", "data"])
const emits = defineEmits(["update:open"])
interface columnsType {
  title: string,
  dataIndex: string,
  key: string,
  width?: number,
}
const columns = ref<columnsType[]>([])
watch(() => props.data, ()=> {
  columns.value = []
  Object.keys(props.data[0]).forEach(key => {
    if(key !== '导入错误'){
      columns.value.push({
        title: key,
        dataIndex: key,
        key: key,
        width: 120,
      })
    }
  })
  columns.value.push({
    title: '导入错误',
    dataIndex: '导入错误',
    key: '导入错误',
  })
})
</script>

<style lang="scss" scoped>
.content{
  padding: 10px;
}
</style>
