<template>
    <el-config-provider :locale="zhCn">
        <el-container class="content">
            <div class="work-area">
                <fieldset class="main-area">
                    <legend>出库单信息</legend>
                    <el-form ref="orderOutFormRef" :model="orderOutForm" :rules="rules" label-width="100px"
                             :label-position="labelPosition" status-icon>
                        <el-row :gutter="20">
                            <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                <el-form-item label="托盘号" prop="vehicleNo">
                                    <el-input v-model="orderOutForm.vehicleNo" clearable @keyup.enter="submitOrderOut"
                                              placeholder="请输入托盘号" ref="vehicleNoRef"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </fieldset>

                <fieldset class="submit-area">
                    <legend>操作区域</legend>
                    <div style="display: flex; justify-content: center; margin-bottom: 15px;">
                        <el-button type="danger" @click="submitOrderOut" size="large">提交出库单</el-button>
                    </div>
                </fieldset>


                <el-dialog v-model="responseDialogVisible" title="请求结果" width="500px">
                    <pre>{{ responseResult }}</pre>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button type="primary" @click="responseDialogVisible = false">确定</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </el-container>
    </el-config-provider>
</template>

<script setup>
import { reactive, ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { loading } from '@/utils/loading.js'
import { errorBox } from '@/utils/myMessageBox.js'
import { labelPosition } from '@/constant/form'
import { submitOrderOutForm } from '@/api/orderOut.js'

// 生成UUID方法
const generateUUID = () => {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    const r = Math.random() * 16 | 0
    const v = c === 'x' ? r : (r & 0x3 | 0x8)
    return v.toString(16)
  })
}

// 表单数据
const orderOutFormRef = ref()
const orderOutForm = reactive({
    vehicleNo: ''
})



// 表单规则
const rules = reactive({
    vehicleNo: [{ required: true, message: '请输入托盘号', trigger: 'blur' }]
})

// 引用DOM元素
const vehicleNoRef = ref()

// 响应结果对话框
const responseDialogVisible = ref(false)
const responseResult = ref({})

// 初始化时聚焦第一个输入框
onMounted(() => {
    nextTick(() => {
        vehicleNoRef.value.focus()
    })
})


// 重置表单
const resetForm = () => {
    orderOutForm.vehicleNo = ''
    nextTick(() => {
        vehicleNoRef.value.focus()
    })
}


// 提交出库单
const submitOrderOut = () => {
    orderOutFormRef.value.validate((valid) => {
        if (valid) {
            // 构建新的请求体
            const requestData = {
                taskId: generateUUID(),
                vehicleNo: orderOutForm.vehicleNo
            }

            // 发送请求
            loading.open()
            submitOrderOutForm(requestData)
                .then(res => {
                    responseResult.value = res.data
                    responseDialogVisible.value = true

                    if (res.data.code === 0) {
                        ElMessage.success('出库单提交成功')
                        // 提交成功后重置表单
                        resetForm()
                    } else {
                        errorBox(`出库单提交失败: ${res.data.message}`)
                    }
                })
                .catch(err => {
                    console.error(err)
                    errorBox('提交出库单时发生错误')
                })
                .finally(() => {
                    loading.close()
                })
        } else {
            errorBox('请填写完整的出库单信息')
        }
    })
}
</script>

<style scoped>
.content {
    display: flex;
    width: 100%;
    overflow-x: hidden;
}

.work-area {
    width: 100%;
    height: calc(100vh - 160px);
    padding: 15px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.main-area, .submit-area {
    width: 100%;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-sizing: border-box;
}

legend {
    padding: 0 10px;
    font-weight: bold;
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: #f8f8f8;
    padding: 15px;
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
}

:deep(.el-input),
:deep(.el-input-number) {
    width: 100%;
}


</style> 