<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;">
                <div class="menu" style="background-color: #F2F2F2; padding: 20px;">
                    <el-row :gutter="30">
                        <el-col :span="3">
                            <el-input placeholder="请输入备件名称"></el-input>
                        </el-col>
                        <el-col :span="3">
                            <el-select placeholder="备件类别">
                                <el-option v-for="option in wz_spareparts_type" :key="option.value" :label="option.label" :value="option.value" />
                            </el-select>
                        </el-col>
                        <el-col :span="3">
                            <el-select placeholder="库存状态">
                                <el-option v-for="option in wz_inventory_type" :key="option.value" :label="option.label" :value="option.value" />
                            </el-select>
                        </el-col>
                        <el-col :span="8">
                            <el-button icon="search" type="primary">搜索</el-button>
                            <el-button icon="refresh">重置</el-button>
                        </el-col>
                    </el-row>
                </div>
                <el-table :data="pagedTableData" border style="width: 100%;margin-top: 10px;">
                    <el-table-column prop="backupNumber" label="备件编号" align="center" />
                    <el-table-column prop="backupName" label="备件名称" align="center" />
                    <el-table-column prop="backType" label="备件类型" align="center" />
                    <el-table-column prop="specificationModel" label="规格型号" align="center" />
                    <el-table-column prop="safetyStockStatus" label="安全库存数量" align="center" />
                    <el-table-column prop="inventoryQuantity" label="库存数量" align="center" />
                    <el-table-column label="库存状态" align="center">
                        <template #default="scope">
                            <el-tag :type="getTagType(scope.row.inventoryStatus)">
                                {{ scope.row.inventoryStatus }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-section">
                    <div class="pagination-info">
                        显示第{{ (currentPage - 1) * pageSize + 1 }}到{{ Math.min(currentPage * pageSize, total) }}条，共有{{
                            total }}条记录
                    </div>
                    <div class="pagination-controls">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="total" background>
                        </el-pagination>
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 编辑弹窗 -->
        <el-dialog
            v-model="editDialogVisible"
            title="编辑备件信息"
            width="50%"
            @close="handleEditClose"
        >
            <el-form
                ref="editFormRef"
                :model="editForm"
                label-width="120px"
                style="max-width: 600px;"
            >
                <el-form-item label="备件编号" prop="backupNumber">
                    <el-input v-model="editForm.backupNumber" disabled />
                </el-form-item>
                <el-form-item label="备件名称" prop="backupName">
                    <el-input v-model="editForm.backupName" />
                </el-form-item>
                <el-form-item label="备件类型" prop="backType">
                    <el-input v-model="editForm.backType" />
                </el-form-item>
                <el-form-item label="规格型号" prop="specificationModel">
                    <el-input v-model="editForm.specificationModel" />
                </el-form-item>
                <el-form-item label="库存状态" prop="inventoryStatus">
                    <el-select v-model="editForm.inventoryStatus">
                         <el-option v-for="option in wz_inventory_type" :key="option.value" :label="option.label" :value="option.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="库存数量" prop="inventoryQuantity">
                    <el-input v-model="editForm.inventoryQuantity" />
                </el-form-item>
                <el-form-item label="安全库存数量" prop="safetyStockStatus">
                    <el-input v-model="editForm.safetyStockStatus" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveEdit">保存</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 详情弹窗 -->
        <el-dialog
            v-model="detailDialogVisible"
            title="备件详情"
            width="50%"
            @close="handleDetailClose"
        >
            <div class="detail-container">
                <div class="detail-item">
                    <div class="detail-label">备件编号：</div>
                    <div class="detail-value">{{ currentRow.backupNumber }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">备件名称：</div>
                    <div class="detail-value">{{ currentRow.backupName }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">备件类型：</div>
                    <div class="detail-value">{{ currentRow.backType }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">规格型号：</div>
                    <div class="detail-value">{{ currentRow.specificationModel }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">库存状态：</div>
                    <div class="detail-value">
                        <el-tag :type="getTagType(currentRow.inventoryStatus)">
                            {{ currentRow.inventoryStatus }}
                        </el-tag>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">库存数量：</div>
                    <div class="detail-value">{{ currentRow.inventoryQuantity }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">安全库存数量：</div>
                    <div class="detail-value">{{ currentRow.safetyStockStatus }}</div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="detailDialogVisible = false">关闭</el-button>
                </span>
            </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';
import { ElMessage, ElMessageBox } from 'element-plus';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { wz_inventory_type,wz_spareparts_type} = toRefs<any>(proxy?.useDict('wz_inventory_type','wz_spareparts_type'));


// 计算属性：根据当前页码和每页条数获取分页后的数据
const tableData = ref([
    {
        backupNumber: 'SOL-2023-001',
        backupName: '光伏逆变器模块',
        backType: '光伏设备',
        specificationModel: 'SGGKTL-M',
        inventoryStatus: '正常',
        inventoryQuantity: '5个',
        safetyStockStatus: '12个'
    },
    {
        backupNumber: 'SOL-2023-001',
        backupName: '光伏逆变器模块',
        backType: '光伏设备',
        specificationModel: 'SGGKTL-M',
        inventoryStatus: '正常',
        inventoryQuantity: '5个',
        safetyStockStatus: '12个'
    },
    {
        backupNumber: 'SOL-2023-001',
        backupName: '光伏逆变器模块',
        backType: '光伏设备',
        specificationModel: 'SGGKTL-M',
        inventoryStatus: '正常',
        inventoryQuantity: '5个',
        safetyStockStatus: '12个'
    },
    {
        backupNumber: 'SOL-2023-001',
        backupName: '光伏逆变器模块',
        backType: '光伏设备',
        specificationModel: 'SGGKTL-M',
        inventoryStatus: '正常',
        inventoryQuantity: '5个',
        safetyStockStatus: '12个'
    },
    {
        backupNumber: 'WIN-2023-045',
        backupName: '风力发电机轴承',
        backType: '风电设备',
        specificationModel: '6318-2RS1/C3',
        inventoryStatus: '低库存',
        inventoryQuantity: '5套',
        safetyStockStatus: '3套'
    },
    {
        backupNumber: 'SOL-2023-001',
        backupName: '光伏逆变器模块',
        backType: '光伏设备',
        specificationModel: 'SGGKTL-M',
        inventoryStatus: '正常',
        inventoryQuantity: '5个',
        safetyStockStatus: '12个'
    },
    {
        backupNumber: 'WIN-2023-045',
        backupName: '风力发电机轴承',
        backType: '风电设备',
        specificationModel: '6318-2RS1/C3',
        inventoryStatus: '低库存',
        inventoryQuantity: '5套',
        safetyStockStatus: '3套'
    },
    {
        backupNumber: 'WIN-2023-045',
        backupName: '风力发电机轴承',
        backType: '风电设备',
        specificationModel: '6318-2RS1/C3',
        inventoryStatus: '缺货',
        inventoryQuantity: '2套',
        safetyStockStatus: '0套'
    },
    {
        backupNumber: 'WIN-2023-045',
        backupName: '风力发电机轴承',
        backType: '风电设备',
        specificationModel: '6318-2RS1/C3',
        inventoryStatus: '低库存',
        inventoryQuantity: '5套',
        safetyStockStatus: '3套'
    },
    {
        backupNumber: 'WIN-2023-045',
        backupName: '风力发电机轴承',
        backType: '风电设备',
        specificationModel: '6318-2RS1/C3',
        inventoryStatus: '低库存',
        inventoryQuantity: '5套',
        safetyStockStatus: '3套'
    },
    {
        backupNumber: 'WIN-2023-045',
        backupName: '风力发电机轴承',
        backType: '风电设备',
        specificationModel: '6318-2RS1/C3',
        inventoryStatus: '3套',
        inventoryQuantity: '5套',
        safetyStockStatus: '低库存'
    }
])
// 当前页码
const currentPage = ref(1);
// 每页条数 - 与分页控件默认值保持一致
const pageSize = ref(10);
// 总条数 - 从原始数据计算得出
const total = ref(tableData.value.length);
const pagedTableData = computed(() => {
    const startIndex = (currentPage.value - 1) * pageSize.value;
    const endIndex = startIndex + pageSize.value;
    return tableData.value.slice(startIndex, endIndex);
});
// 当前页码改变
const handleCurrentChange = (val) => {
    currentPage.value = val;
};

// 根据安全库存状态获取标签类型
const getTagType = (status) => {
    if (status === '正常') {
        return 'success'
    } else if (status === '低库存') {
        return 'warning'
    } else if (status === '缺货') {
        return 'danger'
    }
    return ''
}

// 编辑相关状态
const editDialogVisible = ref(false);
const editForm = ref({
    backupNumber: '',
    backupName: '',
    backType: '',
    specificationModel: '',
    inventoryStatus: '',
    inventoryQuantity: '',
    safetyStockStatus: ''
});
const editFormRef = ref(null);

// 详情相关状态
const detailDialogVisible = ref(false);
const currentRow = ref({
    backupNumber: '',
    backupName: '',
    backType: '',
    specificationModel: '',
    inventoryStatus: '',
    inventoryQuantity: '',
    safetyStockStatus: ''
});

// 模拟API调用函数
const mockApiCall = (success = true) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (success) {
                resolve({ success: true });
            } else {
                reject({ success: false, message: '操作失败，请稍后重试' });
            }
        }, 500);
    });
};

// 编辑操作方法
const handleEdit = (row) => {
    // 深拷贝当前行数据到编辑表单
    editForm.value = JSON.parse(JSON.stringify(row));
    editDialogVisible.value = true;
};

// 保存编辑
const saveEdit = async () => {
    try {
        // 模拟API调用
        await mockApiCall();
        editDialogVisible.value = false;
        ElMessage.success('编辑成功');
        // 这里应该刷新数据，但由于是模拟数据，暂时不处理
    } catch (error) {
        ElMessage.error(error.message || '编辑失败');
    }
};

// 关闭编辑弹窗
const handleEditClose = () => {
    editForm.value = {};
};

// 详情操作方法
const handleDetail = (row) => {
    currentRow.value = row;
    detailDialogVisible.value = true;
};

// 关闭详情弹窗
const handleDetailClose = () => {
    currentRow.value = {};
};

// 删除操作方法
const handleDelete = async (row) => {
    try {
        await ElMessageBox.confirm(
            `确定要删除备件 ${row.backupName} 吗？`,
            '确认删除',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        // 模拟API调用
        await mockApiCall();
        ElMessage.success('删除成功');
        // 从表格数据中移除该记录
        const index = tableData.value.findIndex(item => item.backupNumber === row.backupNumber);
        if (index !== -1) {
            tableData.value.splice(index, 1);
            total.value = tableData.value.length;
            // 如果删除的是当前页的最后一条数据，且当前页不是第一页，则切换到上一页
            if (pagedTableData.value.length === 0 && currentPage.value > 1) {
                currentPage.value--;
            }
        }
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error(error.message || '删除失败');
        }
    }
};
</script>