<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">
                <!-- 按照日期自动生成  202511101037  看之前的逻辑-->
                <!-- <el-col :span="8">
                    <el-form-item label="入库单号:" prop="userId3">
                        20250988090
                    </el-form-item>
                </el-col> -->
                <el-col :span="8">
                    <el-form-item label="入库时间:" prop="inOutDate">
                        <el-date-picker v-model="ruleForm.inOutDate" type="date" placeholder="选择日期"
                            style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="入库仓库:" prop="shId">
                        <el-select v-model="ruleForm.shId" 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="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 #header>
                    <span><i style="color:red">*</i>物料编号</span>
                </template>
                <template #default="scope">
                    <el-select v-model="scope.row.goodsCodeAndGoodsName" placeholder="请选择" @change="(val) => changeGoods(val,scope.$index)">
                        <el-option v-for="item in goodsList" :key="item.id" :label="item.goodsCodeAndGoodsName" :value="item.goodsCodeAndGoodsName"></el-option>
                        <!-- <el-option label="玻璃饼" value="2">
                        </el-option> -->
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="物料名称" align="center"></el-table-column>
            <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-column prop="grade" label="车间订单号" align="center">
                 <template #header>
                    <span > <i style="color:red">*</i>车间订单号</span>
                    <!-- <span v-else> 物料编号</span> -->
                </template>
                <!-- 物料是玻璃饼的时候 车间订单号必填 -->
                <template #default="scope">
                    <el-input v-model="scope.row.buyQty" @change="handleChange"></el-input>
                </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>
import {getGoodsOutList} from "@/api/storeManagement/otherReceiving"
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,
            },
            goodsList:[],
            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
        this.getGoodsList()
    },
    methods: {
        // 获取物料信息
        getGoodsList(){
            getGoodsOutList().then(res =>{
                this.goodsList = res.data.data.records
            })
        },
        // 切换物料
        changeGoods(val,index){
            let tmp = this.goodsList.find(item => item.goodsCodeAndGoodsName == val)
            this.tableData[index] = tmp.goodsName
        },
        submit() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let hasInvalidRow = false
                    for (let i = 0; i < this.tableData.length; i++) {
                        const row = this.tableData[i]
                        if (!row.goodsId) {
                            this.$message.warning(`第${i + 1}行：请选择物料编号`)
                            hasInvalidRow = true
                            break;
                        }
                        if (!row.buyQty || row.buyQty <= 0) {
                            this.$message.warning(`第${i + 1}行：请输入有效的数量`)
                            hasInvalidRow = true
                            break;
                        }
                        if (row.goodsId === '2' && !row.buyQty) {
                            this.$message.warning(`第${i + 1}行：玻璃饼物料必须填写车间订单号`)
                            hasInvalidRow = true
                            break
                        }
                    }
                    if (!hasInvalidRow) {
                        this.$refs.ruleForm.resetFields()
                        this.tableData = []
                        this.openShow = true
                        this.$message.success('添加成功')
                    }
                } else {
                    this.$message.error('请填写所有必填项')
                    return false
                }
            });
        },
        // 删除一行
        deleteTable(index) {
            this.tableData.splice(index, 1)
        },
        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>