<template>
    <div class="page-container">
        <div class="left">
            <div class="header">
                <div>任务队列</div>
                <el-button type="primary" @click="addTask">添加任务</el-button>
            </div>
            <div class="taskList-container">
                <div class="task-item" v-for="task in runTaskList">
                    <div class="task-content">
                        <div class="task-title">{{ task.taskName }}</div>
                        <div class="task-actions">
                            <SvgIcon class="icon" v-if="task.status === '1'" name="pause" :size="24" color="#FFB300" @click="pauseTask(task)" />
                            <SvgIcon class="icon" v-if="task.status === '3' || task.status === '5'" name="start" :size="24" color="#00FF88" @click="startTask(task)" />
                            <SvgIcon class="icon" v-if="task.status != '5'" name="stop" :size="24" color="#d81e06" @click="stopTask(task)" />
                            <SvgIcon class="icon" v-if="task.status === '5'" name="remove" :size="24" color="#FFB300" @click="removeTask(task)" />
                        </div>
                    </div>
                    <div class="robot">机器人：{{ task.robotName }}</div>
                    <el-progress :color="customColorMethod" :percentage="60" />
                </div>
            </div>
        </div>
        <div class="right"  ref="topContainerRef">
            <div class="header">
                <div class="label" :class="{ active: activePanel === 'current' }" @click="activePanel = 'current'">当前任务
                </div>
                <div class="label" :class="{ active: activePanel === 'history' }" @click="activePanel = 'history'">历史记录
                </div>
            </div>
            <div>
                <div v-if="activePanel === 'current'">
                    <!-- 当前任务内容 -->
                    <div class="task">
                        <div class="task-header">
                            <div class="task-info">
                                <div class="title">厂区巡检</div>
                                <div class="id">ID: 123456</div>
                            </div>
                            <div>执行中</div>
                        </div>
                        <div class="robot">
                            <div>机器人：xxxx</div>
                            <div>IP: 192.168.1.100</div>
                            <div>开始时间: 2026-06-01 10:00:00</div>
                        </div>
                        <div class="progress-label">执行进度</div>
                        <el-progress :color="customColorMethod" :percentage="60" />
                        <taskSteps />
                        <div class="run-log-container">
                            <div>执行日志</div>
                            <div class="log-container">
                                <div class="log" v-for="value, index in 4">
                                    <div class="time">11:02:06</div>
                                    <div class="context">移动机器人至点位{{ index + 1 }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else-if="activePanel === 'history'">
                    <div :style="containerHeight">
                        <el-table v-loading="loading" height="100%" :data="tableDataList">
                            <el-table-column align="center" label="任务名称" prop="taskName" show-overflow-tooltip />
                            <el-table-column align="center" label="任务状态" prop="status">
                                <template #default="scope">
                                    <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
                                        {{ taskStatusMap[scope.row.status] || '未知状态' }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="任务类型" prop="taskType">
                                <template #default="scope">
                                    <el-tag :type="scope.row.taskType === '1' ? 'primary' : 'success'">
                                        {{ scope.row.taskType === '1' ? '巡检任务' : '讲解任务' }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="机器人" prop="robotName" show-overflow-tooltip />
                            <el-table-column align="center" label="开始时间" prop="startTime">
                                <template #default="scope">
                                    {{ formatDate(scope.row.startTime) }}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="结束时间" prop="endTime">
                                <template #default="scope">
                                    {{ formatDate(scope.row.endTime) }}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" class-name="small-padding fixed-width" label="操作"
                                width="260">
                                <template #default="scope">
                                    <el-button icon="Edit" link type="primary" @click="handleUpdate(scope.row)">
                                        日志
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <pagination v-show="total > 0" v-model:limit="queryParams.pageSize"
                            v-model:page="queryParams.pageNum" :total="total" @pagination="getList" />
                    </div>
                </div>
            </div>
        </div>


        <!-- 添加任务弹窗 -->
        <el-dialog title="添加任务" v-model="open" width="500px" append-to-body>
            <el-form ref="runTaskRef" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="选择任务" prop="taskId">
                    <el-select v-model="form.taskId" placeholder="请选择任务" clearable style="width: 100%">
                        <el-option v-for="task in taskList" :key="task.id" :label="task.taskName" :value="task.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择机器人" prop="robotId">
                    <el-select v-model="form.robotId" placeholder="请选择机器人" clearable style="width: 100%">
                        <el-option v-for="robot in robotList" :key="robot.id" :label="robot.robotName"
                            :value="robot.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="confirmTaskDialog">确 定</el-button>
                    <el-button @click="cancelTaskDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import SvgIcon from "@/components/SvgIcon";
import taskSteps from "./task-steps.vue";
import { useContainerHeight } from "@/hooks/tableHeight";
import { getTaskList } from "@/api/inspection/task";
import { getRobotList } from "@/api/inspection/robot";
import { onMounted } from "vue";
import { addRunTask, getRunTaskList, startRunTask, pauseRunTask, stopRunTask, resumeRunTask, deleteRunTask } from "@/api/inspection/runTask";
import { ElMessage, ElMessageBox } from "element-plus";
import { formatDate } from "@/utils/index";

const topContainerRef = ref();
const containerHeight = useContainerHeight(topContainerRef);

const taskStatusMap = {
    '0': '已完成',
    '1': '执行中',
    '2': '失败',
    '3': '已暂停',
    '4': '已终止',
    '5': '未执行',
}

const form = reactive({
    taskId: null,
    robotId: null,
});

const rules = reactive({
    taskId: [{ required: true, message: '请选择任务', trigger: 'change' }],
    robotId: [{ required: true, message: '请选择机器人', trigger: 'change' }],
});

const taskList = ref([]);
const robotList = ref([]);

const runTaskList = ref([]);

const getTaskData = () => {
    getTaskList({
        pageNum: 1,
        pageSize: 10000,
    }).then((res) => {
        taskList.value = res.rows;
    })
}

const getRobotData = () => {
    getRobotList({
        pageNum: 1,
        pageSize: 10000,
    }).then((res) => {
        robotList.value = res.rows;
    })
}

const open = ref(false);

const addTask = () => {
    open.value = true;
}
const runTaskRef = ref();
const confirmTaskDialog = () => {
    runTaskRef.value.validate((valid) => {
        if (valid) {
            addRunTask(form).then(() => {
                ElMessage.success("任务添加成功");
                getList();
                open.value = false;
                runTaskRef.value.resetFields();
            }).catch(() => {
                ElMessage.error("任务添加失败");
            })
        }
    });
}

const cancelTaskDialog = () => {
    open.value = false;
}

const getList = () => {
    loading.value = true;
    getRunTaskList({
        statusList: ['1', '3', '5'],
    }).then((res) => {
        if (res.code === 200) {
            runTaskList.value = res.rows;
        }
        loading.value = false;
    }).catch(() => {
        loading.value = false;
    });
}

const customColorMethod = (percentage) => {
    if (percentage < 30) {
        return '#6f7ad3'
    }
    if (percentage < 70) {
        return '#1989fa'
    }
    return '#67c23a'
}

const activePanel = ref('current');

const tableDataList = ref([]);
const loading = ref(false);
const total = ref(0);

const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
});

const startTask = async (task) => {
    if (task.status === '3') {
        let res = await resumeRunTask(task.id);
        if (res.code === 200) {
            ElMessage.success("任务已恢复");
            getList();
        }
    } else {
        let res = await startRunTask(task.id);
        if (res.code === 200) {
            ElMessage.success("任务已开始");
            getList();
        }
    }
}

const pauseTask = async (task) => {
    let res = await pauseRunTask(task.id);
    if (res.code === 200) {
        ElMessage.success("任务已暂停");
        getList();
    }
}

const stopTask = async (task) => {
    let res = await stopRunTask(task.id);
    if (res.code === 200) {
        ElMessage.success("任务已停止");
        getList();
    }
}

const removeTask = async (task) => {
    ElMessageBox.confirm('确定要删除该任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        let res = await deleteRunTask(task.id);
        if (res.code === 200) {
            ElMessage.success("任务已删除");
            getList();
        }
    }).catch(() => {
        // 取消删除
    });
}

const getHistoryList = () => {
    loading.value = true;
    getRunTaskList({
        statusList: ['0', '2', '4'],
        pageNum: queryParams.pageNum,
        pageSize: queryParams.pageSize,
    }).then((res) => {
        if (res.code === 200) {
            tableDataList.value = res.rows;
            total.value = res.total;
        }
        loading.value = false;
    }).catch(() => {
        loading.value = false;
    });
}

onMounted(() => {
    getTaskData();
    getRobotData();
    getList();
    getHistoryList();
})
</script>
<style lang="scss" scoped>
.page-container {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 12px;

    .left {
        width: 25%;
        height: 100%;
        background: #fff;
        padding: 16px;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 16px;
            border-bottom: 1px solid #eee;
        }

        .taskList-container {
            margin-top: 16px;
            height: calc(100% - 100px);
            overflow-y: auto;

            .task-item {
                padding: 12px;
                background: #fafafa;
                box-shadow: inset 0 0 0 1px #eee;
                border-radius: 8px;
                margin-bottom: 16px;

                .task-content {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .task-title {
                        font-size: 16px;
                        font-weight: bold;
                    }

                    .task-actions {
                        display: flex;
                        gap: 8px;

                        .icon {
                            cursor: pointer;
                        }
                    }
                }

                .robot {
                    margin-top: 8px;
                    color: #666;
                }
            }
        }
    }

    .right {
        flex: 1;
        padding: 16px;
        background: #fff;
        overflow: hidden;

        .header {
            display: flex;
            margin-bottom: 16px;
            border-bottom: 1px solid #eee;

            .label {
                font-size: 16px;
                font-weight: bold;
                color: #333;
                cursor: pointer;
                box-shadow: inset 0 0 0 1px #eee;
                padding: 10px;
            }

            .active {
                color: #409eff;
                box-shadow: inset 0 0 0 1px #409eff;
            }
        }

        .task {
            padding: 16px;
            background: #fafafa;
            border-radius: 20px;

            .task-header {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .title {
                    font-size: 18px;
                    font-weight: bold;
                }

                .id {
                    color: #666;
                    font-size: 14px;
                    margin: 8px 0;
                }
            }

            .robot {
                display: flex;
                align-items: center;
                gap: 50px;
                color: #666;
                font-size: 14px;
            }

            .progress-label {
                margin-top: 12px;
                color: #666;
                font-size: 14px;
            }

            .run-log-container {
                padding: 16px;

                .log-container {
                    margin-top: 12px;
                    max-height: 150px;
                    overflow-y: auto;
                    background: #fff;
                    border: 1px solid #eee;
                    border-radius: 8px;
                    padding: 12px;

                    .log {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        margin-bottom: 8px;

                        .time {
                            color: #999;
                            font-size: 14px;
                        }

                        .context {
                            color: #333;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}
</style>