<!-- ImportRecordsModal.vue -->
<template>
  <a-modal
    v-model:open="visible"
    :title="title || '导入记录'"
    width="1200px"
    :footer="null"
    :maskClosable="false"
    @cancel="handleCancel"
    :destroyOnClose="true"
  >
    <div class="import-records-modal">
      <!-- 表格 -->
      <a-table
        :dataSource="tableData"
        :columns="columns"
        :pagination="pagination"
        :loading="loading"
        :scroll="{ x: 1200 }"
        rowKey="taskId"
      >
        <!-- 状态列渲染 -->
        <template #status="{ record }">
          <a-tag :color="getStatusColor(record.status)">
            {{ getStatusText(record.status) }}
          </a-tag>
        </template>

        <!-- 进度列渲染 -->
        <template #progress="{ record }">
          <a-progress
            :percent="record.progress"
            size="small"
            :status="getProgressStatus(record.status)"
          />
        </template>

        <!-- 操作列渲染 -->
        <template #action="{ record }">
          <a-space>
            <a-button type="link" size="small" @click="viewDetails(record)">
              查看异常数据
            </a-button>
          </a-space>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { message } from 'ant-design-vue';

// 定义props
const props = defineProps({
  // 弹框标题
  title: {
    type: String,
    default: '导入记录'
  },
  // 是否显示弹框
  modelValue: {
    type: Boolean,
    default: false
  },
  // 数据获取函数
  fetchData: {
    type: Function,
    required: true
  }
});

// 定义emit
const emit = defineEmits(['update:modelValue', 'close', 'view-details', 'download-result', 'retry-import']);

// 弹框显示状态
const visible = ref(false);

// 表格数据
const tableData = ref([]);

// 加载状态
const loading = ref(false);

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  pageSizeOptions: ['10', '20', '50', '100'],
  onChange: (page, pageSize) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    fetchTableData();
  },
  onShowSizeChange: (current, size) => {
    pagination.current = 1;
    pagination.pageSize = size;
    fetchTableData();
  }
});

// 表格列配置
const columns = [
  {
    title: '批次号',
    dataIndex: 'taskId',
    key: 'taskId',
    align: 'center',
    fixed: 'left',
    width: 150,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    width: 100,
    slots: { customRender: 'status' },
  },
  {
    title: '导入任务类型',
    dataIndex: 'alias',
    key: 'alias',
    align: 'center',
    width: 150,
  },
  {
    title: '总数量',
    dataIndex: 'totalCount',
    key: 'totalCount',
    align: 'center',
    width: 100,
  },
  {
    title: '成功数量',
    dataIndex: 'successCount',
    key: 'successCount',
    align: 'center',
    width: 100,
  },
  {
    title: '异常数量',
    dataIndex: 'failCount',
    key: 'failCount',
    align: 'center',
    width: 100,
  },
  {
    title: '上传时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
    width: 180,
  },
  {
    title: '操作人',
    dataIndex: 'createByName',
    key: 'createByName',
    align: 'center',
    width: 120,
  },
  {
    title: '进度',
    dataIndex: 'progress',
    key: 'progress',
    align: 'center',
    width: 150,
    slots: { customRender: 'progress' },
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    fixed: 'right',
    width: 200,
    slots: { customRender: 'action' },
  },
];

// 监听父组件传入的modelValue
watch(() => props.modelValue, (val) => {
  visible.value = val;
  if (val) {
    // 弹框打开时获取数据
    fetchTableData();
  }
});

// 获取表格数据
const fetchTableData = async () => {
  loading.value = true;
  
  try {
    // 调用父组件传入的数据获取函数
    const result = await props.fetchData({
      page: pagination.current,
      pageSize: pagination.pageSize
    });
    
    // 假设返回的数据格式为 { list: [...], total: 100 }
    tableData.value = Array.isArray(result.list) ? result.list : result;
    pagination.total = result.total || tableData.value.length;
    
  } catch (error) {
    console.error('获取数据失败:', error);
    message.error(error.message || '获取导入记录失败');
    tableData.value = [];
    pagination.total = 0;
  } finally {
    loading.value = false;
  }
};

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'completed': return '已完成';
    case 'failed': return '失败';
    case 'processing': return '处理中';
    case 'pending': return '待处理';
    default: return status;
  }
};

// 获取状态颜色
const getStatusColor = (status) => {
  switch (status) {
    case 'completed': return 'green';
    case 'failed': return 'red';
    case 'processing': return 'blue';
    case 'pending': return '#ffcc00';
    default: return 'default';
  }
};

// 获取进度条状态
const getProgressStatus = (status) => {
  if (status === 'completed') return 'success';
  if (status === 'failed') return 'exception';
  if (status === 'processing') return 'active';
  return 'normal';
};

// 关闭弹框
const handleCancel = () => {
  visible.value = false;
  emit('update:modelValue', false);
  emit('close');
};

// 查看详情
const viewDetails = (record) => {
  emit('view-details', record);
};

// 下载结果
const downloadResult = (record) => {
  emit('download-result', record);
};

// 重新导入
const retryImport = (record) => {
  emit('retry-import', record);
};

// 组件卸载时清理数据
onMounted(() => {
  // 初始化时不需要获取数据，等待父组件打开弹框
});
</script>

<style scoped>
.import-records-modal {
  padding: 10px 0;
}

/* 针对表格的样式优化 */
:deep(.ant-table) {
  background: #fff;
  border-radius: 6px;
}

:deep(.ant-table-thead > tr > th) {
  text-align: center;
  background-color: #f9f9f9;
  font-weight: 600;
}

:deep(.ant-table-tbody > tr > td) {
  text-align: center;
}

/* 操作按钮样式 */
:deep(.ant-btn-link) {
  height: auto;
  padding: 2px 4px;
  color: #1890ff;
}

:deep(.ant-btn-link:hover) {
  color: #40a9ff;
}
</style>



