<template>
    <el-container class="form-container">
        <el-header>
            <h1>危险品出库</h1>
        </el-header>
        <el-main>
            <el-card class="form-card">
                <el-form :label-position="labelPosition" :model="form" ref="form" label-width="100px" :rules="rules">
                    <el-form-item label="运单号" prop="waybill">
                        <el-input class="form-input" v-model="form.waybill" placeholder="请输入运单号" clearable @blur="handleBlur"></el-input>
                    </el-form-item>
                    <el-form-item label="件数" prop="pcs">
                        <el-input class="form-input" type="number" v-model="form.pcs" placeholder="请输入件数" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="重量 (kg)" prop="weight">
                        <el-input class="form-input" type="number" v-model="form.weight" placeholder="请输入重量" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="危险品" prop="hazardous">
                        <el-select class="form-input" v-model="form.hazardous" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm" class="submit-button">危险品出库</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
    import {selectNewInventroys} from '../../api/consigner/station'
    import {dangerousExt,} from '../../api/consigner/dangerous'
    export default {
        data() {
            return {
                options: [
                    {
                        value: "3481",
                        label: '一般危险品'
                    }, {
                        value: "3091",
                        label: '锂电池'
                    }
                ],
                labelPosition:'left',
                form: {
                    waybill: '',
                    pcs: null,
                    weight: null,
                    hazardous: '3481'
                },
                queryInfo: {
                    waybill:'',
                    billfhl:'',
                    locationno:'',
                    // 当前页数
                    pageNum: 1,
                    // 每页大小
                    pageSize: 10,
                    starttime:'',
                    endtime:'',
                    remark2:''
                },
                rules: {
                    waybill: [
                        { required: true, message: '运单号不能为空', trigger: 'blur' }
                    ],
                    pcs: [
                        { required: true, message: '件数不能为空', trigger: 'blur' }
                    ],
                    weight: [
                        { required: true, message: '重量不能为空', trigger: 'blur' }
                    ],
                    hazardous: [
                        { required: true, message: '请选择是否为危险品', trigger: 'change' }
                    ]
                }
            };
        },
        methods: {
            submitForm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        dangerousExt(this.form).then((response) => {
                            const res = response.data
                            if (res.code !== '200') {
                                return this.$message.error(res.msg)
                            }
                            this.$message.success(res.msg);
                            this.$refs.form.resetFields();
                        }).catch(error => {
                            // 关闭加载
                            this.$message.error(error.toString())
                        })
                    } else {
                        return false;
                    }
                });
            },
            handleBlur() {
                // 在这里处理失去焦点事件
                if(this.form.waybill!==null && this.form.waybill!==''){
                    this.queryInfo.waybill=this.form.waybill;
                    selectNewInventroys(this.queryInfo).then((response) => {
                        const res = response.data
                        if (res.code !== '200') {
                            return this.$message.error('剩余库调取失败')
                        }
                        if(res.data.list!==null){
                            this.form.pcs=res.data.list[0].pcs;
                            this.form.weight=res.data.list[0].weight;
                            this.form.hazardous=res.data.list[0].remark3;
                        }
                        this.$message.success('库存调取成功')
                    }).catch(error => {
                        // 关闭加载
                        this.$message.error(error.toString())
                    })
                }
                // 你可以在这里执行其他操作，比如验证输入或发送请求等
            }
        }
    };
</script>

<style scoped>
    .form-container {
        background-color: #f5f5f5;
        padding: 20px;
        min-height: 100vh;
    }

    .el-header {
        text-align: center;
        margin-bottom: 20px;
        color: #333;
    }

    .form-card {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .form-input {
        width: 100%; /* 设置宽度为100% */
    }

    .submit-button {
        width: 100%;
    }

    .el-form-item {
        margin-bottom: 15px;
    }

    @media (max-width: 600px) {
        .form-container {
            padding: 10px;
        }
    }
</style>