<template>
    <el-dialog title="新增" append-to-body :modelValue="openShow" width="70%" @close="closeDialog" fullscreen>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row :gutter="24">
                <el-col :span="8">
                    <!-- 按照日期自动生成  202511101037  看之前的逻辑-->
                    <el-form-item label="入库单号:" prop="userId3">
                        20250988090
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入库时间:" prop="declareDate3">
                        <el-date-picker v-model="ruleForm.declareDate" type="date" placeholder="选择日期"
                            style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="入库仓库:" prop="userId">
                        <el-select v-model="ruleForm.userId" placeholder="请选择" disabled>
                            <el-option label="仓库一" value="1">
                            </el-option>
                            <el-option label="仓库二" value="2">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入库人员:" prop="buyDept">
                        <el-select v-model="ruleForm.buyDept" placeholder="请选择">
                            <el-option label="人员一" value="1">
                            </el-option>
                            <el-option label="人员二" value="2">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入库原因:" prop="needDept">
                        <el-select v-model="ruleForm.needDept" placeholder="请选择">
                            <el-option label="原因一" value="1">
                            </el-option>
                            <el-option label="原因二" value="2">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="margin-bottom: 12px;" v-if="moldAddMore">
            <el-button type="primary" @click="addTable">插入一行</el-button>
            <el-button type="danger" @click="delTable">删除行</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="boCode" label="型号/牌号" align="center">
                <template #default="scope">
                    <span>{{ scope.row.boCode }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="goodsId" label="质量编号" align="center">
                <template #default="scope">
                    <el-select v-model="scope.row.goodsId" placeholder="请选择">
                        <el-option label="质量编号一" value="1">
                        </el-option>
                        <el-option label="质量编号二" value="2">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="生产批次号" align="center">
                <template #default="scope">
                    <el-input v-model="scope.row.goodsName"  placeholder="请输入" />
                </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="炉批次号" align="center">
                <template #default="scope">
                    <el-input v-model="scope.row.goodsName"  placeholder="请输入" />
                </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="物料名称" align="center">
                <template #default="scope">
                    <el-input v-model="scope.row.goodsName"  placeholder="请输入" />
                </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="生产标识" align="center">
                <template #default="scope">
                    <el-select v-model="scope.row.goodsId" placeholder="请选择">
                        <el-option label="生产标识一" value="1">
                        </el-option>
                        <el-option label="生产标识二" value="2">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="mtltmrk" label="到期日期" align="center">
                <template #default="scope">
                    <el-date-picker v-model="scope.row.mtltmrk" type="date" placeholder="请选择" style="width:100%"/>
                </template>
            </el-table-column>
            <el-table-column prop="buyQty" label="数量" align="center" width="200px">
                <template #header>
                    <span><i style="color:red">*</i>数量</span>
                </template>
                <template #default="scope">
                    <el-input-number v-model="scope.row.buyQty" controls-position="right" @change="handleChange"
                        :min="1"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="unitName" label="库位号" align="center">
                <template #default="scope">
                    <el-select v-model="scope.row.goodsId" placeholder="请选择">
                        <el-option label="库位一" value="1">
                        </el-option>
                        <el-option label="库位二" value="2">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="specifications" label="单价" align="center">
                <template #default="scope">
                    <el-input-number v-model="scope.row.buyQty" controls-position="right" @change="handleChange"
                        :min="1"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="grade" label="金额" align="center">
                <template #default="scope">
                    <el-input-number v-model="scope.row.buyQty" controls-position="right" @change="handleChange"
                        :min="1"></el-input-number>
                </template>
            </el-table-column>

        </el-table>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
export default {
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
        moldAddMore: {
            type: Boolean,
            default: false
        },
        buyCycle: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            openShow: false,
            ruleForm: {
                userId: '1',
                declareDate: '',
                needDate: '',
                buyDept: '',
                needDept: null,
            },
            rules: {
                userId: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                declareDate: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                needDate: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                buyDept: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                needDept: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
            },
            tableData: [],
            boCode: 'BO-2025001',
        }
    },
    mounted() {
        this.openShow = this.showDialog
    },
    methods: {
        closeDialog() {
            this.openShow = false
            this.$emit('closeDialog');
        },
        // 插入一行
        addTable() {
            let boCode = '';
            const len = this.tableData;
            if (len.length === 0) {
                boCode = this.boCode;
            } else {
                const newBoCode = len[len.length - 1].boCode;
                const codeArr = newBoCode.split('-');
                const num = Number(codeArr[1]) + 1;
                boCode = codeArr[0] + '-' + num;
            }
            // 新增一行
            const record = { boCode, buyCycle: this.buyCycle, planArea: '洛阳新区' };
            this.tableData.push(record)
        },
        // 删除一行
        delTable(row, index) {
            this.tableData.splice(index, 1)
        },
    }
}
</script>
<style lang="scss" scoped></style>