<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="success" @click="submitForm" class="submit-button">危险品入库</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
    import {dangerousImp,checkPre} from '../../api/consigner/dangerous'
    import axios from 'axios';
    export default {
        data() {
            return {
                responseData: null,
                options: [
                    {
                        value: "3481",
                            label: '一般危险品'
                    }, {
                        value: "3091",
                            label: '锂电池'
                    }
                        ],
            labelPosition:'left',
                form: {
                    waybill: '',
                    pcs: null,
                    weight: null,
                    hazardous: '3481'
                },
                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) {
                        dangerousImp(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!==''){
                    checkPre({waybill:this.form.waybill}).then((response) => {
                        const res = response.data
                        if (res.code !== '200') {
                            return this.$message.error(res.msg)
                        }
                        this.$message.success(res.msg);
                        this.form.pcs=res.data.pcs;
                        this.form.weight=res.data.weight;
                    }).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>