<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="goodsType" label="型号" fixed="left" min-width="120px" />
                        <el-table-column prop="specification" label="规格" min-width="120px" />
                        <el-table-column prop="taskGroup" label="任务单号" min-width="120px" />
                        <el-table-column prop="batchNo" 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="origin" label="起始位置" min-width="120px" />
                        <el-table-column prop="destination" 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="goodsType">
                                    <el-input v-model="taskOutRequestEntity.goodsType" clearable placeholder="此处输入型号" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="规格" prop="specification">
                                    <el-input v-model="taskOutRequestEntity.specification" clearable
                                        placeholder="此处输入规格" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="16">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="数量" prop="quantity">
                                    <el-input-number v-model.number="taskOutRequestEntity.quantity"
                                        controls-position="right" :min="0" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="任务单号" prop="taskId">
                                    <el-input v-model="taskOutRequestEntity.taskId" clearable placeholder="此处输入任务单号" />
                                </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>
            </div>
        </el-container>
    </el-config-provider>
</template>

<script setup>
import store from '@/store'
import { sendGoodsOutTask, getTasks } from '@/api/task'
import { taskStatusFormatter, dueFormatter, timeFormatter } from '@/utils/formatter.js'
import { genTaskId } from '@/utils/stringUtils'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const taskOutRequestRef = ref()
const rules = reactive({
    goodsType: [
        { required: true, message: '请输入型号' }
    ],
    specification: [
        { required: true, message: '请输入规格' }
    ],
    quantity: [
        { required: true, message: '请输入数量' },
        { type: 'number', message: '请输入数字' }
    ]
})
</script>

<script>
export default {
    name: 'goodsOut',
    data() {
        return {
            timer: '',
            tasks: [],
            pageInfo: {},
            currentPage: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            labelPosition: 'top',
            taskOutRequestEntity: {
                goodsType: '',
                specification: '',
                quantity: 0,
                taskId: '',
                userName: store.getters.getUserName,
            }
        }
    },
    mounted() {
        this.timer = setInterval(() => {
            this.getAllTasks()
        }, 2000)
    },
    beforeUnmount() {
        clearInterval(this.timer)
    },
    methods: {
        getAllTasks() {
            this.pageInfo.pageNum = this.currentPage
            this.pageInfo.pageSize = this.pageSize
            const tableRequest = {
                page: this.pageInfo,
                param: {
                    taskType: 2,
                    userName: store.getters.getUserName
                }
            }
            getTasks(tableRequest).then(res => {
                const tableResponse = res.data
                if (tableResponse.code != 0) {
                    ElMessage.error(tableResponse.message)
                }
                this.tasks = tableResponse.rows
                this.total = tableResponse.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.quantity <= 0) {
                    ElMessage({
                        message: '数量必须要大于0的数字',
                        type: 'error',
                    })
                    return
                }
                const outParams = {
                    taskId: formData.taskId == '' ? genTaskId('') : formData.taskId,
                    taskType: 2,
                    detailTaskInfoList: [
                        {
                            goodsType: formData.goodsType,
                            specification: formData.specification,
                            quantity: formData.quantity
                        }
                    ]
                }
                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('创建出库任务错误！')
                })
            })
        }
    }
}
</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: 632px;
    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>