<template>
    <el-config-provider :locale="zhCn">
        <el-container class="content">
            <div class="left">
                <fieldset class="display-area">
                    <legend>
                        入库暂存信息
                    </legend>
                    <el-table :data="tempTasks" stripe border class="table-class" max-height="684px"
                        :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                        <el-table-column prop="vehicleId" label="载具号" fixed="left" min-width="120px" />
                        <el-table-column prop="goodsId" label="物料编号" fixed="left" min-width="120px" />
                        <el-table-column prop="goodsNum" label="数量" min-width="120px" />
                        <el-table-column prop="goodsName" label="物料名称" min-width="120px" />
                        <el-table-column prop="singleWeight" label="单个物料重量" min-width="120px" />
                        <el-table-column prop="weight" label="物料总重量" min-width="120px" />
                        <el-table-column prop="originPoint" label="入库站点" min-width="120px" />
                        <el-table-column fixed="right" label="操作" width="120px">
                            <template #default>
                                <el-button plain type="primary" @click="deleteRowTask(row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br />
                </fieldset>
            </div>
            <div class="right">
                <fieldset class="input-area">
                    <legend>输入入库信息</legend>
                    <el-form ref="taskInRequestRef" :model="taskInRequestEntity" :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="taskInRequestEntity.vehicleId" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="物料编号" prop="goodsId">
                                    <el-input v-model="taskInRequestEntity.goodsId" :disabled="disabledEmpty"
                                        clearable />
                                </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="taskInRequestEntity.goodsNum" clearable
                                        controls-position="right" :min="1" :disabled="disabledEmpty"
                                        @blur="calWeight(taskInRequestEntity)"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="物料名称" prop="goodsName">
                                    <el-input v-model="taskInRequestEntity.goodsName" :disabled="disabledEmpty"
                                        clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="16">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="单个物料重量" prop="singleWeight">
                                    <el-input-number v-model.number="taskInRequestEntity.singleWeight" clearable
                                        controls-position="right" :min="0" :precision="3" :disabled="disabledEmpty"
                                        @blur="calWeight(taskInRequestEntity)"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="物料总重量" prop="weight">
                                    <el-input-number v-model.number="taskInRequestEntity.weight" clearable
                                        controls-position="right" :min="0" :precision="3"
                                        :disabled="disabledEmpty"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="16">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="入库站点" prop="originPoint">
                                    <el-select-v2 v-model="taskInRequestEntity.originPoint" placeholder="请选择入库站点"
                                        :options="standOptions"></el-select-v2>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="是否空托" prop="isEmpty">
                                    <el-select-v2 v-model="taskInRequestEntity.isEmpty" placeholder="请选择入库类型"
                                        :options="stockTypeOptions"
                                        @change="autoCompleteEmptyInfo(taskInRequestEntity)"></el-select-v2>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="16" class="btn-area">
                            <el-col :span="8" :offset="0">
                                <el-form-item>
                                    <el-button type="primary" round
                                        @click="addTempTasks(taskInRequestRef)">绑定信息</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item>
                                    <el-button type="success" round
                                        @click="submitGoodsInTask(taskInRequestRef)">下发任务</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item>
                                    <el-button type="danger" round @click="resetForm(taskInRequestRef)">清空信息</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </fieldset>
            </div>
        </el-container>
    </el-config-provider>
</template>

<script setup>
import { sendGoodsInTask } from '@/api/task'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import store from '@/store'
const taskInRequestRef = ref()
</script>

<script>
export default {
    name: 'goodsIn',
    data() {
        return {
            labelPosition: "top",
            tempTasks: [],
            tempVehicleId: '',
            tempOriginPoint: '',
            totalWeight: 0,
            isEmptyTask: false,
            disabledEmpty: false,
            taskInRequestEntity: reactive({
                vehicleId: '',
                originPoint: 'RC1',
                goodsId: '',
                goodsName: '',
                singleWeight: 0,
                goodsNum: 1,
                weight: 0,
                isEmpty: '1'
            }),
            rules: reactive({
                vehicleId: [
                    { required: true, message: '请输入载具号' }
                ],
                goodsId: [
                    { required: true, message: '请输入物料号' }
                ],
                goodsNum: [
                    { required: true, message: '请输入数量' },
                    { type: 'number', message: '请输入数字' }
                ]
            }),
            standOptions: [
                {
                    value: "RC1",
                    label: '入库口'
                }
            ],
            stockTypeOptions: [
                {
                    value: '0',
                    label: '空载具入库'
                },
                {
                    value: '1',
                    label: '带料入库'
                }
            ],
        }
    },
    mounted() {
    },
    methods: {
        autoCompleteEmptyInfo(taskInRequestEntity) {// 自动补全空托入库信息
            if (taskInRequestEntity.isEmpty == '0') {// 空托入库
                taskInRequestEntity.goodsId = 'empty'
                taskInRequestEntity.goodsName = '空载具'
                taskInRequestEntity.goodsNum = 1
                taskInRequestEntity.singleWeight = 0
                taskInRequestEntity.weight = 0
                this.disabledEmpty = true
            } else {
                taskInRequestEntity.goodsId = ''
                taskInRequestEntity.goodsName = ''
                taskInRequestEntity.goodsNum = 1
                taskInRequestEntity.singleWeight = 0
                taskInRequestEntity.weight = 0
                this.disabledEmpty = false
            }
        },
        calWeight(taskInRequestEntity) {
            if (taskInRequestEntity.singleWeight != null | undefined) {
                taskInRequestEntity.weight = taskInRequestEntity.singleWeight * taskInRequestEntity.goodsNum
            }
        },
        addTempTasks(taskInRequestRef) {// 生成入库任务
            if (!taskInRequestRef) return
            taskInRequestRef.validate((valid) => {
                if (!valid) {
                    ElMessage({
                        message: '请输入必须的入库信息！',
                        type: 'warning',
                    })
                    return
                }
                if (this.isEmptyTask != null | undefined) {
                    if (this.isEmptyTask) {
                        ElMessage({
                            message: '当前载具已绑定空载具入库',
                            type: 'warning',
                        })
                        return
                    } else {
                        if (this.taskInRequestEntity.isEmpty == '1' && this.tempTasks.length != 0) {
                            ElMessage({
                                message: '当前载具已绑定过任务，不允许再绑定空载具入库',
                                type: 'warning',
                            })
                        }
                    }
                }
                if (this.tempOriginPoint != '' && this.tempOriginPoint != this.taskInRequestEntity.originPoint) {
                    ElMessage({
                        message: '入库站台不一致！',
                        type: 'warning',
                    })
                    return
                }
                if (this.tempVehicleId != '' && this.tempVehicleId != this.taskInRequestEntity.vehicleId) {
                    ElMessage({
                        message: '载具号不一致',
                        type: 'warning',
                    })
                    return
                }
                this.tempVehicleId = this.taskInRequestEntity.vehicleId
                this.tempOriginPoint = this.taskInRequestEntity.originPoint
                this.totalWeight = this.totalWeight + this.taskInRequestEntity.weight
                if (this.taskInRequestEntity.isEmpty == '0') {
                    this.isEmptyTask = true
                } else {
                    this.isEmptyTask = false
                }
                const tempTask = {
                    vehicleId: this.taskInRequestEntity.vehicleId,
                    originPoint: this.taskInRequestEntity.originPoint,
                    goodsId: this.taskInRequestEntity.goodsId,
                    goodsName: this.taskInRequestEntity.goodsName,
                    singleWeight: this.taskInRequestEntity.singleWeight,
                    goodsNum: this.taskInRequestEntity.goodsNum,
                    weight: this.taskInRequestEntity.weight
                }
                this.tempTasks.push(tempTask)
                // 清空物料相关信息
                if (!this.isEmptyTask) {
                    this.taskInRequestEntity.goodsId = ''
                    this.taskInRequestEntity.goodsName = ''
                    this.taskInRequestEntity.goodsNum = 1
                    this.taskInRequestEntity.singleWeight = 0
                    this.taskInRequestEntity.weight = 0
                    this.taskInRequestEntity.isEmpty = '1'
                    this.disabledEmpty = false
                }
                ElMessage({
                    message: '绑定成功！',
                    type: 'success',
                })
            })
        },
        submitGoodsInTask(formEl) {// 下发入库任务
            const inParams = {
                vehicleId: this.tempVehicleId,
                originPoint: this.tempOriginPoint,
                totalWeight: this.totalWeight,
                userName: store.getters.getUserName,
                goodsList: this.isEmptyTask == false && this.tempTasks.length > 0 ? this.tempTasks : null
            }
            sendGoodsInTask(inParams).then(res => {
                if (res.data.code == 0) {
                    ElMessage({
                        message: '创建入库任务成功！',
                        type: 'success',
                    })
                    this.tempTasks = []
                    this.tempVehicleId = ''
                    this.tempOriginPoint = ''
                    this.totalWeight = 0
                    this.isEmptyTask == false
                    formEl.resetFields()
                    this.disabledEmpty = false
                } else {
                    ElMessage.error(res.data.message)
                }
            }).catch(err => {
                console.log(err)
                ElMessage.error('创建入库任务错误！' + err.message)
            })
        },
        resetForm(formEl) {// 重置表单信息
            if (!formEl) return
            formEl.resetFields()
        },
        deleteRowTask(row) {// 删除当前行的入库任务
            this.tempTasks.splice(this.tempTasks.indexOf(row), 1)
            if (this.tempTasks.length == 0) {
                this.tempVehicleId = ''
                this.tempOriginPoint = ''
                this.totalWeight = 0
                this.isEmptyTask = false
            }
        }
    }
}
</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 {
    width: 100% !important;
}

.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;
}

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

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

.input-area {
    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%;
}
</style>