<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="vehicleNo" label="托盘号" fixed="left" min-width="120px" />
                        <el-table-column prop="goodsId" label="物料编码" fixed="left" min-width="120px" />
                        <el-table-column prop="goodsName" label="物料描述" 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="expirationDate" label="有效日期" min-width="120px" />
                        <el-table-column prop="batchNo" label="批次号" min-width="120px" />
                        <el-table-column prop="wipEntityId" label="工单号" min-width="120px" />
                        <el-table-column prop="taskStatus" label="任务状态" fixed="right" :formatter="taskStatusFormat" min-width="120px" />
                        <el-table-column prop="createTime" label="运行时长" :formatter="dueFormat" 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">
                    <legend>盘点下发信息</legend>
                    <el-form ref="inventoryTaskOutRequestRef" :model="inventoryOutEntity" :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="goodsId">
                                    <el-select v-model="inventoryOutEntity.goodsId" :multiple="false" filterable remote
                                        reserve-keyword placeholder="请输入物料编码" :remote-method="queryGoodsId"
                                        :loading="loading">
                                        <el-option v-for="item in goodsOptions" :key="item.goodsId" :label="item.goodsId"
                                            :value="item.goodsId" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="库存数量" prop="totalNum">
                                    <el-input-number v-model.number="inventoryOutEntity.totalNum" readonly
                                        controls-position="right" :min="1" />
                                </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="inventoryOutEntity.vehicleId" clearable placeholder="请输入托盘号" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="出库站台" prop="destination">
                                    <el-select-v2 v-model="inventoryOutEntity.destination" placeholder="请选择盘点站台"
                                        :options="standOptions"></el-select-v2>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="16">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="*盘点前请确认无其他任务正在执行" class="red-character">
                                </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="submitInventoryOutTask()">下发盘点</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </fieldset>
                <fieldset class="input-area" style="margin-top: 15px;">
                    <legend>盘点确认信息</legend>
                    <el-form ref="inventoryTaskConfirmRequestRef" :model="inventoryConfirmEntity"
                        :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="托盘号">
                                    <el-input v-model="inventoryConfirmEntity.vehicleNo" readonly />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="物料编码">
                                    <el-input v-model="inventoryConfirmEntity.goodsId" readonly />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="16">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="盘点前数量">
                                    <el-input v-model="inventoryConfirmEntity.originNum" readonly />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="确认数量" prop="realNum">
                                    <el-input-number v-model.number="inventoryConfirmEntity.realNum" 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="submitInventoryConfirmTask()">确认盘点</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 { sendInventoryTask, finishPicking, getTasks, getTaskByTask } from '@/api/task'
import { queryPartNo } from '@/api/goods'
import { taskStatusFormatter, dueFormatter } 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 inventoryTaskOutRequestRef = ref()
const inventoryTaskConfirmRequestRef = ref()
const rules = reactive({
    goodsId: [
        { required: true, message: '请输入物料编号' }
    ],
    realNum: [
        { required: true, message: '请输入数量' },
        { type: 'number', message: '请输入数字' }
    ],
    destination: [
        { required: true, message: '请选择盘点站台' }
    ]
})
</script>

<script>
export default {
    name: 'inventory',
    data() {
        return {
            timer: '',
            tasks: [],
            pageInfo: {},
            currentPage: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            labelPosition: 'top',
            inventoryOutEntity: {
                goodsId: '',
                totalNum: 0,
                vehicleId: '',
                destination: '',
                userName: store.getters.getUserName
            },
            inventoryConfirmEntity: {
                taskId: '',
                goodsId: '',
                vehicleNo: '',
                originNum: 0,
                realNum: 0,
                userName: store.getters.getUserName
            },
            goodsOptions: [],
            standOptions: [
                {
                    value: 'P1',
                    label: '1号盘点站台'
                },
                {
                    value: 'P2',
                    label: '2号盘点站台'
                },
            ]
        }
    },
    mounted() {
        this.timer = setInterval(() => {
            this.getAllTasks()
            this.getCurrentInventoryInfo()
        }, 2000)
    },
    beforeUnmount() {
        clearInterval(this.timer)
    },
    methods: {
        queryGoodsId(query) {
            const param = { material: query }
            queryPartNo(param).then(res => {
                if (res.data.code == 0) {
                    this.goodsOptions = res.data.returnData
                } else {
                    this.goodsOptions = []
                }
            }).catch(err => {
                this.goodsOptions = []
                ElMessage.error('查询物料信息错误' + err.message)
            })
        },
        getAllTasks() {
            this.pageInfo.pageNum = this.currentPage
            this.pageInfo.pageSize = this.pageSize
            const tableRequest = {
                page: this.pageInfo,
                param: {
                    taskType: 3,
                    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('查询任务错误')
            })
        },
        // 查询当前的拣货信息
        getCurrentInventoryInfo() {
            // 查找可盘点的任务
            const taskQuery1 = {
                taskType: 3,
                taskStatus: 8
            }
            // 先查询当前站台正在拣选的任务
            getTaskByTask(taskQuery1).then(res1 => {
                if (res1.data.code == 0) {
                    const currentFinishTask = res1.data.returnData;
                    if (currentFinishTask != null) {
                        if (currentFinishTask.taskId == this.inventoryConfirmEntity.taskId) {// 信息没更新
                            return
                        }
                        this.inventoryConfirmEntity.taskId = currentFinishTask.taskId
                        this.inventoryConfirmEntity.goodsId = currentFinishTask.goodsId
                        this.inventoryConfirmEntity.vehicleNo = currentFinishTask.vehicleNo
                        this.inventoryConfirmEntity.originNum = currentFinishTask.totalNum
                        this.inventoryConfirmEntity.realNum = currentFinishTask.totalNum
                    } else {
                        this.inventoryConfirmEntity.taskId = ''
                        this.inventoryConfirmEntity.goodsId = ''
                        this.inventoryConfirmEntity.vehicleNo = ''
                        this.inventoryConfirmEntity.originNum = 0
                        this.inventoryConfirmEntity.realNum = 0
                    }
                }
            }).catch(err => {
                console.log(err)
                ElMessage.error('查询任务错误')
            })
        },
        taskStatusFormat: (row, column, cellValue, index) => {
            return taskStatusFormatter(cellValue)
        },
        dueFormat: (row, column, cellValue, index) => {
            return dueFormatter(cellValue)
        },
        submitInventoryOutTask() {
            if (this.tasks.length > 0) {
                ElMessage({
                    message: '当前还有盘点任务未完成',
                    type: 'error',
                })
                return
            }
            sendInventoryTask(this.inventoryOutEntity).then(res => {
                console.log(res)
                if (res.data.code == 0) {
                    this.inventoryOutEntity.totalNum = res.data.returnData.realNum
                    ElMessage({
                        message: '创建盘点出库任务成功！',
                        type: 'success',
                    })
                } else {
                    this.inventoryOutEntity.totalNum = 0
                    ElMessage.error(res.data.message)
                }
            }).catch(err => {
                this.inventoryOutEntity.totalNum = 0
                console.log(err)
                ElMessage.error('创建盘点出库任务错误！')
            })
        },
        submitInventoryConfirmTask() {
            if (this.inventoryConfirmEntity.taskId == null) {
                ElMessage({
                    message: '没有正在盘点的任务，请勿乱点按钮',
                    type: 'error',
                })
                return
            }
            finishPicking(this.inventoryConfirmEntity).then(res => {
                if (res.data.code == 0) {
                    ElMessage({
                        message: '盘点成功，正在回库',
                        type: 'success',
                    })
                    this.inventoryConfirmEntity.taskId = ''
                    this.inventoryConfirmEntity.goodsId = ''
                    this.inventoryConfirmEntity.vehicleNo = ''
                    this.inventoryConfirmEntity.originNum = 0
                    this.inventoryConfirmEntity.realNum = 0
                } else {
                    ElMessage.error(res.data.message)
                }
            }).catch(err => {
                console.log(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 {
    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%;
}

.red-character :deep(.el-form-item__label) {
    color: red;
}
</style>