<template>
    <el-config-provider :locale="zhCn">
        <el-container class="content">
            <div class="work-area">
                <fieldset class="main-area">
                    <el-form ref="workFormRef" :model="workFormEntity" :label-position="labelPosition"
                        label-width="158px" style="max-width: 100%" :rules="rules" status-icon>
                        <div style="display: flex; justify-content: space-between;">
                            <el-row>
                                <el-form-item label="计划开工日期" prop="planStartDate">
                                    <el-date-picker v-model="workFormEntity.planStartDate" type="date"
                                        placeholder="选择开工日期" :shortcuts="shortcuts" style="width: 196px;" clearable />
                                </el-form-item>
                                <el-form-item label="工单号" prop="workOrder">
                                    <el-select v-model="workFormEntity.workOrder" filterable default-first-option
                                        placeholder="请选择工单号" style="width: 196px" :loading="optionLoading" remote
                                        :remote-method="(query) => {
                                            workFormQuery.workOrder = query
                                            initWorkOptions()
                                        }" remote-show-suffix reserve-keyword clearable>
                                        <el-option v-for="item in workOptions.workOrder" :key="item" :label="item"
                                            :value="item" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="成品号" prop="productId">
                                    <el-select v-model="workFormEntity.productId" filterable default-first-option
                                        placeholder="请选择成品号" style="width: 196px" :loading="optionLoading" remote
                                        :remote-method="(query) => {
                                            workFormQuery.productId = query
                                            initWorkOptions()
                                        }" remote-show-suffix reserve-keyword clearable>
                                        <el-option v-for="item in workOptions.productId" :key="item" :label="item"
                                            :value="item" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="单片号" prop="singleProductId">
                                    <el-select v-model="workFormEntity.singleProductId" filterable default-first-option
                                        placeholder="请选择单片号" style="width: 196px" :loading="optionLoading" remote
                                        :remote-method="(query) => {
                                            workFormQuery.singleProductId = query
                                            initWorkOptions()
                                        }" remote-show-suffix reserve-keyword clearable>
                                        <el-option v-for="item in workOptions.singleProductId" :key="item" :label="item"
                                            :value="item" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="料盒号" prop="boxNo">
                                    <el-select v-model="workFormEntity.boxNo" filterable default-first-option
                                        placeholder="请选择料盒号" style="width: 196px" :loading="optionLoading" remote
                                        :remote-method="(query) => {
                                            workFormQuery.boxNo = query
                                            initWorkOptions()
                                        }" remote-show-suffix reserve-keyword clearable>
                                        <el-option v-for="item in workOptions.boxNo" :key="item" :label="item"
                                            :value="item" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="原材料号" prop="goodsId">
                                    <el-select v-model="workFormEntity.goodsId" filterable default-first-option
                                        placeholder="请选择原材料号" style="width: 196px" :loading="optionLoading" remote
                                        :remote-method="(query) => {
                                            workFormQuery.goodsId = query
                                            initWorkOptions()
                                        }" remote-show-suffix reserve-keyword clearable>
                                        <el-option v-for="item in workOptions.goodsId" :key="item" :label="item"
                                            :value="item" />
                                    </el-select>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-button type="success"
                                    style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                                    @click="confirmStart()">确认配料</el-button>
                                <el-button type="warning"
                                    style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                                    @click="resetWorkFormQuery()">清除选择</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="workOrder">
                                        <el-input v-model="confirmEntity.workOrder" disabled />
                                    </el-form-item>
                                    <el-form-item label="成品号" prop="productId">
                                        <el-input v-model="confirmEntity.productId" disabled />
                                    </el-form-item>
                                    <el-form-item label="单片号" prop="singleProductId">
                                        <el-input v-model="confirmEntity.singleProductId" disabled />
                                    </el-form-item>
                                    <el-form-item label="物料号" prop="goodsId">
                                        <el-input v-model="confirmEntity.goodsId" disabled />
                                    </el-form-item>
                                    <el-form-item label="料盒号" prop="boxNo">
                                        <el-input v-model="confirmEntity.boxNo" 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 />
                                    </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="goodsId">
                                        <el-input v-model="confirmEntity.goodsId" disabled />
                                    </el-form-item>
                                    <el-form-item label="是否库外料" prop="isOut">
                                        <el-input v-model="confirmEntity.isOut" :formatter="formatter => {
                                            return confirmEntity.isOut === 1 ? '是' : '否'
                                        }" disabled />
                                    </el-form-item>
                                    <el-form-item label="存放区域" prop="putArea">
                                        <el-input v-model="confirmEntity.putArea" 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="primary"
                                    style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                                    @click="showBoxSummary()">显示料盒</el-button>
                                <el-button type="success"
                                    style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                                    @click="confirmOrRelease()">确认/放行</el-button>
                                <el-button type="warning"
                                    style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                                    @click="resetWorkFormQuery()">打印标签</el-button>
                            </el-row>
                        </div>
                    </el-form>
                </fieldset>
                <el-dialog v-model="boxShowFlag" title="料盒总览" width="50%" center>
                    <el-table :data="boxSummary" stripe border class="table-class" max-height="450px"
                        :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                        <el-table-column prop="workOrder" label="工单号" fixed="left" />
                        <el-table-column prop="productId" label="成品号" />
                        <el-table-column prop="singleProductId" label="单片号" />
                        <el-table-column prop="boxNo" label="料盒号" />
                        <el-table-column prop="boxQty" label="料盒数量" />
                    </el-table>
                </el-dialog>
            </div>
        </el-container>
    </el-config-provider>
</template>

<script setup>
import store from '@/store'
import { queryKateWorks, initWorks, getCurrentWorks, confirmCurrentWork } from '@/api/kateWork.js'
import { errorBox, warningBox } from '@/utils/myMessageBox.js'
import { ElMessage, formatter } from 'element-plus'
import { dateFormatter, timeFormatter } from '@/utils/formatter.js'
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: 'test',
    data() {
        return {
            standId: store.getters.getStandId,
            userName: store.getters.getUserName,
            timer: '',
            labelPosition: 'top',
            workFormRef: ref(),
            workFormEntity: reactive({
                workOrder: '',
                productId: '',
                singleProductId: '',
                boxNo: '',
                goodsId: '',
                planStartDate: null
            }),
            workFormQuery: reactive({
                workOrder: '',
                productId: '',
                singleProductId: '',
                boxNo: '',
                goodsId: '',
            }),
            rules: reactive({
                workOrder: [
                    { required: true, message: '请选择工单号。' }
                ]
            }),
            shortcuts: [
                {
                    text: '今天',
                    value: new Date(),
                },
                {
                    text: '昨天',
                    value: () => {
                        const date = new Date()
                        date.setTime(date.getTime() - 3600 * 1000 * 24)
                        return date
                    },
                },
            ],
            optionLoading: false,
            workOptions: {
                workOrder: [],
                productId: [],
                singleProductId: [],
                boxNo: [],
                goodsId: []
            },
            confirmRef: ref(),
            confirmEntity: reactive({}),
            confirmRules: reactive({}),
            boxShowFlag: false,
            boxSummary: [],
            pauseGetWorkFlag: true,
        }
    },
    mounted() {
        this.initWorkOptions()
        this.timer = setInterval(() => {
            this.getWork()
        }, 1000)
    },
    beforeUnmount() {
        clearInterval(this.timer)
    },
    methods: {
        // 初始化工单options
        initWorkOptions() {
            const request = {
                workOrder: this.workFormQuery.workOrder != '' ? this.workFormQuery.workOrder : this.workFormEntity.workOrder,
                productId: this.workFormQuery.productId != '' ? this.workFormQuery.productId : this.workFormEntity.productId,
                singleProductId: this.workFormQuery.singleProductId != '' ? this.workFormQuery.singleProductId : this.workFormEntity.singleProductId,
                boxNo: this.workFormQuery.boxNo != '' ? this.workFormQuery.boxNo : this.workFormEntity.boxNo,
                goodsId: this.workFormQuery.goodsId != '' ? this.workFormQuery.goodsId : this.workFormEntity.goodsId,
                planStartDate: dateFormatter(this.workFormEntity.planStartDate)
            }
            this.optionLoading = true
            queryKateWorks(request).then(res => {
                const response = res.data
                if (response.code == 0) {
                    this.workOptions = response.data
                } else {
                    this.workOptions = {
                        workOrder: [],
                        productId: [],
                        singleProductId: [],
                        boxNo: [],
                        goodsId: []
                    }
                }
            }).catch(err => {
                console.log(err)
                errorBox('查询选项错误。')
            }).finally(() => {
                this.optionLoading = false
            })
        },
        // 重置参数
        resetWorkFormQuery() {
            const planStartDate = this.workFormEntity.planStartDate
            this.workFormEntity = reactive({
                workOrder: '',
                productId: '',
                singleProductId: '',
                boxNo: '',
                goodsId: '',
                planStartDate: planStartDate
            })
        },
        // 确认配料
        confirmStart() {
            const request = {
                workOrder: this.workFormEntity.workOrder,
                productId: this.workFormEntity.productId,
                singleProductId: this.workFormEntity.singleProductId,
                boxNo: this.workFormEntity.boxNo,
                goodsId: this.workFormEntity.goodsId,
                planStartDate: dateFormatter(this.workFormEntity.planStartDate),
                standId: 'P1',
                userName: this.userName
            }
            loading.open()
            initWorks(request).then(res => {
                const response = res.data
                if (response.code == 0) {
                    ElMessage.success(response.message)
                } else {
                    errorBox(response.message)
                }
            }).catch(err => {
                console.log(err)
                errorBox('请求错误。')
            }).finally(() => {
                loading.close()
            })
        },
        // 显示料盒总览
        showBoxSummary() {
            this.boxShowFlag = true
        },
        getWork() {
            if (this.pauseGetWorkFlag) {
                return
            }
            const request = {
                standId: this.standId,
                userName: this.userName
            }
            getCurrentWorks(request).then(res => {
                const response = res.data
                if (response.code == 0) {
                    // 设置form
                    this.confirmEntity = {
                        workOrder: response.data.orderConfirmVo.workOrder,
                        productId: response.data.orderConfirmVo.productId,
                        singleProductId: response.data.orderConfirmVo.singleProductId,
                        boxNo: response.data.orderConfirmVo.boxNo,
                        goodsId: response.data.orderConfirmVo.goodsId,
                        planPickQty: response.data.orderConfirmVo.planPickQty,
                        realPickQty: response.data.orderConfirmVo.realPickQty,
                        stockId: response.data.stockConfirmVo.stockId,
                        vehicleId: response.data.stockConfirmVo.vehicleId,
                        goodsId: response.data.stockConfirmVo.goodsId,
                        planRemainQty: response.data.stockConfirmVo.planRemainQty,
                        realRemainQty: response.data.stockConfirmVo.realRemainQty,
                        isOut: response.data.stockConfirmVo.isOut,
                        putArea: response.data.stockConfirmVo.putArea,
                    }
                    this.pauseGetWorkFlag = true
                } else if (response.code == 400) {
                    // 警告，弹框
                    this.pauseGetWorkFlag = true
                    warningBox(response.message)
                }
            }).catch(err => {
                console.log(err)
                this.pauseGetWorkFlag = true
                errorBox('请求错误，请检查完原因后刷新界面。')
            })
        },
        confirmOrRelease() {
            const request = {
                orderConfirm: {
                    workOrder: this.confirmEntity.workOrder,
                        productId: this.confirmEntity.productId,
                        singleProductId: this.confirmEntity.singleProductId,
                        boxNo: this.confirmEntity.boxNo,
                        goodsId: this.confirmEntity.goodsId,
                        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
            }
            confirmCurrentWork(request).then(res => {
                const response = res.data
                if (response.code == 0) {
                    // 设置form
                    this.confirmEntity = reactive({})
                    this.pauseGetWorkFlag = false
                    ElMessage.success(response.message)
                } else {
                    // 错误，弹框
                    errorBox(response.message)
                }
            }).catch(err => {
                console.log(err)
                errorBox('请求错误，请检查完原因后刷新界面。')
            })
        }
    }
}
</script>

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

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

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

.title-area {
    display: flex;
    /* min-height: 10%; */
    max-height: max-content;
    margin-bottom: 10px;
    min-width: inherit;
    border: solid 1px;
    border-radius: 10px;
    box-shadow: 0px 15px 10px -15px #000;
    overflow: auto;
}

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