<template>
	<div class="pages-base-layout task-page">
		<div class="tool-bar">
			<div class="left-panel">
				<a-space>
					<a-input v-model:value="searchForm.keyword" placeholder="任务名称/命令" allow-clear style="width: 180px" />
					<a-select v-model:value="searchForm.type" placeholder="任务类型" allow-clear style="width: 120px">
						<a-select-option value="command">命令</a-select-option>
						<a-select-option value="job">任务</a-select-option>
						<a-select-option value="closure">闭包</a-select-option>
					</a-select>
					<a-select v-model:value="searchForm.is_active" placeholder="状态" allow-clear style="width: 100px">
						<a-select-option :value="true">启用</a-select-option>
						<a-select-option :value="false">禁用</a-select-option>
					</a-select>
					<a-button type="primary" @click="handleSearch">
						<template #icon><SearchOutlined /></template>
						搜索
					</a-button>
					<a-button @click="handleReset">
						<template #icon><RedoOutlined /></template>
						重置
					</a-button>
				</a-space>
			</div>
			<div class="right-panel">
				<a-dropdown :disabled="selectedRows.length === 0">
					<a-button :disabled="selectedRows.length === 0">
						批量操作
						<DownOutlined />
					</a-button>
					<template #overlay>
						<a-menu>
							<a-menu-item @click="handleBatchStatus(true)"> <CheckCircleOutlined />批量启用 </a-menu-item>
							<a-menu-item @click="handleBatchStatus(false)"> <StopOutlined />批量禁用 </a-menu-item>
							<a-menu-divider />
							<a-menu-item @click="handleBatchDelete" danger> <DeleteOutlined />批量删除 </a-menu-item>
						</a-menu>
					</template>
				</a-dropdown>
				<a-button type="primary" @click="handleAdd">
					<template #icon><PlusOutlined /></template>
					新增
				</a-button>
			</div>
		</div>

		<div class="table-content">
			<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination" :row-selection="rowSelection" :row-key="rowKey" @refresh="refreshTable" @paginationChange="handlePaginationChange">
				<template #type="{ record }">
					<a-tag :color="getTypeColor(record.type)">{{ getTypeText(record.type) }}</a-tag>
				</template>

				<template #is_active="{ record }">
					<a-switch :checked="record.is_active" :disabled="!canEdit" @change="handleToggleStatus(record)" />
				</template>

				<template #expression="{ record }">
					<code class="cron-code">{{ record.expression }}</code>
				</template>

				<template #last_run_at="{ record }">
					{{ record.last_run_at ? formatDate(record.last_run_at) : '-' }}
				</template>

				<template #next_run_at="{ record }">
					<span v-if="record.next_run_at" class="next-run">
						<ClockCircleOutlined />
						{{ formatDate(record.next_run_at) }}
					</span>
					<span v-else>-</span>
				</template>

				<template #statistics="{ record }">
					<a-space>
						<a-tooltip title="成功次数">
							<a-tag color="success">
								<CheckCircleOutlined />
								{{ record.run_count || 0 }}
							</a-tag>
						</a-tooltip>
						<a-tooltip title="失败次数">
							<a-tag :color="record.failed_count > 0 ? 'error' : 'default'">
								<CloseCircleOutlined />
								{{ record.failed_count || 0 }}
							</a-tag>
						</a-tooltip>
					</a-space>
				</template>

				<template #action="{ record }">
					<a-space>
						<a-button type="link" size="small" @click="handleView(record)"> <EyeOutlined />查看 </a-button>
						<a-button type="link" size="small" @click="handleEdit(record)"> <EditOutlined />编辑 </a-button>
						<a-popconfirm title="确定立即执行该任务吗？" @confirm="handleRun(record)">
							<a-button type="link" size="small"> <PlayCircleOutlined />执行 </a-button>
						</a-popconfirm>
						<a-popconfirm title="确定删除该任务吗？" @confirm="handleDelete(record)">
							<a-button type="link" size="small" danger> <DeleteOutlined />删除 </a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</scTable>
		</div>
	</div>

	<!-- 新增/编辑弹窗 -->
	<TaskDialog v-if="dialog.save" v-model:visible="dialog.save" :record="currentRecord" @success="handleSaveSuccess" />

	<!-- 查看详情弹窗 -->
	<TaskDetailDialog v-if="dialog.detail" v-model:visible="dialog.detail" :record="currentRecord" />
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { SearchOutlined, RedoOutlined, PlusOutlined, DeleteOutlined, EditOutlined, DownOutlined, CheckCircleOutlined, StopOutlined, EyeOutlined, PlayCircleOutlined, ClockCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
import { useTable } from '@/hooks/useTable'
import systemApi from '@/api/system'
import scTable from '@/components/scTable/index.vue'
import TaskDialog from './components/TaskDialog.vue'
import TaskDetailDialog from './components/TaskDetailDialog.vue'

// ===== useTable Hook =====
const { tableRef, searchForm, tableData, loading, pagination, selectedRows, rowSelection, handleSearch, handleReset, handlePaginationChange, refreshTable } = useTable({
	api: systemApi.task.list.get,
	searchForm: {
		keyword: '',
		type: undefined,
		is_active: undefined,
	},
	columns: [],
	needPagination: true,
	needSelection: true,
})

// ===== 表格列配置 =====
const rowKey = 'id'

const columns = [
	{ title: 'ID', dataIndex: 'id', key: 'id', width: 80, align: 'center' },
	{
		title: '任务名称',
		dataIndex: 'name',
		key: 'name',
		width: 150,
		ellipsis: true,
	},
	{
		title: '任务类型',
		dataIndex: 'type',
		key: 'type',
		width: 100,
		align: 'center',
		slot: 'type',
	},
	{ title: '命令/类', dataIndex: 'command', key: 'command', ellipsis: true },
	{
		title: 'Cron表达式',
		dataIndex: 'expression',
		key: 'expression',
		width: 120,
		align: 'center',
		slot: 'expression',
	},
	{
		title: '状态',
		dataIndex: 'is_active',
		key: 'is_active',
		width: 80,
		align: 'center',
		slot: 'is_active',
	},
	{
		title: '上次运行',
		dataIndex: 'last_run_at',
		key: 'last_run_at',
		width: 160,
		align: 'center',
		slot: 'last_run_at',
	},
	{
		title: '下次运行',
		dataIndex: 'next_run_at',
		key: 'next_run_at',
		width: 160,
		align: 'center',
		slot: 'next_run_at',
	},
	{
		title: '统计',
		dataIndex: 'statistics',
		key: 'statistics',
		width: 120,
		align: 'center',
		slot: 'statistics',
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 200,
		align: 'center',
		fixed: 'right',
		slot: 'action',
	},
]

// ===== 弹窗状态 =====
const dialog = reactive({
	save: false,
	detail: false,
})

const currentRecord = ref(null)

// ===== 权限控制 =====
const canEdit = ref(true)

// ===== 方法：获取任务类型文本 =====
const getTypeText = (type) => {
	const typeMap = {
		command: '命令',
		job: '任务',
		closure: '闭包',
	}
	return typeMap[type] || type
}

// ===== 方法：获取任务类型颜色 =====
const getTypeColor = (type) => {
	const colorMap = {
		command: 'blue',
		job: 'green',
		closure: 'orange',
	}
	return colorMap[type] || 'default'
}

// ===== 方法：格式化日期 =====
const formatDate = (dateStr) => {
	if (!dateStr) return '-'
	const date = new Date(dateStr)
	return date.toLocaleString('zh-CN')
}

// ===== 方法：切换状态 =====
const handleToggleStatus = async (record) => {
	try {
		const res = await systemApi.task.batchStatus.post({
			ids: [record.id],
			status: record.is_active,
		})
		if (res.code === 200) {
			message.success(record.is_active ? '已启用' : '已禁用')
			refreshTable()
		} else {
			message.error(res.message || '操作失败')
		}
	} catch (error) {
		message.error('操作失败')
	}
}

// ===== 方法：新增 =====
const handleAdd = () => {
	currentRecord.value = null
	dialog.save = true
}

// ===== 方法：编辑 =====
const handleEdit = (record) => {
	currentRecord.value = { ...record }
	dialog.save = true
}

// ===== 方法：查看 =====
const handleView = (record) => {
	currentRecord.value = { ...record }
	dialog.detail = true
}

// ===== 方法：删除 =====
const handleDelete = async (record) => {
	try {
		const res = await systemApi.task.delete.delete(record.id)
		if (res.code === 200) {
			message.success('删除成功')
			refreshTable()
		} else {
			message.error(res.message || '删除失败')
		}
	} catch (error) {
		message.error('删除失败')
	}
}

// ===== 方法：执行任务 =====
const handleRun = async (record) => {
	try {
		const res = await systemApi.task.run.post(record.id)
		if (res.code === 200) {
			message.success('任务执行成功')
			refreshTable()
		} else {
			message.error(res.message || '任务执行失败')
		}
	} catch (error) {
		message.error('任务执行失败')
	}
}

// ===== 方法：批量删除 =====
const handleBatchDelete = () => {
	if (selectedRows.value.length === 0) {
		message.warning('请选择要删除的任务')
		return
	}

	Modal.confirm({
		title: '确认删除',
		content: `确定删除选中的 ${selectedRows.value.length} 个任务吗？`,
		onOk: async () => {
			try {
				const ids = selectedRows.value.map((item) => item.id)
				const res = await systemApi.task.batchDelete.post({ ids })
				if (res.code === 200) {
					message.success('删除成功')
					selectedRows.value = []
					refreshTable()
				} else {
					message.error(res.message || '删除失败')
				}
			} catch (error) {
				message.error('删除失败')
			}
		},
	})
}

// ===== 方法：批量更新状态 =====
const handleBatchStatus = (status) => {
	if (selectedRows.value.length === 0) {
		message.warning('请选择要操作的任务')
		return
	}

	const statusText = status ? '启用' : '禁用'

	Modal.confirm({
		title: `确认${statusText}`,
		content: `确定要${statusText}选中的 ${selectedRows.value.length} 个任务吗？`,
		onOk: async () => {
			try {
				const ids = selectedRows.value.map((item) => item.id)
				const res = await systemApi.task.batchStatus.post({
					ids,
					status,
				})
				if (res.code === 200) {
					message.success(`${statusText}成功`)
					selectedRows.value = []
					refreshTable()
				} else {
					message.error(res.message || '操作失败')
				}
			} catch (error) {
				message.error('操作失败')
			}
		},
	})
}

// ===== 方法：保存成功回调 =====
const handleSaveSuccess = () => {
	dialog.save = false
	refreshTable()
}
</script>

<style scoped lang="scss">
.task-page {
	.cron-code {
		padding: 2px 6px;
		background: #f5f5f5;
		border-radius: 3px;
		font-family: 'Consolas', 'Monaco', monospace;
		font-size: 12px;
	}

	.next-run {
		color: #1890ff;
		font-size: 12px;
	}
}
</style>
