
<template>
    <div style="margin-bottom: 15px">
        <el-config-provider :locale="zhCn">
            <el-row>
                <el-input v-model="goodsIdQuery" style="width: 256px; margin-right: 10px;" placeholder="零件号" />
                <el-input v-model="vehicleNoQuery" style="width: 256px; margin-right: 10px;" placeholder="箱号" />
                <el-button type="primary" @click="search()">搜索</el-button>
                <el-button type="warning" @click="reset()">重置</el-button>
                <el-button type="success" @click="search()">刷新</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="goodsId" label="零件号" fixed="left" min-width="120px" />
                <el-table-column prop="vehicleNo" label="箱号" fixed="left" min-width="120px" />
                <el-table-column prop="goodsName" label="零件名称" min-width="120px" />
                <el-table-column prop="taskType" label="任务类型" :formatter="taskTypeFormat" min-width="120px" />
                <el-table-column prop="taskGroup" label="任务组" min-width="120px" />
                <el-table-column prop="origin" label="起点" min-width="120px" />
                <el-table-column prop="destination" label="终点" min-width="120px" />
                <el-table-column prop="pickStand" label="拣选站台" min-width="120px" />
                <el-table-column prop="weight" label="重量" min-width="120px" />
                <el-table-column prop="productionDate" label="生产日期" :formatter="dateFormat" min-width="120px" />
                <el-table-column prop="expirationDate" label="有效日期" :formatter="dateFormat" min-width="120px" />
                <el-table-column prop="operateNum" label="操作数量" min-width="120px" />
                <el-table-column prop="totalNum" label="库存数量" min-width="120px" />
                <el-table-column prop="taskPriority" label="任务优先级" min-width="120px" />
                <el-table-column prop="kateTaskId" label="配件任务号" min-width="140px" />
                <el-table-column prop="createTime" label="创建时间" :formatter="timeFormat" min-width="120px" />
                <el-table-column prop="createTime" label="运行时长" :formatter="dueFormat" min-width="120px" />
                <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="vehicleNo">
                                <el-input v-model="taskFormEntity.vehicleNo" 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-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 { getTasks, changeTaskStatus } from '@/api/task.js'
import { getAvailableLocations } from '@/api/location.js'
import { dateFormatter, locationFormatter, taskStatusFormatter, timeFormatter, dueFormatter } from '@/utils/formatter.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { ElMessage } from 'element-plus'
import store from '@/store'
import { ref, reactive } from 'vue'
</script>
<script>
export default {
    name: 'taskMonitor',
    data() {
        return {
            pageInfo: {},
            tasks: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            goodsIdQuery: '',
            vehicleNoQuery: '',
            loading: true,
            dialogVisible: false,
            taskFormEntity: reactive({}),
            labelPosition: 'top',
            taskFormRef: ref(),
            rules: reactive({}),
            taskId: '',
            taskTypeOptions: [
                {
                    value: 1,
                    label: '入库'
                },
                {
                    value: 2,
                    label: '出库'
                },
                {
                    value: 3,
                    label: '盘点'
                },
            ],
            taskStatusOptions: [
                {
                    value: 0,
                    label: '任务重置'
                },
                {
                    value: 1,
                    label: '任务取消'
                },
                {
                    value: 2,
                    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:
                    if (row.taskId.substr(0, 2) == 'HK') {
                        return '回库'
                    } else {
                        return '入库'
                    }
                case 2: return '出库'
                case 3: return '盘点'
                default: return '未知'
            }
        },
        dueFormat: (row, column, cellValue, index) => {
            return dueFormatter(cellValue)
        },
        search() {
            this.loading = true
            this.pageInfo.pageNum = this.currentPage
            this.pageInfo.pageSize = this.pageSize
            const tableRequest = {
                page: this.pageInfo,
                param: {
                    goodsId: this.goodsIdQuery.trim(),
                    vehicleNo: this.vehicleNoQuery.trim(),
                    userName: store.getters.getUserName
                }
            }
            getTasks(tableRequest).then(res => {
                const tableResponse = res.data
                if (tableResponse.code != 0) {
                    console.log(tableResponse.code + ':' + tableResponse.message)
                    ElMessage.error(tableResponse.message)
                }
                this.tasks = tableResponse.rows
                this.total = tableResponse.total
            }).catch(err => {
                console.log(err)
                ElMessage.error('查询任务错误')
            })
            this.loading = false
        },
        reset() {
            this.goodsIdQuery = ''
            this.vehicleNoQuery = ''
        },
        editCurrentRowTask(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 => {
                    ElMessage.error('查找可用库位失败:' + err)
                })
            }
            this.taskFormEntity.taskId = row.taskId
            this.taskFormEntity.vehicleNo = row.vehicleNo
            this.taskFormEntity.goodsId = row.goodsId
            this.taskFormEntity.origin = row.origin
            this.taskFormEntity.destination = row.destination
            this.taskFormEntity.taskType = row.taskType
            this.taskFormEntity.taskStatus = null
            this.dialogVisible = true
        },
        submitTaskInfo(formData) {
            if (formData.taskStatus == null || formData.taskStatus == undefined) {
                ElMessage.error('请选择任务状态')
                return
            }
            formData.userName = store.getters.getUserName
            changeTaskStatus(formData).then(res => {
                if (res.data.code == 0) {
                    this.dialogVisible = false
                    ElMessage({
                        message: '更新任务状态成功',
                        type: 'success',
                    })
                    this.taskFormEntity.taskId = ''
                    this.taskFormEntity.vehicleNo = ''
                    this.taskFormEntity.goodsId = ''
                    this.taskFormEntity.origin = ''
                    this.taskFormEntity.destination = ''
                    this.taskFormEntity.taskType = null
                    this.taskFormEntity.taskStatus = null
                    this.search()
                } else {
                    ElMessage.error(res.data.message)
                }
            }).catch(err => {
                ElMessage.error('更新任务状态失败:' + err)
            })
        },
        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>