<template>
  <vxe-modal
    v-model="showModal"
    title="检查结果"
    @hide="onHide"
    height="582"
    width="1003"
    show-footer
    esc-closable
  >
    <vxe-button @click="exportEvent">直接导出 CSV 文件</vxe-button>
    <ProTable
      :config="config"
      ref="ProTableRef"
      :data="table"
      :showPagination="false"
      :showToolBar="false"
    >
    </ProTable>
    <template #footer> </template>
  </vxe-modal>
</template>

<script setup>
  import { computed } from 'vue';
  import { reactive, ref } from 'vue';

  const showModal = ref(false);
  const table = ref(undefined);
  const ProTableRef = ref();
  const config = reactive({
    exportConfig: {},
    toolbarConfig: { enabled: false },
    columns: [
      { field: 'row', title: '行' },
      {
        field: 'value',
        title: '错误值',
      },
      {
        field: 'message',
        title: '错误描述',
      },
    ],
  });

  const exportEvent = () => {
    if (ProTableRef.value && ProTableRef.value.element) {
      ProTableRef.value.element.exportData({
        type: 'csv',
      });
    }
  };
  const onHide = () => {
    table.value = null;
  };
  const openModal = (account) => {
    showModal.value = true;
    table.value = account;
  };

  defineExpose({
    openModal,
  });
</script>
<style lang="scss" scoped></style>
