<template>
	<el-drawer
		v-model="visible"
		title="上传和下载任务"
		direction="rtl"
		size="50%"
		destroy-on-close
		@open="onOpen"
	>
		<el-tabs v-model="activeTab">
			<el-tab-pane label="上传" name="upload" />
			<el-tab-pane label="下载" name="download" />
			<el-tab-pane label="其他" name="other" />
		</el-tabs>

		<div class="task-table-wrap">
			<el-table
				v-loading="loading[activeTab]"
				:data="list[activeTab]"
				height="calc(100vh - 240px)"
				row-key="id"
				:empty-text="emptyText"
				size="small"
				stripe
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
			>
				<el-table-column label="所属模块" prop="moduleName" width="120" show-overflow-tooltip />
				<el-table-column label="任务类型" prop="typeLabel" width="100" show-overflow-tooltip />
				<el-table-column label="任务名称" prop="detailType" min-width="150" show-overflow-tooltip />
				<el-table-column label="任务状态" align="center" show-overflow-tooltip>
					<template #default="{ row }">
						<el-tag>{{ row.status }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="时间" width="150" show-overflow-tooltip>
					<template #default="{ row }">
						{{ formatTime(row) }}
					</template>
				</el-table-column>
			</el-table>
			<div class="task-pagination">
				<el-pagination
					v-model:current-page="pagination[activeTab].current"
					v-model:page-size="pagination[activeTab].size"
					:page-sizes="[10, 20, 50]"
					:total="pagination[activeTab].total"
					layout="prev, pager, next, sizes"
					small
					@current-change="onPageChange"
					@size-change="onSizeChange"
				/>
			</div>
		</div>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue'
import { fetchList } from '/@/api/basic/basicasynctask'

type TaskTab = 'upload' | 'download' | 'other'

const visible = ref(false)
const activeTab = ref<TaskTab>('upload')
const loading = reactive<Record<TaskTab, boolean>>({ upload: false, download: false, other: false })
const list = reactive<Record<TaskTab, any[]>>({ upload: [], download: [], other: [] })
const pagination = reactive<Record<TaskTab, { current: number; size: number; total: number }>>({
	upload: { current: 1, size: 10, total: 0 },
	download: { current: 1, size: 10, total: 0 },
	other: { current: 1, size: 10, total: 0 },
})

/** Tab 对应接口 type：1 上传 2 下载 3 其他 */
const TAB_TYPE_MAP: Record<TaskTab, number> = { upload: 1, download: 2, other: 3 }
const EMPTY_TEXT_MAP: Record<TaskTab, string> = { upload: '暂无上传任务', download: '暂无下载任务', other: '暂无其他任务' }

// 表格样式，参考主列表页通用样式
const tableStyle = {
	cellStyle: { textAlign: 'center' },
	headerCellStyle: {
		textAlign: 'center',
		background: 'var(--el-table-row-hover-bg-color)',
		color: 'var(--el-text-color-primary)',
	},
}

const emptyText = computed(() => EMPTY_TEXT_MAP[activeTab.value])

const loadList = async () => {
	const type = activeTab.value
	const p = pagination[type]
	loading[type] = true
	try {
		const res = await fetchList({ type: TAB_TYPE_MAP[type], current: p.current, size: p.size })
		const data = res?.data ?? res
		const records = data?.records ?? []
		const total = data?.total ?? 0
		list[type] = Array.isArray(records) ? records : []
		p.total = Number(total) || 0
	} catch {
		list[type] = []
	} finally {
		loading[type] = false
	}
}

const onPageChange = (page: number) => {
	pagination[activeTab.value].current = page
	loadList()
}

const onSizeChange = (size: number) => {
	pagination[activeTab.value].size = size
	pagination[activeTab.value].current = 1
	loadList()
}

const onOpen = () => {
	loadList()
}

// 切换 Tab 时加载对应列表
watch(activeTab, () => {
	if (visible.value) loadList()
})

const formatTime = (item: any) => {
	const t = item?.createTime ?? item?.create_time ?? item?.updateTime ?? item?.update_time ?? ''
	return t ? (t.slice(0, 16).replace('T', ' ')) : '-'
}

const open = () => {
	visible.value = true
}

defineExpose({ open })
</script>

<style scoped lang="scss">
.task-table-wrap {
	padding: 0 4px;
}
.task-pagination {
	padding: 12px 0;
	display: flex;
	justify-content: flex-end;
}
</style>
