<template>
    <el-config-provider :locale="zhCn">
        <el-container class="content">
            <div class="work-area">
                <fieldset class="search-area">
                    <el-form ref="outTaskRef" :model="outTaskEntity" :label-position="labelPosition" label-width="158px"
                        style="max-width: 100%" :rules="requestRules" status-icon>
                        <div style="display: flex; justify-content: space-between;">
                            <el-row>
                                <el-form-item label="出库类型" prop="outType">
                                    <el-select-v2 v-model="outTaskEntity.outType" placeholder="请选择入库类型"
                                        :options="outTypeOptions"></el-select-v2>
                                </el-form-item>
                                <el-form-item label="料号" prop="goodsId">
                                    <el-input v-model="outTaskEntity.goodsId" ref="goodsId" clearable />
                                </el-form-item>
                                <el-form-item label="箱号" prop="vehicleId">
                                    <el-input v-model="outTaskEntity.vehicleId" ref="vehicleId" clearable />
                                </el-form-item>
                                <el-form-item label="数量" prop="needNum">
                                    <el-input-number v-model.number="outTaskEntity.needNum" ref="needNum"
                                        controls-position="right" :min="1" clearable />
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-button type="primary"
                                    style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                                    @click="confirmOut()">确认出库</el-button>
                                <el-button type="warning"
                                    style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                                    @click="clearInput()">清除输入</el-button>
                            </el-row>
                        </div>
                    </el-form>
                </fieldset>
                <fieldset class="confirm-area">
                    <el-form ref="confirmRef" :model="confirmEntity" :label-position="labelPosition" label-width="158px"
                        style="max-width: 100%" :rules="confirmRules" status-icon>
                        <div style="display: flex; justify-content: space-between;">
                            <el-row>
                                <el-row style="border-bottom: dashed 1px black;">
                                    <el-form-item label="出库类型" prop="outType">
                                        <el-select-v2 v-model="confirmEntity.outType" placeholder=" "
                                            :options="outTypeOptions" disabled></el-select-v2>
                                    </el-form-item>
                                    <el-form-item label="物料号" prop="goodsId">
                                        <el-input v-model="confirmEntity.goodsId" disabled />
                                    </el-form-item>
                                    <el-form-item label="总需求" prop="totalNeed">
                                        <el-input v-model="confirmEntity.totalNeed" disabled />
                                    </el-form-item>
                                    <el-form-item label="剩余需求" prop="remainNeed">
                                        <el-input v-model="confirmEntity.remainNeed" disabled />
                                    </el-form-item>
                                    <el-form-item label="本次计划拣选" prop="planPickQty">
                                        <el-input v-model="confirmEntity.planPickQty" disabled />
                                    </el-form-item>
                                    <el-form-item label="本次实际拣选" prop="realPickQty">
                                        <el-input-number v-model.number="confirmEntity.realPickQty"
                                            controls-position="right" :min="0" clearable @change="changePlanQty()" />
                                    </el-form-item>
                                </el-row>
                                <el-row>
                                    <el-form-item label="箱号" prop="vehicleId">
                                        <el-input v-model="confirmEntity.vehicleId" disabled />
                                    </el-form-item>
                                    <el-form-item label="计划剩余数量" prop="planRemainQty">
                                        <el-input v-model="confirmEntity.planRemainQty" disabled />
                                    </el-form-item>
                                    <el-form-item label="实际剩余数量" prop="realRemainQty">
                                        <el-input-number v-model.number="confirmEntity.realRemainQty"
                                            controls-position="right" :min="0" clearable />
                                    </el-form-item>
                                </el-row>
                            </el-row>
                            <el-row>
                                <el-button type="success"
                                    style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                                    @click="confirmOrRelease()">确认/放行</el-button>
                            </el-row>
                        </div>
                    </el-form>
                </fieldset>
            </div>
        </el-container>
    </el-config-provider>
</template>

<script setup>
import store from '@/store'
import { requireStockOut, getCurrentTask, confirmCurrentTask } from '@/api/task.js'
import { errorBox, warningBox } from '@/utils/myMessageBox.js'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { loading } from '@/utils/loading'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script>

<script>
export default {
    name: 'goodsOut',
    data() {
        return {
            standId: store.getters.getStandId,
            userName: store.getters.getUserName,
            timer: '',
            labelPosition: 'top',
            outTaskRef: ref(),
            outTaskEntity: reactive({
                outType: 9,
                goodsId: '',
                vehicleId: '',
                needNum: null
            }),
            requestRules: reactive({
                outType: [
                    { required: true, message: '请选择入库类型' }
                ],
                needNum: [
                    { required: true, message: '请输入数量' },
                    { type: 'number', message: '请输入数字值' }
                ],
            }),
            outTypeOptions: [
                {
                    label: '空箱出库',
                    value: 1
                },
                {
                    label: '紧急出库',
                    value: 9
                }
            ],
            confirmRef: ref(),
            confirmEntity: reactive({}),
            confirmRules: reactive({}),
            pauseGetPickFlag: false,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.timer = setInterval(() => {
                this.getTask()
            }, 1000)
        })
    },
    beforeUnmount() {
        clearInterval(this.timer)
    },
    methods: {
        // 清除输入
        clearInput() {
            this.outTaskEntity = reactive({
                outType: 9,
                goodsId: '',
                vehicleId: '',
                needNum: null
            })
        },
        // 确认出库
        confirmOut() {
            if (this.outTaskEntity.needNum == null) {
                errorBox('请输入正确的数量。')
                return
            }
            if (this.outTaskEntity.outType != 1) {
                if (this.outTaskEntity.goodsId == '') {
                    errorBox('非空箱出库时，请输入料号。')
                    return
                }
            }
            const request = {
                outType: this.outTaskEntity.outType,
                goodsId: this.outTaskEntity.goodsId,
                vehicleId: this.outTaskEntity.vehicleId,
                needNum: this.outTaskEntity.needNum,
                destination: this.standId,
                userName: this.userName,
                standId: this.standId
            }
            loading.open('请求中，请稍等...')
            requireStockOut(request).then(res => {
                const response = res.data
                if (response.code == 0) {
                    // 成功
                    ElMessage.success(response.message)
                    this.clearInput()
                } else {
                    errorBox(response.message)
                }
            }).catch(err => {
                console.log(err)
                errorBox('请求错误。')
            }).finally(() => {
                loading.close()
            })
        },
        // 获取拣选信息
        getTask() {
            if (this.pauseGetPickFlag) {
                return
            }
            const request = {
                standId: this.standId,
                userName: this.userName
            }
            // 获取当前拣选信息
            getCurrentTask(request).then(res => {
                const response = res.data
                if (response.code == 0) {
                    const confirmVo = response.data
                    // 设置form
                    this.confirmEntity = {
                        taskId: confirmVo.taskConfirm.taskId,
                        outType: confirmVo.taskConfirm.outType,
                        goodsId: confirmVo.taskConfirm.goodsId,
                        totalNeed: confirmVo.taskConfirm.totalNeed,
                        remainNeed: confirmVo.taskConfirm.remainNeed,
                        planPickQty: confirmVo.taskConfirm.planPickQty,
                        realPickQty: confirmVo.taskConfirm.realPickQty,
                        stockId: confirmVo.stockConfirm.stockId,
                        vehicleId: confirmVo.stockConfirm.vehicleId,
                        planRemainQty: confirmVo.stockConfirm.planRemainQty,
                        realRemainQty: confirmVo.stockConfirm.realRemainQty,
                        isOut: confirmVo.stockConfirm.isOut,
                        putArea: confirmVo.stockConfirm.putArea,
                        warningQty: confirmVo.stockConfirm.warningQty
                    }
                    this.pauseGetPickFlag = true
                    // 如果剩余数量低于预警值，弹框报警
                    if (this.confirmEntity.isOut == 0 && this.confirmEntity.planRemainQty <= this.confirmEntity.warningQty) {
                        warningBox('剩余数量低于预警值，请清点库存数量。')
                    }
                } else if (response.code == 400) {
                    // 警告，弹框
                    this.pauseGetPickFlag = true
                    warningBox(response.message)
                }
            }).catch(err => {
                console.log(err)
                this.pauseGetPickFlag = true
                errorBox('请求错误，请检查完原因后刷新界面。')
            })
        },
        // 确认/放行
        confirmOrRelease() {
            // 确认放行---与配料工作区分开来
            const request = {
                taskConfirm: {
                    taskId: this.confirmEntity.taskId,
                    outType: this.confirmEntity.outType,
                    goodsId: this.confirmEntity.goodsId,
                    totalNeed: this.confirmEntity.totalNeed,
                    remainNeed: this.confirmEntity.remainNeed,
                    planPickQty: this.confirmEntity.planPickQty,
                    realPickQty: this.confirmEntity.realPickQty,
                },
                stockConfirm: {
                    stockId: this.confirmEntity.stockId,
                    vehicleId: this.confirmEntity.vehicleId,
                    goodsId: this.confirmEntity.goodsId,
                    planRemainQty: this.confirmEntity.planRemainQty,
                    realRemainQty: this.confirmEntity.realRemainQty,
                    isOut: this.confirmEntity.isOut,
                    putArea: this.confirmEntity.putArea,
                },
                standId: this.standId,
                userName: this.userName
            }
            confirmCurrentTask(request).then(res => {
                const response = res.data
                if (response.code == 0) {
                    // 设置form
                    this.confirmEntity = reactive({})
                    this.pauseGetPickFlag = false
                    ElMessage.success(response.message)
                } else if (response.code == 400) {
                    this.pauseGetPickFlag = false
                    warningBox(response.message)
                } else {
                    // 错误，弹框
                    errorBox(response.message)
                }
            }).catch(err => {
                console.log(err)
                errorBox('请求错误，请检查完原因后刷新界面。')
            })
        },
        // 当拣选数量修改时，要对应的修改
        changePlanQty() {
            if (this.confirmEntity.isOut == 0 && this.confirmEntity.realPickQty != this.confirmEntity.planPickQty) {
                // 修正量
                const changeQty = this.confirmEntity.realPickQty - this.confirmEntity.planPickQty
                // 修正实际剩余数量
                this.confirmEntity.realRemainQty = this.confirmEntity.planRemainQty + changeQty
            }
        }
    }
}
</script>

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

.work-area {
    width: 100%;
    /* padding: 5px; */
}

.search-area {
    margin: auto;
    min-height: fit-content;
    max-height: 90%;
    margin-bottom: 10px;
    min-width: inherit;
    border: solid 1px;
    border-radius: 10px;
    box-shadow: 0px 15px 10px -15px #000;
    overflow: auto;
    padding: 10px;
}

.confirm-area {
    margin: auto;
    min-height: fit-content;
    max-height: 90%;
    margin-bottom: 10px;
    min-width: inherit;
    border: solid 1px;
    border-radius: 10px;
    box-shadow: 0px 15px 10px -15px #000;
    overflow: auto;
    padding: 10px;
}

.el-form-item {
    margin: 10px 5px 10px 5px;
}

.el-form-item .el-input {
    width: 196px;
}

.table-class {
    margin: 5px 5px 5px 5px;
    width: inherit;
}
</style>