<template>
    <div style="margin-bottom: 10px">
        <el-config-provider :locale="zhCn">
            <el-row>
                <el-input v-model="goodsIdQuery" style="width: 196px; margin-right: 10px;" placeholder="料号" />
                <el-input v-model="vehicleIdQuery" style="width: 196px; margin-right: 10px;" placeholder="箱号" />
                <el-select-v2 v-model="taskTypeQuery" style="width: 196px; margin-right: 10px;" placeholder="请选择任务类型"
                    :options="taskTypeOptions" @change="search()"></el-select-v2>
                    <el-select-v2 v-model="taskStatusQuery" style="width: 196px; margin-right: 10px;" placeholder="请选择任务状态"
                    :options="taskStatusOptions" @change="search()"></el-select-v2>
                <el-button type="primary" @click="search()">搜索</el-button>
                <el-button type="warning" @click="reset()">重置</el-button>
            </el-row>
            <br />
            <el-table :data="tasks" stripe border v-loading="loading" style="width: 100%" max-height="684px"
                class="table-class" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
                @row-click="getCurrentRow">
                <el-table-column width="65px" fixed="left">
                    <template v-slot="scope">
                        <el-radio :label="scope.row.taskId" v-model="taskId">&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="taskId" label="任务号" fixed="left" show-overflow-tooltip min-width="120px" />
                <el-table-column prop="taskType" label="任务类型" fixed="left" :formatter="taskTypeFormat" min-width="120px" />
                <el-table-column prop="vehicleId" label="箱号"  min-width="120px" show-overflow-tooltip />
                <el-table-column prop="goodsRelated.goodsId" label="料号" min-width="120px" show-overflow-tooltip />
                <el-table-column prop="goodsRelated.goodsName" label="料名" min-width="120px" show-overflow-tooltip />
                <el-table-column prop="taskGroup" label="任务组" min-width="120px" show-overflow-tooltip />
                <el-table-column prop="origin" label="起点" min-width="120px" />
                <el-table-column prop="destination" label="终点" min-width="120px" />
                <el-table-column prop="goodsRelated.opNum" label="操作数量" min-width="120px" />
                <el-table-column prop="goodsRelated.originNum" label="库存数量" min-width="120px" />
                <el-table-column prop="taskPriority" label="任务优先级" min-width="120px" />
                <el-table-column prop="preTask" label="前置任务" min-width="120px" show-overflow-tooltip />
                <el-table-column prop="createTime" label="创建时间" :formatter="timeFormat" min-width="120px" show-overflow-tooltip />
                <el-table-column prop="createTime" label="运行时长" :formatter="dueFormat" min-width="120px" show-overflow-tooltip />
                <el-table-column prop="userName" label="操作人员姓名" min-width="120px" />
                <el-table-column prop="taskStatus" label="任务状态" fixed="right" :formatter="taskStatusFormat"
                    min-width="120px" />
                <el-table-column fixed="right" label="操作" width="120px">
                    <template v-slot="scope">
                        <el-button plain type="primary" @click="editCurrentRowTask(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br />
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
                :small="false" :disabled="false" :background="false" :default-page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="search"
                @current-change="search" />
            <el-dialog v-model="dialogVisible" title="任务信息" width="40%" draggable :show-close="false">
                <el-form ref="taskFormRef" :model="taskFormEntity" :label-position="labelPosition" label-width="100px"
                    style="max-width: 100%" :rules="rules" status-icon>
                    <el-row :gutter="16">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="任务号" prop="taskId">
                                <el-input v-model="taskFormEntity.taskId" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="任务优先级" prop="taskPriority">
                                <el-input-number v-model.number="taskFormEntity.taskPriority" controls-position="right"
                                    :min="1" :max="9" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="16">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="料箱号" prop="vehicleId">
                                <el-input v-model="taskFormEntity.vehicleId" disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="料号" prop="goodsId">
                                <el-input v-model="taskFormEntity.goodsId" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="16">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="起点" prop="origin">
                                <el-input v-model="taskFormEntity.origin" disabled />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="12" v-if="taskFormEntity.taskType == 1">
                            <el-form-item label="终点" prop="destination">
                                <el-select-v2 v-model="taskFormEntity.destination"
                                    :options="availableLocationOptions"></el-select-v2>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="taskFormEntity.taskType == 2">
                            <el-form-item label="终点" prop="destination">
                                <el-input v-model="taskFormEntity.destination" disabled />
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="12">
                            <el-form-item label="终点" prop="destination">
                                <el-input v-model="taskFormEntity.destination" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="16">
                        <el-col :span="12" :offset="0">
                            <el-form-item label="任务类型" prop="taskType">
                                <el-select-v2 v-model="taskFormEntity.taskType" placeholder="请选择任务类型" disabled
                                    :options="taskTypeOptions"></el-select-v2>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="任务状态" prop="taskStatus">
                                <el-select-v2 v-model="taskFormEntity.taskStatus" placeholder="请选择任务状态"
                                    :options="taskStatusOptions"></el-select-v2>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitTaskInfo(taskFormEntity)">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </el-config-provider>
    </div>
</template>

<script setup>
import { getTasksByPage, updateTaskInfo } from '@/api/task.js'
import { dateFormatter, taskStatusFormatter, timeFormatter, dueFormatter } from '@/utils/formatter.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { errorBox } from '@/utils/myMessageBox.js'
import { ElMessage } from 'element-plus'
import store from '@/store'
import { ref, reactive } from 'vue'
</script>
<script>
export default {
    name: 'taskMonitor',
    data() {
        return {
            tasks: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            goodsIdQuery: '',
            vehicleIdQuery: '',
            taskTypeQuery: -99,
            taskStatusQuery: -99,
            loading: true,
            dialogVisible: false,
            taskFormEntity: reactive({}),
            labelPosition: 'top',
            taskFormRef: ref(),
            rules: reactive({}),
            taskId: '',
            taskTypeOptions: [
                {
                    value: -99,
                    label: '所有类型'
                },
                {
                    value: 1,
                    label: '入库'
                },
                {
                    value: 2,
                    label: '出库'
                },
                {
                    value: 3,
                    label: '盘点'
                },
                {
                    value: 9,
                    label: '移库'
                },
            ],
            taskStatusOptions: [
                {
                    value: -99,
                    label: '所有状态'
                },
                {
                    value: -2,
                    label: '重复入库'
                },
                {
                    value: -1,
                    label: '暂存'
                },
                {
                    value: 0,
                    label: '新建待下发'
                },
                {
                    value: 1,
                    label: '已下发'
                },
                {
                    value: 2,
                    label: '开始执行'
                },
                {
                    value: 8,
                    label: '拣选中'
                },
                {
                    value: 9,
                    label: '盘点中'
                },
                {
                    value: 100,
                    label: '任务完成'
                },
                {
                    value: 998,
                    label: '任务取消'
                },
                {
                    value: 999,
                    label: '任务异常'
                }
            ],
            availableLocationOptions: []
        }
    },
    mounted() {
        this.search()
    },
    methods: {
        dateFormat: (row, column, cellValue, index) => {
            return dateFormatter(cellValue)
        },
        timeFormat: (row, column, cellValue, index) => {
            return timeFormatter(cellValue)
        },
        taskStatusFormat: (row, column, cellValue, index) => {
            return taskStatusFormatter(cellValue)
        },
        taskTypeFormat: (row, column, cellValue, index) => {
            switch (cellValue) {
                case 1: return '入库'
                case 2: return '出库'
                case 3: return '盘点'
                case 9: return '移库'
                default: return '未知'
            }
        },
        dueFormat: (row, column, cellValue, index) => {
            return dueFormatter(cellValue)
        },
        search() {
            this.loading = true
            const tableRequest = {
                pageNo: this.currentPage,
                pageSize: this.pageSize,
                taskType: this.taskTypeQuery == -99 ? null : this.taskTypeQuery,
                taskStatus: this.taskStatusQuery == -99 ? null : this.taskStatusQuery,
                goodsId: this.goodsIdQuery.trim(),
                vehicleId: this.vehicleIdQuery.trim(),
                userName: store.getters.getUserName
            }
            getTasksByPage(tableRequest).then(res => {
                const tableResponse = res.data
                if (tableResponse.code == 0) {
                    this.tasks = tableResponse.returnData.lists
                    this.total = tableResponse.returnData.total
                    console.log(this.tasks)
                } else {
                    errorBox(tableResponse.message)
                }
            }).catch(err => {
                console.log(err)
                errorBox('查询任务错误')
            })
            this.loading = false
        },
        reset() {
            this.goodsIdQuery = ''
            this.vehicleIdQuery = ''
        },
        editCurrentRowTask(row) {
            console.log(row)
            // if (row.taskType == 1) {
            //     this.availableLocationOptions = []
            //     var currentOption = {
            //         value: row.destination,
            //         label: locationFormatter(row.destination)
            //     }
            //     this.availableLocationOptions.push(currentOption)
            //     // 生成可用库位列表
            //     const requestParam = {
            //         areaId: 1
            //     }
            //     getAvailableLocations(requestParam).then(res => {
            //         if (res.data.code == 0) {
            //             for (const location of res.data.returnData) {
            //                 var newOption = {}
            //                 newOption.value = location.locationId
            //                 newOption.label = locationFormatter(location.locationId)
            //                 this.availableLocationOptions.push(newOption)
            //             }
            //         }
            //     }).catch(err => {
            //         errorBox('查找可用库位失败:' + err)
            //     })
            // }
            this.taskFormEntity = {
                taskId: row.taskId,
                taskPriority: row.taskPriority,
                vehicleId: row.vehicleId,
                goodsId: row.goodsRelated == null ? '' : row.goodsRelated.goodsId,
                origin: row.origin,
                destination: row.destination,
                taskType: row.taskType,
                taskStatus: row.taskStatus,
            }
            this.dialogVisible = true
        },
        submitTaskInfo() {
            if (this.taskFormEntity.taskStatus == null || this.taskFormEntity.taskStatus == undefined) {
                errorBox('请选择任务状态')
                return
            }
            const request = {
                taskId: this.taskFormEntity.taskId,
                taskStatus: this.taskFormEntity.taskStatus,
                userName: store.getters.getUserName
            }
            updateTaskInfo(request).then(res => {
                if (res.data.code == 0) {
                    this.dialogVisible = false
                    ElMessage.success('修改任务成功')
                    this.search()
                } else {
                    errorBox(res.data.message)
                }
            }).catch(err => {
                console.log(err)
                errorBox('修改任务失败')
            })
        },
        getCurrentRow(row) {
            this.taskId = row.taskId
        }
    },
}
</script>

<style scoped>
.el-pagination {
    padding-left: 5px;
}

.el-row .el-button {
    width: 72px;
    margin-left: 0px;
    margin-right: 5px;
}

.table-class {
    width: 100%;
}

.el-row .el-form-item .el-select-v2 {
    width: 100% !important;
}

.el-row .el-form-item .el-input-number {
    width: 100% !important;
}

.el-row .el-form-item .el-button {
    margin: auto;
}
</style>