<script setup lang="ts">
import type { FileVO } from '@/api/infra/file'
import { getFilePage } from '@/api/infra/file'
import { BasicTable, useTable } from '@/components/Table'
import { columns, searchFormSchema } from '@/views/infra/file/file.data'
import { BasicModal, useModalInner } from '@/components/Modal'

const emit = defineEmits(['select'])

const [registerTable, { getSelectRows }] = useTable({
  title: '文件列表',
  api: getFilePage,
  columns,
  formConfig: { labelWidth: 120, schemas: searchFormSchema },
  useSearchForm: true,
  showTableSetting: true,
  showIndexColumn: false,
  clickToRowSelect: true,
  canResize: false,
  isCanResizeParent: false,
  scroll: { y: 360 },
  rowSelection: { type: 'radio' },
  afterFetch: (data: FileVO[]) => {
    return data.filter((d) => {
      return d.name.endsWith('.doc') || d.name.endsWith('.docx')
    })
  },
})

const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {
  setModalProps({ height: 500 })
})

function handleConfirm() {
  const row = getSelectRows() as FileVO[]
  if (row.length > 0)
    emit('select', row[0])

  closeModal()
}
</script>

<template>
  <div>
    <BasicModal width="80%" v-bind="$attrs" title="选择文件" @register="registerModal" @ok="handleConfirm">
      <BasicTable @register="registerTable" />
    </BasicModal>
  </div>
</template>
