<template>
	<div class="mission-management">
		<div class="header">
			<h2>任务管理</h2>
			<div class="operation-buttons">
				<el-button type="primary" @click="handleCreate">
					<el-icon>
						<Plus />
					</el-icon>
					创建任务
				</el-button>
				<el-button
					type="danger"
					:disabled="!selectedIds.length"
					@click="handleBatchCancel"
				>
					<el-icon>
						<Close />
					</el-icon>
					批量取消
				</el-button>
			</div>
		</div>

		<div class="filter-container">
			<el-input
				v-model="listQuery.keyword"
				placeholder="搜索任务名称/描述"
				style="width: 300px"
				clearable
				@keyup.enter="handleFilter"
			>
				<template #append>
					<el-button :icon="Search" @click="handleFilter" />
				</template>
			</el-input>
			<el-select
				v-model="listQuery.status"
				placeholder="状态筛选"
				clearable
				style="width: 120px; margin-left: 10px"
			>
				<el-option
					v-for="item in statusOptions"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
			<el-date-picker
				v-model="listQuery.dateRange"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				style="margin-left: 10px; width: 280px"
			/>
		</div>

		<el-table
			v-loading="listLoading"
			:data="missionList"
			border
			fit
			highlight-current-row
			style="width: 100%; margin-top: 20px"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column prop="id" label="ID" width="80" align="center" />
			<el-table-column prop="name" label="任务名称" min-width="150" />
			<el-table-column label="关联无人机" width="180">
				<template #default="{ row }">
					<el-tag v-for="drone in row.drones" :key="drone.id" style="margin-right: 5px">
						{{ drone.name }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="任务类型" width="120">
				<template #default="{ row }">
					<el-tag :type="typeTagMap[row.type]">
						{{ typeMap[row.type] }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="状态" width="120" align="center">
				<template #default="{ row }">
					<el-tag :type="statusTagMap[row.status]">
						{{ statusMap[row.status] }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="startTime" label="开始时间" width="180" />
			<el-table-column prop="endTime" label="结束时间" width="180" />
			<el-table-column label="操作" width="220" align="center" fixed="right">
				<template #default="{ row }">
					<el-button size="small" @click="handleDetail(row)">
						<el-icon>
							<View />
						</el-icon>
						详情
					</el-button>
					<el-button
						size="small"
						type="primary"
						:disabled="row.status !== 'pending'"
						@click="handleExecute(row)"
					>
						<el-icon>
							<VideoPlay />
						</el-icon>
						执行
					</el-button>
					<el-button
						size="small"
						type="danger"
						:disabled="!['pending', 'progress'].includes(row.status)"
						@click="handleCancel(row)"
					>
						<el-icon>
							<Close />
						</el-icon>
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="pagination-container">
			<el-pagination
				v-model:current-page="listQuery.page"
				v-model:page-size="listQuery.limit"
				:total="total"
				:page-sizes="[10, 20, 30, 50]"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>

		<!-- 任务创建/编辑对话框 -->
		<el-dialog
			v-model="dialogVisible"
			:title="dialogType === 'edit' ? '编辑任务' : '创建任务'"
			width="700px"
		>
			<el-form
				ref="missionForm"
				:model="missionForm"
				:rules="missionRules"
				label-width="100px"
			>
				<el-form-item label="任务名称" prop="name">
					<el-input v-model="missionForm.name" placeholder="请输入任务名称" />
				</el-form-item>
				<el-form-item label="任务类型" prop="type">
					<el-select v-model="missionForm.type" placeholder="请选择任务类型">
						<el-option
							v-for="item in typeOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="关联无人机" prop="drones">
					<el-select
						v-model="missionForm.drones"
						multiple
						filterable
						placeholder="请选择无人机"
						style="width: 100%"
					>
						<el-option
							v-for="drone in droneOptions"
							:key="drone.id"
							:label="drone.name"
							:value="drone.id"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="任务时间" prop="timeRange">
					<el-date-picker
						v-model="missionForm.timeRange"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="任务描述" prop="description">
					<el-input
						v-model="missionForm.description"
						type="textarea"
						:rows="3"
						placeholder="请输入任务描述"
					/>
				</el-form-item>
				<el-form-item label="航线规划" prop="route">
					<el-button type="primary" @click="showRouteMap = true">
						<el-icon>
							<MapLocation />
						</el-icon>
						规划航线
					</el-button>
					<div v-if="missionForm.route" class="route-preview">
						<span>已设置 {{ missionForm.route.points.length }} 个航点</span>
						<el-button type="text" @click="showRouteMap = true">查看</el-button>
					</div>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="confirmMission">确认</el-button>
			</template>
		</el-dialog>

		<!-- 航线规划地图 -->
		<el-dialog
			v-model="showRouteMap"
			title="航线规划"
			width="80%"
			top="5vh"
			fullscreen
		>
			<div class="map-container">
				<!-- 这里放置地图组件 -->
				<div style="height: 80vh; background: #f5f5f5; display: flex; align-items: center; justify-content: center">
					<h3>地图组件区域 (可集成高德/Google/百度地图)</h3>
				</div>
			</div>
			<template #footer>
				<el-button @click="showRouteMap = false">取消</el-button>
				<el-button type="primary" @click="saveRoute">保存航线</el-button>
			</template>
		</el-dialog>

		<!-- 任务详情抽屉 -->
		<el-drawer
			v-model="detailVisible"
			title="任务详情"
			direction="rtl"
			size="50%"
		>
			<div v-if="currentMission" class="mission-detail">
				<el-descriptions :column="1" border>
					<el-descriptions-item label="任务ID">{{ currentMission.id }}</el-descriptions-item>
					<el-descriptions-item label="任务名称">{{ currentMission.name }}</el-descriptions-item>
					<el-descriptions-item label="任务类型">
						<el-tag :type="typeTagMap[currentMission.type]">
							{{ typeMap[currentMission.type] }}
						</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="任务状态">
						<el-tag :type="statusTagMap[currentMission.status]">
							{{ statusMap[currentMission.status] }}
						</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="关联无人机">
						<div style="display: flex; flex-wrap: wrap; gap: 5px">
							<el-tag
								v-for="drone in currentMission.drones"
								:key="drone.id"
								type="info"
							>
								{{ drone.name }} ({{ drone.model }})
							</el-tag>
						</div>
					</el-descriptions-item>
					<el-descriptions-item label="开始时间">{{ currentMission.startTime }}</el-descriptions-item>
					<el-descriptions-item label="结束时间">{{ currentMission.endTime }}</el-descriptions-item>
					<el-descriptions-item label="任务描述">
						<div style="white-space: pre-line">{{ currentMission.description }}</div>
					</el-descriptions-item>
					<el-descriptions-item label="航线规划">
						<div
							style="height: 300px; background: #f5f5f5; display: flex; align-items: center; justify-content: center">
							<h3>航线地图预览</h3>
						</div>
					</el-descriptions-item>
				</el-descriptions>

				<div v-if="currentMission.status === 'progress'" class="real-time-data">
					<h3 style="margin: 20px 0 10px">实时数据</h3>
					<el-row :gutter="20">
						<el-col :span="8">
							<el-card shadow="hover">
								<div slot="header" class="card-header">
									<span>无人机状态</span>
								</div>
								<div class="card-content">
									<div v-for="drone in currentMission.drones" :key="drone.id" class="drone-status">
										<div class="status-item">
											<span class="label">{{ drone.name }}:</span>
											<el-tag :type="drone.status === 'online' ? 'success' : 'danger'" size="small">
												{{ drone.status === 'online' ? '在线' : '离线' }}
											</el-tag>
										</div>
										<div class="status-item">
											<span class="label">电量:</span>
											<el-progress
												:percentage="drone.battery"
												:color="batteryColor(drone.battery)"
												:show-text="false"
												:stroke-width="12"
												style="width: 80px"
											/>
											<span class="value">{{ drone.battery }}%</span>
										</div>
									</div>
								</div>
							</el-card>
						</el-col>
						<el-col :span="8">
							<el-card shadow="hover">
								<div slot="header" class="card-header">
									<span>任务进度</span>
								</div>
								<div class="card-content">
									<el-progress
										:percentage="missionProgress"
										:stroke-width="16"
										:text-inside="true"
									/>
									<div class="progress-detail">
										<div>已完成航点: 12/24</div>
										<div>预计剩余时间: 32分钟</div>
									</div>
								</div>
							</el-card>
						</el-col>
						<el-col :span="8">
							<el-card shadow="hover">
								<div slot="header" class="card-header">
									<span>实时画面</span>
								</div>
								<div class="card-content" style="text-align: center">
									<div
										style="height: 160px; background: #000; display: flex; align-items: center; justify-content: center">
										<span style="color: #fff">视频直播画面</span>
									</div>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
	Plus,
	Close,
	Search,
	View,
	VideoPlay,
	MapLocation
} from '@element-plus/icons-vue'

// 状态映射
const statusMap = {
	pending: '待执行',
	progress: '进行中',
	completed: '已完成',
	cancelled: '已取消',
	failed: '失败'
}

const statusTagMap = {
	pending: 'warning',
	progress: 'primary',
	completed: 'success',
	cancelled: 'info',
	failed: 'danger'
}

const typeMap = {
	patrol: '巡检',
	mapping: '测绘',
	emergency: '应急',
	transport: '运输'
}

const typeTagMap = {
	patrol: '',
	mapping: 'success',
	emergency: 'danger',
	transport: 'info'
}

const statusOptions = [
	{ value: 'pending', label: '待执行' },
	{ value: 'progress', label: '进行中' },
	{ value: 'completed', label: '已完成' },
	{ value: 'cancelled', label: '已取消' },
	{ value: 'failed', label: '失败' }
]

const typeOptions = [
	{ value: 'patrol', label: '巡检' },
	{ value: 'mapping', label: '测绘' },
	{ value: 'emergency', label: '应急' },
	{ value: 'transport', label: '运输' }
]

// 电池颜色
const batteryColor = (percentage) => {
	if (percentage > 70) return '#67C23A'
	if (percentage > 30) return '#E6A23C'
	return '#F56C6C'
}

// 列表相关
const listLoading = ref(false)
const missionList = ref([])
const total = ref(0)
const selectedIds = ref([])

const listQuery = reactive({
	page: 1,
	limit: 10,
	keyword: '',
	status: '',
	dateRange: []
})

// 无人机选项（模拟数据）
const droneOptions = ref([
	{ id: 1, name: '巡检无人机1号', model: 'DJI Mavic 3' },
	{ id: 2, name: '测绘无人机A', model: 'DJI Phantom 4 RTK' },
	{ id: 3, name: '应急无人机', model: 'DJI Matrice 300' }
])

// 表单相关
const dialogVisible = ref(false)
const detailVisible = ref(false)
const showRouteMap = ref(false)
const dialogType = ref('add')
const currentMission = ref(null)
const missionProgress = ref(45) // 模拟进度

const missionForm = reactive({
	id: '',
	name: '',
	type: 'patrol',
	drones: [],
	timeRange: [],
	description: '',
	route: null
})

const missionRules = reactive({
	name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
	type: [{ required: true, message: '请选择任务类型', trigger: 'change' }],
	drones: [{ required: true, message: '请选择至少一架无人机', trigger: 'change' }],
	timeRange: [{ required: true, message: '请选择任务时间', trigger: 'change' }]
})

// 获取任务列表
const fetchMissions = async () => {
	listLoading.value = true
	try {
		// 这里替换为实际API调用
		// const res = await getMissionList(listQuery)
		// 模拟数据
		setTimeout(() => {
			missionList.value = [
				{
					id: 1,
					name: '园区安全巡检',
					type: 'patrol',
					status: 'pending',
					drones: [
						{ id: 1, name: '巡检无人机1号', model: 'DJI Mavic 3', status: 'online', battery: 85 },
						{ id: 3, name: '应急无人机', model: 'DJI Matrice 300', status: 'online', battery: 90 }
					],
					startTime: '2023-05-20 09:00:00',
					endTime: '2023-05-20 11:00:00',
					description: '每日例行园区安全巡检，重点检查围墙和屋顶区域'
				},
				{
					id: 2,
					name: '建筑工地测绘',
					type: 'mapping',
					status: 'progress',
					drones: [
						{ id: 2, name: '测绘无人机A', model: 'DJI Phantom 4 RTK', status: 'online', battery: 65 }
					],
					startTime: '2023-05-19 14:00:00',
					endTime: '2023-05-19 16:30:00',
					description: '新建筑工地三维建模测绘'
				},
				{
					id: 3,
					name: '紧急物资运输',
					type: 'emergency',
					status: 'completed',
					drones: [
						{ id: 3, name: '应急无人机', model: 'DJI Matrice 300', status: 'offline', battery: 25 }
					],
					startTime: '2023-05-18 10:15:00',
					endTime: '2023-05-18 11:30:00',
					description: '向山区运送紧急医疗物资'
				}
			].slice(
				(listQuery.page - 1) * listQuery.limit,
				listQuery.page * listQuery.limit
			)
			total.value = 3
			listLoading.value = false
		}, 500)
	} catch (error) {
		console.error(error)
		listLoading.value = false
	}
}

// 表格选择
const handleSelectionChange = (selection) => {
	selectedIds.value = selection.map((item) => item.id)
}

// 筛选
const handleFilter = () => {
	listQuery.page = 1
	fetchMissions()
}

// 分页
const handleSizeChange = (val) => {
	listQuery.limit = val
	fetchMissions()
}

const handleCurrentChange = (val) => {
	listQuery.page = val
	fetchMissions()
}

// 创建任务
const handleCreate = () => {
	dialogType.value = 'add'
	Object.assign(missionForm, {
		id: '',
		name: '',
		type: 'patrol',
		drones: [],
		timeRange: [],
		description: '',
		route: null
	})
	dialogVisible.value = true
}

// 查看详情
const handleDetail = (row) => {
	currentMission.value = row
	detailVisible.value = true
}

// 执行任务
const handleExecute = (row) => {
	ElMessageBox.confirm(`确认开始执行任务 "${row.name}"?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消'
	}).then(() => {
		// 这里替换为实际API调用
		// await executeMission(row.id)
		ElMessage.success('任务已开始执行')
		fetchMissions()
	}).catch(() => {
	})
}

// 取消任务
const handleCancel = (row) => {
	ElMessageBox.confirm(
		`确认${row.status === 'progress' ? '终止' : '取消'}任务 "${row.name}"?`,
		'警告',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning'
		}
	).then(() => {
		// 这里替换为实际API调用
		// await cancelMission(row.id)
		ElMessage.success(`任务已${row.status === 'progress' ? '终止' : '取消'}`)
		fetchMissions()
	}).catch(() => {
	})
}

// 批量取消
const handleBatchCancel = () => {
	ElMessageBox.confirm(
		`确认取消选中的 ${selectedIds.value.length} 个任务?`,
		'警告',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning'
		}
	).then(() => {
		// 这里替换为实际API调用
		// await batchCancelMissions(selectedIds.value)
		ElMessage.success('取消成功')
		selectedIds.value = []
		fetchMissions()
	}).catch(() => {
	})
}

// 保存航线
const saveRoute = () => {
	// 这里应该是从地图组件获取航线数据
	missionForm.route = {
		points: [
			{ lat: 39.9042, lng: 116.4074 },
			{ lat: 39.9082, lng: 116.4074 },
			{ lat: 39.9082, lng: 116.4174 },
			{ lat: 39.9042, lng: 116.4174 }
		],
		distance: '2.5km',
		estimatedTime: '15分钟'
	}
	showRouteMap.value = false
	ElMessage.success('航线已保存')
}

// 确认表单
const confirmMission = () => {
	// 这里替换为实际表单验证和API调用
	ElMessage.success(
		dialogType.value === 'add' ? '创建成功' : '更新成功'
	)
	dialogVisible.value = false
	fetchMissions()
}

onMounted(() => {
	fetchMissions()
})
</script>

<style scoped lang="scss">
.mission-management {
	padding: 20px;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.filter-container {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}

.pagination-container {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}

.route-preview {
	margin-top: 10px;
	padding: 10px;
	background: #f5f7fa;
	border-radius: 4px;
}

.mission-detail {
	padding: 20px;

	.drone-status {
		margin-bottom: 10px;

		.status-item {
			display: flex;
			align-items: center;
			margin-bottom: 5px;

			.label {
				width: 80px;
				color: #909399;
			}

			.value {
				margin-left: 10px;
			}
		}
	}

	.progress-detail {
		margin-top: 10px;
		color: #606266;
		font-size: 13px;

		div {
			margin-bottom: 5px;
		}
	}
}

.card-header {
	font-weight: bold;
}

.card-content {
	padding: 10px;
}
</style>
