<template>
    <el-config-provider :locale="zhCn">
        <el-container class="content">
            <div class="left">
                <fieldset class="display-area">
                    <legend>
                        当前WMS出库任务
                    </legend>
                    <!-- 此表格现在显示当前当前站台正在执行的出库任务 -->
                    <el-table :data="tasks" stripe border class="table-class" max-height="250px"
                        :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                        <el-table-column prop="goodsRelated.goodsId" label="物料编号" fixed="left" min-width="120px" />
                        <el-table-column prop="vehicleId" label="载具号" min-width="120px" />
                        <el-table-column prop="goodsRelated.originNum" label="库存数量" min-width="120px" />
                        <el-table-column prop="goodsRelated.opNum" 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="isPicking" label="是否拣选" min-width="120px" />
                        <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="taskStatus" label="任务状态" fixed="right" :formatter="taskStatusFormat"
                            min-width="120px" />
                    </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" @size-change="getAllTasks" @current-change="getAllTasks"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" />
                </fieldset>
            </div>
            <div class="right">
                <fieldset class="input-area-up">
                    <legend>出库输入信息</legend>
                    <el-form ref="taskOutRequestRef" :model="taskOutRequestEntity" :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="vehicleId">
                                    <el-input v-model="taskOutRequestEntity.vehicleId" clearable
                                        placeholder="此处输入载具号" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="物料编号" prop="goodsId">
                                    <el-input v-model="taskOutRequestEntity.goodsId" clearable placeholder="此处输入物料编号" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="16">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="数量" prop="goodsNum">
                                    <el-input-number v-model.number="taskOutRequestEntity.goodsNum"
                                        controls-position="right" :min="0" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="起始库位" prop="originPoint">
                                    <el-input v-model="taskOutRequestEntity.originPoint" clearable
                                        placeholder="此处输入起始库位，格式为A-01-01-01" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="16">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="是否拣选" prop="isPicking">
                                    <el-select-v2 v-model="taskOutRequestEntity.isPicking" placeholder="请选择是否拣选"
                                        :options="pickOptions"></el-select-v2>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="出库站台" prop="destinationPoint">
                                    <el-select-v2 v-model="taskOutRequestEntity.destinationPoint" placeholder="请选择出库站台"
                                        :options="destinationPointOptions"></el-select-v2>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="16" class="btn-area">
                            <el-col :span="8" :offset="8">
                                <el-form-item>
                                    <el-button type="success" round
                                        @click="submitGoodsOutTask(taskOutRequestRef, taskOutRequestEntity)">下发任务</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </fieldset>
                <fieldset class="input-area-down" style="margin-top: 15px;">
                    <legend>拣选确认信息</legend>
                    <el-form ref="pickConfirmRef" :model="pickConfirmEntity" :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="vehicleId">
                                    <el-input v-model="pickConfirmEntity.vehicleId" disabled />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="物料编号" prop="goodsId">
                                    <el-input v-model="pickConfirmEntity.goodsId" disabled />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="16">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="库存数量" prop="originNum">
                                    <el-input-number v-model.number="pickConfirmEntity.originNum" clearable
                                        controls-position="right" :min="0" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="拣选数量" prop="opNum">
                                    <el-input-number v-model.number="pickConfirmEntity.opNum" clearable
                                        controls-position="right" :min="0" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="16" class="btn-area">
                            <el-col :span="8" :offset="8">
                                <el-form-item>
                                    <el-button type="success" round
                                        @click="confirmTask(pickConfirmRef, pickConfirmEntity)">确认完回库</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </fieldset>
            </div>
        </el-container>
    </el-config-provider>
</template>

<script setup>
import store from '@/store'
import { sendGoodsOutTask, getTasksByPage, getTasks, finishPickingAndBack } from '@/api/task'
import { taskStatusFormatter, dueFormatter, timeFormatter } from '@/utils/formatter.js'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const taskOutRequestRef = ref()
const pickConfirmRef = ref()
const rules = reactive({
    destinationPointOptions: [
        { required: true, message: '请选择出库站台' }
    ]
})
</script>

<script>
export default {
    name: 'goodsOut',
    data() {
        return {
            timer: '',
            tasks: [],
            pageInfo: {},
            currentPage: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            labelPosition: 'top',
            taskOutRequestEntity: {
                vehicleId: '',
                goodsId: '',
                goodsNum: 0,
                originPoint: '',
                isPicking: 0,
                destinationPoint: '',
                userName: store.getters.getUserName,
            },
            pickConfirmEntity: {
                taskId: '',
                vehicleId: '',
                goodsId: '',
                opNum: 0,
                originNum: 0,
                userName: store.getters.getUserName,
            },
            destinationPointOptions: [
                {
                    value: "RC1",
                    label: '入库口'
                },
                {
                    value: "P1",
                    label: '拣选台'
                }
            ],
            pickOptions: [
                {
                    value: 0,
                    label: '非拣选任务'
                },
                {
                    value: 1,
                    label: '拣选任务'
                }
            ],
        }
    },
    mounted() {
        this.timer = setInterval(() => {
            this.getAllTasks()
        }, 2000)
    },
    beforeUnmount() {
        clearInterval(this.timer)
    },
    methods: {
        getAllTasks() {
            const request = {
                pageNo: this.currentPage,
                pageSize: this.pageSize,
                taskType: 2
            }
            getTasksByPage(request).then(res => {
                const tableResponse = res.data
                if (tableResponse.code != 0) {
                    ElMessage.error(tableResponse.message)
                }
                this.tasks = tableResponse.returnData.lists
                this.total = tableResponse.returnData.total
            }).catch(err => {
                console.log(err)
                ElMessage.error('查询任务错误')
            })
        },
        // 任务状态中文化
        taskStatusFormat: (row, column, cellValue, index) => {
            return taskStatusFormatter(cellValue)
        },
        // 任务时长中文化
        dueFormat: (row, column, cellValue, index) => {
            return dueFormatter(cellValue)
        },
        // 时间格式化
        timeFormat: (row, column, cellValue, index) => {
            return timeFormatter(cellValue)
        },
        submitGoodsOutTask(formEl, formData) {
            if (!formEl) return
            formEl.validate((valid) => {
                if (!valid) {
                    ElMessage({
                        message: '请输入必须的出库信息！',
                        type: 'warning',
                    })
                    return
                }
                if (formData.vehicleId == '' || formData.goodsId == '' || formData.originPoint == '') {
                    ElMessage({
                        message: '载具号、物料号、起始库位号必须至少输入一个',
                        type: 'error',
                    })
                    return
                }
                if (formData.goodsNum <= 0) {
                    ElMessage({
                        message: '数量必须要大于0的数字',
                        type: 'error',
                    })
                    return
                }
                if ((formData.isPicking == 1 && formData.destinationPoint != 'P1')) {
                    ElMessage({
                        message: '拣选任务必须选拣选站台',
                        type: 'error',
                    })
                    return
                }
                if (formData.isPicking == 0 && formData.destinationPoint == 'P1') {
                    ElMessage({
                        message: '非拣选任务不得选拣选站台',
                        type: 'error',
                    })
                    return
                }
                const outParams = {
                    goodsId: formData.goodsId,
                    goodsNum: formData.goodsNum,
                    vehicleId: formData.vehicleId,
                    originPoint: formData.originPoint,
                    destinationPoint: formData.destinationPoint,
                    userName: store.getters.getUserName,
                    isPicking: formData.isPicking,
                    pickStand: formData.destinationPoint
                }
                sendGoodsOutTask(outParams).then(res => {
                    if (res.data.code == 0) {
                        ElMessage({
                            message: '创建出库任务成功！',
                            type: 'success',
                        })
                        formEl.resetFields()
                    } else {
                        ElMessage.error(res.data.message)
                    }
                }).catch(err => {
                    console.log(err)
                    ElMessage.error('创建出库任务错误！')
                })
            })
        },
        getPickTaskDetails() {
            const request = {
                taskType: 2,
                isPicking: 1,
                taskStatus: 8
            }
            getTasks(request).then(res1 => {
                if (res1.data.code == 0) {
                    if (res1.data.returnData.length > 0) {
                        const currentFinishTask = res1.data.returnData[0];
                        if (currentFinishTask.taskId == this.pickConfirmEntity.taskId) {// 信息没更新
                            return
                        }
                        this.pickConfirmEntity.taskId = currentFinishTask.taskId
                        this.pickConfirmEntity.goodsId = currentFinishTask.goodsRelated.goodsId
                        this.pickConfirmEntity.vehicleId = currentFinishTask.vehicleId
                        this.pickConfirmEntity.opNum = currentFinishTask.goodsRelated.opNum
                        this.pickConfirmEntity.originNum = currentFinishTask.goodsRelated.originNum

                    } else {
                        this.pickConfirmEntity.taskId = ''
                        this.pickConfirmEntity.goodsId = ''
                        this.pickConfirmEntity.vehicleId = ''
                        this.pickConfirmEntity.opNum = 0
                        this.pickConfirmEntity.originNum = 0
                    }
                }
            }).catch(err => {
                ElMessage.error('查询任务错误')
            })
        },
        confirmTask(formEl, formData) {
            if (!formEl) return
            formEl.validate((valid) => {
                if (!valid) {
                    ElMessage({
                        message: '确认信息验证失败',
                        type: 'warning',
                    })
                    return
                }
                if (formData.taskId = '' || formData.vehicleId == '' || formData.goodsId == '') {
                    ElMessage({
                        message: '载具号、物料号、任务号不可缺少',
                        type: 'error',
                    })
                    return
                }
                const confirmParams = {
                    taskId: formData.taskId,
                    vehicleId: formData.vehicleId,
                    goodsId: formData.goodsId,
                    opNum: formData.opNum,
                    originNum: formData.originNum,
                    userName: formData.userName
                }
                finishPickingAndBack(confirmParams).then(res => {
                    if (res.data.code == 0) {
                        ElMessage({
                            message: '确认成功！',
                            type: 'success',
                        })
                        formEl.resetFields()
                    } else {
                        ElMessage.error(res.data.message)
                    }
                }).catch(err => {
                    ElMessage.error('创建出库任务错误！')
                })
            })
        }
    }
}
</script>

<style scoped>
.content {
    display: flex;
    width: 100%;
}

.el-row .el-form-item {
    width: 30% inherit;
    justify-content: center;
}

.btn-area .el-form-item {
    width: 30% inherit;
    padding-left: 15px;
}

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

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

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

.el-row .el-form-item .el-button {
    margin: auto;
}

.right {
    width: 40%;
    padding: 5px;
}

.left {
    width: 60%;
    padding: 5px;
}

.input-area-up {
    margin: auto;
    max-width: inherit;
    height: 300px;
    border: solid 1px;
    border-radius: 10px;
    box-shadow: 0px 15px 10px -15px #000;
}

.input-area-down {
    margin: auto;
    max-width: inherit;
    height: 300px;
    border: solid 1px;
    border-radius: 10px;
    box-shadow: 0px 15px 10px -15px #000;
}

.display-area {
    margin: auto;
    min-width: inherit;
    height: 632px;
    border: solid 1px;
    border-radius: 10px;
    box-shadow: 0px 15px 10px -15px #000;
}

.table-class {
    width: 100%;
}

.qr-code-container {
    width: 80px;
    height: 80px;
    margin: 20px;
}

.card-box {
    display: flex;
    align-items: center;
}

.text-over {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 130px;
}

.objectDialogFlowPrint .myPrint {
    /* 打印的时候是否显示底色 */
    print-color-adjust: exact;
}

.objectDialogFlowPrint .pageWarp {
    /*这句话很重要，控制时候强制分页 https://www.w3school.com.cn/cssref/pr_page-break-after.asp*/
    page-break-after: always;
    height: 100%;
    width: 100%;
    text-align: center;
    margin: 5px auto;
    padding: auto;
}
</style>