<!-- HoldingpoleDialog.vue -->
<template>
    <el-dialog title="明细" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="handleClose"
        @open="handleOpen" append-to-body>
        <!-- 自定义弹窗内容 -->
        <div class="dialog-content">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
                <el-form-item label="关键字" prop="keyWord">
                    <el-input v-model="queryParams.keyWord" placeholder="请输入关键字" clearable maxlength="50"
                        style="width: 240px" @keyup.enter.native.prevent="handleQuery" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="maTypeDetails" style="width: 100%">
                <el-table-column label="序号" align="center" type="index" :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)" />
                <el-table-column label="类型名称" align="center" prop="typeName" :show-overflow-tooltip="true" />
                <el-table-column label="规格型号" align="center" prop="typeModelName" :show-overflow-tooltip="true" />
                <el-table-column label="单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
                <el-table-column label="预领数量" align="center" prop="partNum" :show-overflow-tooltip="true" />
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
    </el-dialog>
</template>

<script>
import { getWholeSetDetails } from '@/api/store/newBuy'

export default {
    props: {
        // 接收外部传入的参数
        holdingpoleData: {
            type: Object,
            required: true
        },
        initialVisible: Boolean
    },
    data() {
        return {
            dialogVisible: this.initialVisible, // 控制弹窗显隐状态
            maTypeDetails: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                typeId: undefined,
                keyWord: '',
                purchaseNum: undefined,
            },
        };
    },
    watch: {
        // 监听 initialVisible 属性的变化
        initialVisible(newVal) {
            this.dialogVisible = newVal;
        }
    },
    methods: {
        getList() {
            getWholeSetDetails(this.queryParams).then(res => {
                this.maTypeDetails = res.rows
                this.total = res.total
            })
        },
        handleClose() {
            this.$emit('close');
            this.maTypeDetails.splice(0, this.maTypeDetails.length);
        },
        handleOpen() {
            this.queryParams.typeId = this.holdingpoleData.typeId
            this.queryParams.purchaseNum = this.holdingpoleData.purchaseNum
            this.getList()
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
    }
};
</script>

<style scoped>
/* 添加自定义样式 */
.dialog-content {
    /* ... */
}
</style>