<template>
  <div class="flex direction-column full">
    <div class="p-l-base p-t-medium-base fill-blank">
      <base-form ref="formRef" size="small" :items="items" :model="model">
        <template #form-item-operation>
          <el-button :loading="loading" type="primary" @click="onSearch">查询</el-button>
          <!-- <el-button type="primary" custom-1 @click="onExport">导出</el-button> -->
        </template>
      </base-form>
    </div>
    <div class="flex-1 p-base">
      <div class="p-base radius-base fill-blank">
        <base-table ref="tableRef" border stripe :columns="columns" :data="data" size="small">
          <template #column-operation="{ row }">
            <el-link v-if="!!row.filePath" download target="_blank" type="primary" :href="row.filePath">下载</el-link>
            <el-popconfirm
              v-if="row.status !== 'PROCESSING'"
              :width="'220px'"
              hide-icon
              title="是否该条记录?"
              @confirm="handleDeleteRecord(row)"
            >
              <template #reference>
                <el-link :style="{ marginLeft: !!row.filePath ? '15px' : '0' }" link type="primary">删除</el-link>
              </template>
            </el-popconfirm>
          </template>
        </base-table>
        <el-pagination
          v-bind="pagination"
          v-model:current-page="currentPage"
          background
          right
          :hide-on-single-page="true"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="ImformationReport">
import { reactive, computed, onMounted } from 'vue'
import type { ExtractMultipleApiParams } from '@/api/api'
import type { EpFormItem, EpTableColumn, EpFormRules } from 'global-type'
import useVW from '@/hooks/useVW'
import useTable from '@/hooks/useTable'
import useForm from '@/hooks/useForm'
import { ElButton, ElPagination, ElLink, ElMessage, ElPopconfirm } from 'element-plus'
import BaseForm from '@/components/element/BaseForm.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import { TaskTypeOption } from '@/constants/dicts'
import useFetch from '@/hooks/useFetch'
const { formRef, elFormRef, defineColumn, _ } = useForm()

const OneRowSpan5 = defineColumn(_, 'row-1', { span: 5 })
const changeModelValue = (val: any) => {
  //   alert(val)
}
onMounted(() => {
  onSearch()
})
const items = computed<EpFormItem[]>(() => {
  return [
    OneRowSpan5({
      label: '任务类型',
      prop: 'taskType',
      slotType: 'select',
      slot: {
        options: TaskTypeOption,
        onChange: changeModelValue,
      },
    }),
    OneRowSpan5({ slotName: 'operation', labelWidth: '20px' }),
  ]
})

const model = reactive<ExtractMultipleApiParams<'imortAndExportList'>>({
  taskType: '',
})
const { pagination, currentPage, loading, data, fetchTable } = useTable('imortAndExportList', model)
const onSearch = async () => {
  fetchTable()
}
const columns: EpTableColumn[] = [
  { label: 'ID', prop: 'id' },
  { label: '任务类型', prop: 'taskTypeName' },
  // { label: '文件路径', prop: 'filePath' },
  { label: '用时', prop: 'spentTime' },
  { label: '状态', prop: 'statusName' },
  { label: '状态描述', prop: 'statusMsg' },
  { label: '创建时间', prop: 'createTime' },
  { label: '操作', slotName: 'operation', showOverflowTooltip: false, minWidth: 80 },
]
const { fetch: deleteRecord } = useFetch('removeImportOrExport')
const handleDeleteRecord = async (row: any) => {
  try {
    await deleteRecord({ id: row.id })
    ElMessage.success(`删除成功`)
    fetchTable()
  } catch (error) {
    console.error(error)
  }
}
</script>
