<template>
    <div style="padding: 20px;background-color: #F2F8FC;">
        <TitleComponent title="备品备件管理" subtitle="管理光伏和风电设备的所有备品备件信息" />
        <el-card style="border-radius: 10px;">
            <div class="title">
                数据总览
            </div>
            <div class="list">
                <div class="item">
                    <div class="left">
                        <div style="font-size: 14px;color:rgba(102, 102, 102, 1)">总备件数量</div>
                        <div style="margin: 10px 0;">
                            <span style="font-size: 24px;font-weight: bold;margin-right: 10px;">2,548</span>
                            <span>个</span>
                        </div>
                        <div>
                            <div style="display: flex;align-items: center;">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="18" height="18" viewBox="0 0 18 18" fill="none">
                                    <path
                                        d="M15.15 5.7748L15.15 5.69982L15.15 5.62481L15.075 5.62481C15.075 5.62481 15 5.62481 14.925 5.5498L11.25 5.5498C10.875 5.5498 10.575 5.84981 10.575 6.2248C10.575 6.59982 10.875 6.8998 11.25 6.8998L13.125 6.8998L9.52501 10.4998L7.72501 8.6998C7.35 8.32481 6.60001 8.32481 6.225 8.6998L3.075 11.8498C2.85 12.0748 2.85 12.5248 3.075 12.7498C3.22501 12.8998 3.37501 12.9748 3.525 12.9748C3.67501 12.9748 3.82501 12.9748 3.975 12.7498L6.9 9.8248L8.7 11.6248C9.07501 11.9998 9.825 11.9998 10.2 11.6248L13.95 7.87481L13.95 9.74981C13.95 10.1248 14.25 10.4248 14.625 10.4248C15 10.4248 15.3 10.1248 15.3 9.74981L15.3 6.37482L15.3 6.14982L15.15 5.7748Z"
                                        fill="#00B87A"></path>
                                </svg>
                                <div>
                                    <span
                                        style="color: rgba(0, 184, 122, 1);font-size: 14px;margin: 0 5px;margin-right: 10px;">8.2%</span>
                                    <span style="color: rgba(154, 154, 154, 1);font-size: 14px;">较昨日同期</span>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34"
                            height="34" viewBox="0 0 34 34" fill="none">
                            <rect x="0" y="0" width="34" height="34" rx="4" fill="#186DF5"></rect>
                            <path
                                d="M8.72815 24.0051C8.31696 24.0051 7.9743 24.3478 7.9743 24.759C7.9743 25.1702 8.31696 25.5128 8.72815 25.5128L16.2256 25.5128C16.6368 25.5128 16.9794 25.1702 16.9794 24.759C16.9794 24.3478 16.6368 24.0051 16.2256 24.0051L8.72815 24.0051ZM8.74186 19.4957C8.33067 19.4957 7.988 19.8384 7.988 20.2496C7.988 20.6608 8.33067 21.0034 8.74186 21.0034L13.2513 21.0034C13.6625 21.0034 14.0051 20.6608 14.0051 20.2496C14.0051 19.8384 13.6625 19.4957 13.2513 19.4957L8.74186 19.4957ZM5 16.494C5 15.6716 5.67162 15 6.494 15L27.506 15C28.3284 15 29 15.6716 29 16.494L29 26.6505C29 27.6648 28.1776 28.5009 27.1496 28.5009L6.85037 28.5009C5.83609 28.5009 5 27.6785 5 26.6505L5 16.494Z"
                                fill="#FFFFFF"></path>
                            <path
                                d="M17.7242 12.4974L17.7242 6.494C17.7242 5.67162 18.3959 5 19.2182 5L23.4124 5C24.0018 5 24.5638 5.28784 24.9201 5.76756L28.9772 12.4974L28.9772 12.5385C29.0458 13.2787 28.3467 13.9366 27.6066 13.9914L19.2182 13.9914C18.3959 13.9914 17.7242 13.3198 17.7242 12.4974ZM14.7499 13.9914L6.3753 13.9914C5.63515 13.9229 4.93612 13.2787 5.00466 12.5385L5.00466 12.5248L5.00466 12.4974L9.06177 5.76756C9.40443 5.28784 9.96639 5 10.5695 5L14.7637 5C15.586 5 16.2577 5.67162 16.2577 6.494L16.2577 12.4974C16.2577 13.3198 15.586 13.9914 14.7499 13.9914Z"
                                fill="#FFFFFF"></path>
                        </svg>
                    </div>
                </div>
                <div class="item">
                    <div class="left">
                        <div style="font-size: 14px;color:rgba(102, 102, 102, 1)">总备件数量</div>
                        <div style="margin: 10px 0;">
                            <span style="font-size: 24px;font-weight: bold;margin-right: 10px;">2,548</span>
                            <span>个</span>
                        </div>
                        <div>
                            <div style="display: flex;align-items: center;">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="18" height="18" viewBox="0 0 18 18" fill="none">
                                    <path
                                        d="M15.15 5.7748L15.15 5.69982L15.15 5.62481L15.075 5.62481C15.075 5.62481 15 5.62481 14.925 5.5498L11.25 5.5498C10.875 5.5498 10.575 5.84981 10.575 6.2248C10.575 6.59982 10.875 6.8998 11.25 6.8998L13.125 6.8998L9.52501 10.4998L7.72501 8.6998C7.35 8.32481 6.60001 8.32481 6.225 8.6998L3.075 11.8498C2.85 12.0748 2.85 12.5248 3.075 12.7498C3.22501 12.8998 3.37501 12.9748 3.525 12.9748C3.67501 12.9748 3.82501 12.9748 3.975 12.7498L6.9 9.8248L8.7 11.6248C9.07501 11.9998 9.825 11.9998 10.2 11.6248L13.95 7.87481L13.95 9.74981C13.95 10.1248 14.25 10.4248 14.625 10.4248C15 10.4248 15.3 10.1248 15.3 9.74981L15.3 6.37482L15.3 6.14982L15.15 5.7748Z"
                                        fill="#E32727"></path>
                                </svg>
                                <div>
                                    <span
                                        style="color: rgba(227, 39, 39, 1);font-size: 14px;margin: 0 5px;margin-right: 10px;">8.2%</span>
                                    <span style="color: rgba(154, 154, 154, 1);font-size: 14px;">较昨日同期</span>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34"
                            height="34" viewBox="0 0 34 34" fill="none">
                            <rect x="0" y="0" width="34" height="34" rx="4" fill="#186DF5"></rect>
                            <path
                                d="M8.72815 24.0051C8.31696 24.0051 7.9743 24.3478 7.9743 24.759C7.9743 25.1702 8.31696 25.5128 8.72815 25.5128L16.2256 25.5128C16.6368 25.5128 16.9794 25.1702 16.9794 24.759C16.9794 24.3478 16.6368 24.0051 16.2256 24.0051L8.72815 24.0051ZM8.74186 19.4957C8.33067 19.4957 7.988 19.8384 7.988 20.2496C7.988 20.6608 8.33067 21.0034 8.74186 21.0034L13.2513 21.0034C13.6625 21.0034 14.0051 20.6608 14.0051 20.2496C14.0051 19.8384 13.6625 19.4957 13.2513 19.4957L8.74186 19.4957ZM5 16.494C5 15.6716 5.67162 15 6.494 15L27.506 15C28.3284 15 29 15.6716 29 16.494L29 26.6505C29 27.6648 28.1776 28.5009 27.1496 28.5009L6.85037 28.5009C5.83609 28.5009 5 27.6785 5 26.6505L5 16.494Z"
                                fill="#FFFFFF"></path>
                            <path
                                d="M17.7242 12.4974L17.7242 6.494C17.7242 5.67162 18.3959 5 19.2182 5L23.4124 5C24.0018 5 24.5638 5.28784 24.9201 5.76756L28.9772 12.4974L28.9772 12.5385C29.0458 13.2787 28.3467 13.9366 27.6066 13.9914L19.2182 13.9914C18.3959 13.9914 17.7242 13.3198 17.7242 12.4974ZM14.7499 13.9914L6.3753 13.9914C5.63515 13.9229 4.93612 13.2787 5.00466 12.5385L5.00466 12.5248L5.00466 12.4974L9.06177 5.76756C9.40443 5.28784 9.96639 5 10.5695 5L14.7637 5C15.586 5 16.2577 5.67162 16.2577 6.494L16.2577 12.4974C16.2577 13.3198 15.586 13.9914 14.7499 13.9914Z"
                                fill="#FFFFFF"></path>
                        </svg>
                    </div>
                </div>
                <div class="item">
                    <div class="left">
                        <div style="font-size: 14px;color:rgba(102, 102, 102, 1)">总备件数量</div>
                        <div style="margin: 10px 0;">
                            <span style="font-size: 24px;font-weight: bold;margin-right: 10px;">2,548</span>
                            <span>个</span>
                        </div>
                        <div>
                            <div style="display: flex;align-items: center;">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="18" height="18" viewBox="0 0 18 18" fill="none">
                                    <path
                                        d="M15.15 5.7748L15.15 5.69982L15.15 5.62481L15.075 5.62481C15.075 5.62481 15 5.62481 14.925 5.5498L11.25 5.5498C10.875 5.5498 10.575 5.84981 10.575 6.2248C10.575 6.59982 10.875 6.8998 11.25 6.8998L13.125 6.8998L9.52501 10.4998L7.72501 8.6998C7.35 8.32481 6.60001 8.32481 6.225 8.6998L3.075 11.8498C2.85 12.0748 2.85 12.5248 3.075 12.7498C3.22501 12.8998 3.37501 12.9748 3.525 12.9748C3.67501 12.9748 3.82501 12.9748 3.975 12.7498L6.9 9.8248L8.7 11.6248C9.07501 11.9998 9.825 11.9998 10.2 11.6248L13.95 7.87481L13.95 9.74981C13.95 10.1248 14.25 10.4248 14.625 10.4248C15 10.4248 15.3 10.1248 15.3 9.74981L15.3 6.37482L15.3 6.14982L15.15 5.7748Z"
                                        fill="#00B87A"></path>
                                </svg>
                                <div>
                                    <span
                                        style="color: rgba(0, 184, 122, 1);font-size: 14px;margin: 0 5px;margin-right: 10px;">8.2%</span>
                                    <span style="color: rgba(154, 154, 154, 1);font-size: 14px;">较昨日同期</span>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34"
                            height="34" viewBox="0 0 34 34" fill="none">
                            <rect x="0" y="0" width="34" height="34" rx="4" fill="#186DF5"></rect>
                            <path
                                d="M8.72815 24.0051C8.31696 24.0051 7.9743 24.3478 7.9743 24.759C7.9743 25.1702 8.31696 25.5128 8.72815 25.5128L16.2256 25.5128C16.6368 25.5128 16.9794 25.1702 16.9794 24.759C16.9794 24.3478 16.6368 24.0051 16.2256 24.0051L8.72815 24.0051ZM8.74186 19.4957C8.33067 19.4957 7.988 19.8384 7.988 20.2496C7.988 20.6608 8.33067 21.0034 8.74186 21.0034L13.2513 21.0034C13.6625 21.0034 14.0051 20.6608 14.0051 20.2496C14.0051 19.8384 13.6625 19.4957 13.2513 19.4957L8.74186 19.4957ZM5 16.494C5 15.6716 5.67162 15 6.494 15L27.506 15C28.3284 15 29 15.6716 29 16.494L29 26.6505C29 27.6648 28.1776 28.5009 27.1496 28.5009L6.85037 28.5009C5.83609 28.5009 5 27.6785 5 26.6505L5 16.494Z"
                                fill="#FFFFFF"></path>
                            <path
                                d="M17.7242 12.4974L17.7242 6.494C17.7242 5.67162 18.3959 5 19.2182 5L23.4124 5C24.0018 5 24.5638 5.28784 24.9201 5.76756L28.9772 12.4974L28.9772 12.5385C29.0458 13.2787 28.3467 13.9366 27.6066 13.9914L19.2182 13.9914C18.3959 13.9914 17.7242 13.3198 17.7242 12.4974ZM14.7499 13.9914L6.3753 13.9914C5.63515 13.9229 4.93612 13.2787 5.00466 12.5385L5.00466 12.5248L5.00466 12.4974L9.06177 5.76756C9.40443 5.28784 9.96639 5 10.5695 5L14.7637 5C15.586 5 16.2577 5.67162 16.2577 6.494L16.2577 12.4974C16.2577 13.3198 15.586 13.9914 14.7499 13.9914Z"
                                fill="#FFFFFF"></path>
                        </svg>
                    </div>
                </div>
                <div class="item">
                    <div class="left">
                        <div style="font-size: 14px;color:rgba(102, 102, 102, 1)">总备件数量</div>
                        <div style="margin: 10px 0;">
                            <span style="font-size: 24px;font-weight: bold;margin-right: 10px;">2,548</span>
                            <span>个</span>
                        </div>
                        <div>
                            <div style="display: flex;align-items: center;">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="18" height="18" viewBox="0 0 18 18" fill="none">
                                    <path
                                        d="M15.15 5.7748L15.15 5.69982L15.15 5.62481L15.075 5.62481C15.075 5.62481 15 5.62481 14.925 5.5498L11.25 5.5498C10.875 5.5498 10.575 5.84981 10.575 6.2248C10.575 6.59982 10.875 6.8998 11.25 6.8998L13.125 6.8998L9.52501 10.4998L7.72501 8.6998C7.35 8.32481 6.60001 8.32481 6.225 8.6998L3.075 11.8498C2.85 12.0748 2.85 12.5248 3.075 12.7498C3.22501 12.8998 3.37501 12.9748 3.525 12.9748C3.67501 12.9748 3.82501 12.9748 3.975 12.7498L6.9 9.8248L8.7 11.6248C9.07501 11.9998 9.825 11.9998 10.2 11.6248L13.95 7.87481L13.95 9.74981C13.95 10.1248 14.25 10.4248 14.625 10.4248C15 10.4248 15.3 10.1248 15.3 9.74981L15.3 6.37482L15.3 6.14982L15.15 5.7748Z"
                                        fill="#00B87A"></path>
                                </svg>
                                <div>
                                    <span
                                        style="color: rgba(0, 184, 122, 1);font-size: 14px;margin: 0 5px;margin-right: 10px;">8.2%</span>
                                    <span style="color: rgba(154, 154, 154, 1);font-size: 14px;">较昨日同期</span>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34"
                            height="34" viewBox="0 0 34 34" fill="none">
                            <rect x="0" y="0" width="34" height="34" rx="4" fill="#186DF5"></rect>
                            <path
                                d="M8.72815 24.0051C8.31696 24.0051 7.9743 24.3478 7.9743 24.759C7.9743 25.1702 8.31696 25.5128 8.72815 25.5128L16.2256 25.5128C16.6368 25.5128 16.9794 25.1702 16.9794 24.759C16.9794 24.3478 16.6368 24.0051 16.2256 24.0051L8.72815 24.0051ZM8.74186 19.4957C8.33067 19.4957 7.988 19.8384 7.988 20.2496C7.988 20.6608 8.33067 21.0034 8.74186 21.0034L13.2513 21.0034C13.6625 21.0034 14.0051 20.6608 14.0051 20.2496C14.0051 19.8384 13.6625 19.4957 13.2513 19.4957L8.74186 19.4957ZM5 16.494C5 15.6716 5.67162 15 6.494 15L27.506 15C28.3284 15 29 15.6716 29 16.494L29 26.6505C29 27.6648 28.1776 28.5009 27.1496 28.5009L6.85037 28.5009C5.83609 28.5009 5 27.6785 5 26.6505L5 16.494Z"
                                fill="#FFFFFF"></path>
                            <path
                                d="M17.7242 12.4974L17.7242 6.494C17.7242 5.67162 18.3959 5 19.2182 5L23.4124 5C24.0018 5 24.5638 5.28784 24.9201 5.76756L28.9772 12.4974L28.9772 12.5385C29.0458 13.2787 28.3467 13.9366 27.6066 13.9914L19.2182 13.9914C18.3959 13.9914 17.7242 13.3198 17.7242 12.4974ZM14.7499 13.9914L6.3753 13.9914C5.63515 13.9229 4.93612 13.2787 5.00466 12.5385L5.00466 12.5248L5.00466 12.4974L9.06177 5.76756C9.40443 5.28784 9.96639 5 10.5695 5L14.7637 5C15.586 5 16.2577 5.67162 16.2577 6.494L16.2577 12.4974C16.2577 13.3198 15.586 13.9914 14.7499 13.9914Z"
                                fill="#FFFFFF"></path>
                        </svg>
                    </div>
                </div>
            </div>
            <div style="margin-top: 30px;">
                <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
                    :leave-active-class="proxy?.animate.searchAnimate.leave">
                    <div v-show="showSearch" class="mb-[10px]">
                        <el-card shadow="hover">
                            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                                <!-- 第一排：输入框 -->
                                <div style="width: 100%; margin-bottom: 10px;">
                                    <el-form-item label="备件编号" prop="beijianNumber" style="margin-right: 20px;">
                                        <el-input v-model="queryParams.beijianNumber" placeholder="请输入备件编号" clearable
                                            @keyup.enter="handleQuery" />
                                    </el-form-item>
                                    <el-form-item label="备件名称" prop="beijianName" style="margin-right: 20px;">
                                        <el-input v-model="queryParams.beijianName" placeholder="请输入备件名称" clearable
                                            @keyup.enter="handleQuery" />
                                    </el-form-item>
                                    <el-form-item label="规格型号" prop="guigexinghao">
                                        <el-input v-model="queryParams.guigexinghao" placeholder="请输入规格型号" clearable
                                            @keyup.enter="handleQuery" />
                                    </el-form-item>
                                </div>
                                <!-- 第二排：下拉框和按钮 -->
                                <div style="width: 100%;">
                                    <el-form-item label="设备类型" prop="shebeiType" style="margin-right: 20px;">
                                        <el-select v-model="queryParams.shebeiType" placeholder="请选择设备类型" clearable>
                                            <el-option v-for="dict in wz_device_type" :key="dict.value"
                                                :label="dict.label" :value="dict.value" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="库存状态" prop="kucunStatus" style="margin-right: 20px;">
                                        <el-select v-model="queryParams.kucunStatus" placeholder="请选择库存状态" clearable>
                                            <el-option v-for="dict in wz_inventory_type" :key="dict.value"
                                                :label="dict.label" :value="dict.value" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                                    </el-form-item>
                                </div>
                            </el-form>
                        </el-card>
                    </div>
                </transition>
                <el-table v-loading="loading" border :data="beipinBeijianList" style="width: 100%;margin-top: 10px;">
                    <el-table-column label="备件编号" align="center" prop="beijianNumber" />
                    <el-table-column label="备件名称" align="center" prop="beijianName" />
                    <el-table-column label="设备类型" align="center" prop="shebeiType">
                        <template #default="scope">
                            {{ getDictLabel(wz_device_type, scope.row.shebeiType) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="规格型号" align="center" prop="guigexinghao" />
                    <el-table-column label="库存数量" align="center" prop="kucunCount" />
                    <el-table-column label="库存状态" align="center" prop="kucunStatus">
                        <template #default="scope">
                            <dict-tag :options="wz_inventory_type" :value="scope.row.kucunStatus"></dict-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button type="text" @click="handleUpdate(scope.row)"
                                v-hasPermi="['personnel:beipinBeijian:edit']">编辑</el-button>
                            <el-button type="text" @click="handleDetail(scope.row)"
                                v-hasPermi="['personnel:beipinBeijian:query']">详情</el-button>
                            <el-button type="text" @click="handleDelete(scope.row)"
                                v-hasPermi="['personnel:beipinBeijian:remove']">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-section">
                    <div class="pagination-info">
                        显示第{{ (data.queryParams.pageNum - 1) * data.queryParams.pageSize + 1 }}到{{ Math.min(data.queryParams.pageNum * data.queryParams.pageSize, total) }}条，共有{{
                            total }}条记录
                    </div>
                    <div class="pagination-controls">
                          <pagination v-show="total > 0" :total="total" v-model:page="data.queryParams.pageNum"
                              v-model:limit="data.queryParams.pageSize" @pagination="getList" />
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 编辑弹窗 -->
        <el-dialog title="编辑备件信息" v-model="dialog.visible" width="50%" append-to-body>
            <el-form ref="beipinBeijianFormRef" :model="form" :rules="rules" label-width="120px"
                style="max-width: 600px;">
                <el-form-item label="备件编号" prop="beijianNumber">
                    <el-input v-model="form.beijianNumber" placeholder="请输入备件编号" />
                </el-form-item>
                <el-form-item label="备件名称" prop="beijianName">
                    <el-input v-model="form.beijianName" placeholder="请输入备件名称" />
                </el-form-item>
                <el-form-item label="规格型号" prop="guigexinghao">
                    <el-input v-model="form.guigexinghao" placeholder="请输入规格型号" />
                </el-form-item>
                <el-form-item label="库存数量" prop="kucunCount">
                    <el-input v-model="form.kucunCount" placeholder="请输入库存数量" type="number" min="0" />
                </el-form-item>
                <el-form-item label="库存状态" prop="kucunStatus">
                    <el-select v-model="form.kucunStatus" placeholder="请选择库存状态">
                        <el-option v-for="dict in wz_inventory_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备类型" prop="shebeiType">
                    <el-select v-model="form.shebeiType" placeholder="请选择设备类型">
                        <el-option v-for="dict in wz_device_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 详情弹窗 -->
        <el-dialog title="备件详情" v-model="detailDialogVisible" width="50%" append-to-body>
            <el-descriptions :column="2" border>
                <el-descriptions-item label="备件编号">{{ detailData.beijianNumber }}</el-descriptions-item>
                <el-descriptions-item label="备件名称">{{ detailData.beijianName }}</el-descriptions-item>
                <el-descriptions-item label="规格型号">{{ detailData.guigexinghao }}</el-descriptions-item>
                <el-descriptions-item label="设备类型">{{ getDictLabel(wz_device_type, detailData.shebeiType)
                    }}</el-descriptions-item>
                <el-descriptions-item label="库存数量">{{ detailData.kucunCount }}</el-descriptions-item>
                <el-descriptions-item label="库存状态">
                    <dict-tag :options="wz_inventory_type" :value="detailData.kucunStatus"></dict-tag>
                </el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeDetailDialog">关 闭</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<style scoped lang="scss">
.title {
    font-weight: bold;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 28.6px;
    color: rgba(10, 14, 26, 1);
}

.list {
    margin-top: 30px;
    display: flex;
    gap: 140px;
    justify-content: space-between;
}

.item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
}

/* 分页区域样式 */
.pagination-section {
    background-color: #fff;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-info {
    font-size: 14px;
    color: #606266;
}

.pagination-controls .el-pagination {
    margin: 0;
}

.pagination-controls .el-pagination__sizes {
    margin-right: 20px;
}

.pagination-controls .el-pagination button {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
}

.pagination-controls .el-pagination .el-pager li {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
}

.pagination-controls .el-pagination .el-pager li.active {
    background-color: #409eff;
    color: #fff;
}

/* 详情弹窗样式 */
.detail-container {
    padding: 20px 0;
}

.detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.detail-label {
    width: 120px;
    font-weight: 500;
    color: #303133;
    margin-right: 20px;
}

.detail-value {
    flex: 1;
    color: #606266;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
}
</style>
<script setup lang="ts">
import { ref, computed } from 'vue';
import TitleComponent from '@/components/TitleComponent/index.vue';


// 导入用户store
import { useUserStore } from '@/store/modules/user';
// 获取用户store
const userStore = useUserStore();

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

import { listBeipinBeijian, getBeipinBeijian, delBeipinBeijian, updateBeipinBeijian } from '@/api/wuziguanli/beijian';
import { BeipinBeijianVO, BeipinBeijianQuery, BeipinBeijianForm } from '@/api/wuziguanli/beijian/types';


const { wz_inventory_type, wz_device_type } = toRefs<any>(proxy?.useDict('wz_inventory_type', 'wz_spareparts_type', 'wz_device_type'));

const beipinBeijianList = ref<BeipinBeijianVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const total = ref(0);
// 详情相关数据
const detailData = ref<BeipinBeijianVO>({
    id: undefined,
    projectId: undefined,
    beijianNumber: undefined,
    beijianName: undefined,
    shebeiType: undefined,
    guigexinghao: undefined,
    kucunStatus: undefined,
    kucunCount: undefined,
});
const detailDialogVisible = ref(false);

const queryFormRef = ref<ElFormInstance>();
const beipinBeijianFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
});

const initFormData: BeipinBeijianForm = {
    id: undefined,
    projectId: undefined,
    beijianNumber: undefined,
    beijianName: undefined,
    shebeiType: undefined,
    guigexinghao: undefined,
    kucunStatus: undefined,
    kucunCount: undefined,
}

const data = reactive<PageData<BeipinBeijianForm, BeipinBeijianQuery>>({
    form: { ...initFormData },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: undefined,
        beijianNumber: undefined,
        beijianName: undefined,
        shebeiType: undefined,
        guigexinghao: undefined,
        kucunStatus: undefined,
        kucunCount: undefined,
        params: {
        }
    },
    rules: {
        beijianName: [
            { required: true, message: "备件名称不能为空", trigger: "blur" }
        ],
        shebeiType: [
            { required: true, message: "设备类型不能为空", trigger: "change" }
        ],
        guigexinghao: [
            { required: true, message: "规格型号不能为空", trigger: "blur" }
        ],
        kucunStatus: [
            { required: true, message: "库存状态不能为空", trigger: "change" }
        ],
        kucunCount: [
            { required: true, message: "库存数量不能为空", trigger: "blur" }
        ],
    }
});

const { queryParams, form, rules } = toRefs(data);

// 根据字典值获取标签信息的辅助函数
const getDictLabel = (dictType, value) => {
    // 健壮性检查
    if (!value || !dictType || !Array.isArray(dictType)) {
        return value;
    }

    // 使用find方法更高效地查找匹配项
    const option = dictType.find(item => item?.value === value);

    // 如果找到匹配项，返回标签，否则返回原始值
    return option?.label || value;
};

/** 查询运维-物资-备品配件列表 */
const getList = async () => {
    loading.value = true;
    try {
        const res = await listBeipinBeijian(queryParams.value);
        beipinBeijianList.value = res.rows;
        total.value = res.total;
    } catch (error) {
        proxy?.$modal.msgError('获取数据失败，请重试');
    } finally {
        loading.value = false;
    }
}

/** 取消按钮 */
const cancel = () => {
    reset();
    dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
    form.value = { ...initFormData };
    beipinBeijianFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
}

/** 修改按钮操作 */
const handleUpdate = async (row?: BeipinBeijianVO) => {
    reset();
    const _id = row?.id || ids.value[0];
    if (!_id) {
        proxy?.$modal.msgWarning('请选择需要编辑的数据');
        return;
    }
    try {
        const res = await getBeipinBeijian(_id);
        Object.assign(form.value, res.data);
        dialog.visible = true;
    } catch (error) {
        proxy?.$modal.msgError('获取数据失败，请重试');
    }
}

/** 详情按钮操作 */
const handleDetail = async (row?: BeipinBeijianVO) => {
    const _id = row?.id || ids.value[0];
    if (!_id) {
        proxy?.$modal.msgWarning('请选择需要查看的数据');
        return;
    }
    try {
        const res = await getBeipinBeijian(_id);
        detailData.value = res.data;
        detailDialogVisible.value = true;
    } catch (error) {
        proxy?.$modal.msgError('获取数据失败，请重试');
    }
}

/** 关闭详情弹窗 */
const closeDetailDialog = () => {
    detailDialogVisible.value = false;
}

/** 提交按钮 */
const submitForm = () => {
    beipinBeijianFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            buttonLoading.value = true;
            try {
                if (form.value.id) {
                    await updateBeipinBeijian(form.value);
                }
                proxy?.$modal.msgSuccess("操作成功");
                dialog.visible = false;
                await getList();
            } catch (error) {
                proxy?.$modal.msgError('操作失败，请重试');
            } finally {
                buttonLoading.value = false;
            }
        }
    });
}

/** 删除按钮操作 */
const handleDelete = async (row?: BeipinBeijianVO) => {
    const _ids = row?.id || ids.value;
    if (!_ids || (_ids instanceof Array && _ids.length === 0)) {
        proxy?.$modal.msgWarning('请选择需要删除的数据');
        return;
    }
    try {
        await proxy?.$modal.confirm('是否确认删除运维-物资-备品配件编号为"' + _ids + '"的数据项？');
        loading.value = true;
        await delBeipinBeijian(_ids);
        proxy?.$modal.msgSuccess("删除成功");
        await getList();
    } catch (error) {
        // 如果是用户取消确认，则不显示错误信息
        if (error !== 'cancel') {
            proxy?.$modal.msgError('删除失败，请重试');
        }
    } finally {
        loading.value = false;
    }
}


// 监听用户选择的项目变化
watch(() => userStore.selectedProject, (newProject) => {
    if (newProject && newProject.id) {
        queryParams.value.projectId = newProject.id;
        // 只在新增表单时设置projectId，编辑表单保留原有值
        if (!form.value.id) {
            form.value.projectId = newProject.id;
        }
        // 调用getList刷新数据
        getList();
    }
}, { immediate: true, deep: true });


onMounted(() => {
    getList();
});

// 组件卸载时清空projectId
onUnmounted(() => {
    queryParams.value.projectId = undefined;
    form.value.projectId = undefined;
});
</script>