<template>
    <el-dialog 
        :close-on-click-modal="false" 
        :title="batchSelectionTitle" 
        :visible.sync="batchSelectionVisible"
        :append-to-body="true" 
        width="70%" 
        @close="handleCloseDetail" 
        fullscreen
    >
        <el-table :data="tableData" style="width: 100%" border>
            <!-- 展开行详情 -->
            <el-table-column type="expand">
                <template slot-scope="props">
                    <!-- 关联表单列表（带复选框） -->
                    <el-table 
                        :data="props.row.oneFormList || []" 
                        size="mini" 
                        style="width: 100%"
                        @selection-change="(val) => handleSelectionChange(val, props.row)"
                        border
                    >
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="#" width="55" />
                        <!-- <el-table-column label="表单ID" prop="id" width="80" /> -->
                        <el-table-column label="物料名称" prop="materialName"  />
                        <el-table-column label="物料编码" prop="materialCode" />
                        <el-table-column label="规格型号" prop="model"  />
                        <!-- <el-table-column label="申请数量" prop="applicationQuantity"  /> -->
                        <el-table-column label="单价" prop="unitPrice" width="80" />
                    </el-table>
                </template>
            </el-table-column>
            
            <!-- 常规列展示 -->
            <!-- <el-table-column label="物料ID" prop="materialId"  /> -->
            <el-table-column label="物料编码" prop="materialCode"  />
            <el-table-column label="物料名称" prop="materialName"  />
            <el-table-column label="规格型号" prop="model"  />
            <el-table-column label="申请数量" prop="applicationQuantity"  />
            
            <el-table-column label="已出库数量" prop="outboundQuantity"  />
            <el-table-column label="部门" prop="departmentName"  />
            <el-table-column label="单位" prop="unit"  />
        </el-table>
            <div style="text-align: right; margin-top: 20px">
            <el-button @click="handleConfirmSelect">确认选择</el-button>
        </div>
    </el-dialog>
</template>

<style>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 15px;
    width: 50%;
}

/* 适配嵌套表格样式 */
.demo-table-expand .el-table {
    --el-table-header-text-color: #666;
    --el-table-row-hover-bg-color: #f8f9fa;
}

/* 展开行内表格样式优化 */
.el-table__expanded-cell .el-table {
    margin-bottom: 16px;
}
</style>

<script>
export default {
    props: {
        batchSelectionVisible: {
            type: Boolean,
            default: false
        },
        batchSelectionTitle: {
            type: String,
            default: '物料出库信息'
        },
        tableData: { 
            type: Array,
            default: () => []
        },
        inBatchForm:{
            type:Object,
            default:()=>{}
        }
    },
    data() {
        return {
            // 存储所有勾选的行数据
            selectedRows: []
        };
    },
    methods: {
        // 监听嵌套表格的勾选事件
        handleSelectionChange(selection, parentRow) {
            console.log('666666',selection, parentRow)
            // 为勾选的数据补充父行关联信息
            const selectionWithParent = selection.map(item => ({
                ...item,
                parentMaterialId: parentRow.materialId, // 关联父行的物料ID
                parentDepartmentName: parentRow.departmentName, // 关联父行的部门信息
                applicationQuantity: parentRow.applicationQuantity,
                ldDemandEndId:parentRow.ldDemandEndId,
                // outboundQuantity:parentRow.outboundQuantity,
            }));

            // 先移除当前父行下已勾选的旧数据
            this.selectedRows = this.selectedRows.filter(
                item => item.parentMaterialId !== parentRow.materialId
            );
            // 添加当前勾选的新数据
            this.selectedRows.push(...selectionWithParent);
            console.log('777777',selection, parentRow,this.selectedRows)
            // 实时传递给父组件（可选，也可以点击确认后传递）
        },

        // 确认选择按钮 - 主动传递勾选数据给父组件
        handleConfirmSelect() {
            console.log(1222)
            console.log(this.selectedRows,'00000')

            // this.$emit('confirm-selection', this.selectedRows);
            this.batchSelectionVisible = false;

            this.$emit('selectionChange', this.selectedRows);


            // 可选择关闭弹窗
            // this.handleCloseDetail();
        },

        // // 关闭弹窗的处理方法
        handleCloseDetail() {
            // this.$emit('update:batchSelectionVisible', false);
            
            // this.$emit('handleCloseDetail')
            this.$emit('selectionChange', this.selectedRows);
        },
        
    },
    mounted() {
        console.log(9999999,this.inBatchForm)
    }
    
}

</script>