<template>
  <div class="app-container">
    <!-- 数据统计卡片 -->
    <div class="statistics-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon pending">
                <i class="el-icon-time"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.pending }}</div>
                <div class="stat-label">待审核</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon approved">
                <i class="el-icon-check"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.approved }}</div>
                <div class="stat-label">已通过</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon rejected">
                <i class="el-icon-close"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.rejected }}</div>
                <div class="stat-label">已拒绝</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-icon total">
                <i class="el-icon-data-line"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ statistics.total }}</div>
                <div class="stat-label">总申请数</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 搜索表单 -->
    <el-card class="search-card" shadow="hover">
      <div class="search-header">
        <div class="search-title">
          <i class="el-icon-search"></i>
          <span>筛选条件</span>
        </div>
        <el-button type="text" @click="toggleSearch">
          {{ showSearch ? '收起' : '展开' }}
          <i :class="showSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
        </el-button>
      </div>

      <el-collapse-transition>
        <el-form v-show="showSearch" :model="queryParams" ref="queryForm" :inline="true" label-width="80px"
          class="search-form">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="公司名称" prop="companyName">
                <el-input v-model="queryParams.companyName" placeholder="请输入公司名称" clearable
                  prefix-icon="el-icon-office-building" class="search-input" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="提交单号" prop="applicationNumber">
                <el-input v-model="queryParams.applicationNumber" placeholder="请输入提交单号" clearable
                  prefix-icon="el-icon-document" class="search-input" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="申请数量" prop="applyQuantity">
                <el-input v-model="queryParams.applyQuantity" placeholder="请输入申请数量" clearable
                  prefix-icon="el-icon-s-data" class="search-input" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="审核状态" prop="auditStatus">
                <el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态" clearable class="search-select">
                  <el-option label="待审核" value="0" />
                  <el-option label="审核通过" value="1" />
                  <el-option label="审核拒绝" value="2" />
                  <el-option label="部分分配" value="3" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="提交时间" prop="submitTime">
                <el-date-picker clearable v-model="queryParams.submitTime" type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择提交时间" class="search-date">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="审核时间" prop="reviewTime">
                <el-date-picker clearable v-model="queryParams.reviewTime" type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择审核时间" class="search-date">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实际分配" prop="allocatedQuantity">
                <el-input v-model="queryParams.allocatedQuantity" placeholder="请输入实际分配数量" clearable
                  prefix-icon="el-icon-s-marketing" class="search-input" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery" class="search-btn">
                  搜索
                </el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery" class="reset-btn">
                  重置
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-transition>
    </el-card>

    <!-- 批量操作工具栏 -->
    <div class="batch-toolbar" v-show="selectedRows.length > 0">
      <el-card class="batch-card" shadow="hover">
        <div class="batch-content">
          <div class="batch-info">
            <i class="el-icon-warning-outline"></i>
            <span>已选择 {{ selectedRows.length }} 项</span>
          </div>
          <div class="batch-actions">
            <el-button size="small" @click="batchApprove" v-if="canBatchApprove" type="success">
              <i class="el-icon-check"></i> 批量通过
            </el-button>
            <el-button size="small" @click="batchReject" v-if="canBatchReject" type="danger">
              <i class="el-icon-close"></i> 批量拒绝
            </el-button>
            <el-button size="small" @click="handleBatchSync" type="warning">
              <i class="el-icon-refresh"></i> 批量同步
            </el-button>
            <el-button size="small" @click="clearSelection">
              <i class="el-icon-close"></i> 清空选择
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 操作按钮区域 -->
    <el-card class="action-card" shadow="never">
      <div class="action-bar">
        <div class="action-group">
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd" class="action-btn"
            >
            申请iPad
          </el-button>

          <el-button type="success" icon="el-icon-edit" @click="handleUpdate" :disabled="single" class="action-btn"
            >
            修改
          </el-button>

          <el-dropdown @command="handleBatchCommand" class="action-dropdown">
            <el-button type="warning" class="action-btn">
              批量操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="sync">
                批量同步
              </el-dropdown-item>
              <el-dropdown-item command="export">
                导出数据
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div class="action-right">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </div>
      </div>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card" shadow="hover">
      <el-table border v-loading="loading" :data="recordsList" @selection-change="handleSelectionChange"
        class="modern-table" :header-cell-class-name="headerCellClass" :cell-class-name="cellClass"
        @row-click="handleRowClick">

        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="公司名称" align="center" prop="companyName" min-width="150">
          <template slot-scope="scope">
            <div class="company-name">
              <i class="el-icon-office-building"></i>
              {{ scope.row.companyName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="申请数量" align="center" prop="applyQuantity" width="100">
          <template slot-scope="scope">
            <el-tag type="info" effect="plain">{{ scope.row.applyQuantity }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="实际分配数量" align="center" prop="allocatedQuantity" width="120">
          <template slot-scope="scope">
            <el-tag type="success" effect="plain">{{ scope.row.allocatedQuantity || 0 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" align="center" prop="submitTime" width="180">
          <template slot-scope="scope">
            <div class="time-info">
              <i class="el-icon-time"></i>
              <span>{{ parseTime(scope.row.submitTime) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审核时间" align="center" prop="reviewTime" width="180">
          <template slot-scope="scope">
            <div class="time-info" v-if="scope.row.reviewTime">
              <i class="el-icon-check"></i>
              <span>{{ parseTime(scope.row.reviewTime) }}</span>
            </div>
            <span v-else class="no-data">-</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" align="center" prop="auditStatus" width="120">
          <template slot-scope="scope">
            <div class="status-wrapper">
              <el-tag :class="getStatusClass(scope.row.auditStatus)"
                :effect="scope.row.auditStatus === 1 ? 'dark' : 'light'">
                <i :class="getStatusIcon(scope.row.auditStatus)"></i>
                {{ getStatusText(scope.row.auditStatus) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="拒绝原因" align="center" prop="rejectionReason" min-width="150">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.rejectionReason" placement="top" v-if="scope.row.rejectionReason">
              <span class="rejection-reason">{{ scope.row.rejectionReason }}</span>
            </el-tooltip>
            <span v-else class="no-data">-</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="180" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-tooltip content="同步数据" placement="top">
                <el-button type="text" icon="el-icon-refresh" class="action-icon-btn sync-btn"
                  @click="handleSingleSync(scope.row)" />
              </el-tooltip>

              <el-tooltip content="释放管理" placement="top"
                v-if="scope.row.auditStatus == 1 || scope.row.auditStatus == 3">
                <el-button type="text" icon="el-icon-unlock" class="action-icon-btn release-btn"
                  @click="handleRelease(scope.row)" />
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" class="pagination-wrapper" />
    </el-card>

    <!-- 申请iPad对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" :close-on-click-modal="false"
      custom-class="modern-dialog" append-to-body>
      <div class="dialog-content">
        <div class="form-header">
          <i class="el-icon-mobile-phone"></i>
          <span>请填写申请信息</span>
        </div>

        <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="modern-form">
          <el-form-item label="申请地区" prop="area">
            <el-input v-model="form.area" placeholder="请输入申请地区，如：广州、上海、重庆、北京等"
              prefix-icon="el-icon-location" class="area-input" />
            <div class="form-tip">
              <i class="el-icon-info"></i>
              请填写申请iPad使用的地区
            </div>
          </el-form-item>
          <el-form-item label="申请数量" prop="applyQuantity">
            <el-input-number v-model="form.applyQuantity" :min="1" :max="100" controls-position="right"
              class="number-input" placeholder="请输入申请数量" />
            <div class="form-tip">
              <i class="el-icon-info"></i>
              建议根据实际需求申请合理数量
            </div>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="cancel-btn">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="submitting" class="confirm-btn">
          {{ submitting ? '提交中...' : '确定申请' }}
        </el-button>
      </div>
    </el-dialog>

    <!-- 释放信息抽屉 -->
    <el-drawer title="服务器分配信息" :visible.sync="releaseOpen" direction="rtl" size="70%" :before-close="handleDrawerClose"
      custom-class="modern-drawer">
      <div class="drawer-content">
        <el-table :data="serverInfoList" border v-loading="releaseLoading" class="server-table">
          <el-table-column label="访问地址" align="center" prop="accessUrl" min-width="200">
            <template slot-scope="scope">
              <a :href="scope.row.accessUrl" target="_blank" class="access-url">
                <i class="el-icon-link"></i>
                {{ scope.row.accessUrl }}
              </a>
            </template>
          </el-table-column>
          <el-table-column label="已分配座位数" align="center" prop="allocatedSeats" width="120">
            <template slot-scope="scope">
              <el-tag type="primary">{{ scope.row.allocatedSeats }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="分配时间" align="center" prop="allocatedTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.allocatedTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="分配状态" align="center" prop="allocationStatus" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.allocationStatus === 1 ? 'success' : 'info'">
                {{ scope.row.allocationStatus === 1 ? '有效' : '已释放' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="IP地址" align="center" prop="ipAddress" width="120" />
          <el-table-column label="端口" align="center" prop="port" width="80" />
          <el-table-column label="地区" align="center" prop="region" width="100" />
          <el-table-column label="创建时间" align="center" prop="createdTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createdTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleReleaseSeats(scope.row)"
                :disabled="scope.row.allocationStatus !== 1" class="release-seats-btn">
                释放座位
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>

    <!-- 释放座位数量输入弹窗 -->
    <el-dialog title="释放座位" :visible.sync="releaseSeatsOpen" width="400px" custom-class="release-dialog" append-to-body>
      <el-form :model="releaseForm" :rules="releaseRules" ref="releaseForm" label-width="100px">
        <el-form-item label="释放数量" prop="releaseCount">
          <el-input-number v-model="releaseForm.releaseCount" :min="1" :max="releaseForm.maxSeats" placeholder="请输入释放数量"
            controls-position="right" style="width: 100%" />
          <div class="form-tip">
            <i class="el-icon-info"></i>
            最大可释放数量：{{ releaseForm.maxSeats }}
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="releaseSeatsOpen = false">取 消</el-button>
        <el-button type="primary" @click="submitReleaseSeats()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listRecords, getServerInfo, getRecords, delRecords, release, updateRecords, exportRecords, apply, batchUpdate } from "@/api/qw/applyIpad";

export default {
  name: "Records",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 提交状态
      submitting: false,
      // 选中数组
      ids: [],
      // 选中的行数据
      selectedRows: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 分配记录表格数据
      recordsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyId: null,
        companyName: null,
        applicationNumber: null,
        applyQuantity: null,
        allocatedQuantity: null,
        submitTime: null,
        reviewTime: null,
        auditStatus: null,
        rejectionReason: null,
        createdTime: null,
        updatedTime: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        area: [
          { required: true, message: "申请地区不能为空", trigger: "blur" }
        ],
        applyQuantity: [
          { required: true, message: "申请数量不能为空", trigger: "blur" },
          { pattern: /^[1-9]\d*$/, message: "申请数量必须为正整数", trigger: "blur" }
        ]
      },
      // 释放抽屉显示状态
      releaseOpen: false,
      // 释放信息加载状态
      releaseLoading: false,
      // 服务器信息列表
      serverInfoList: [],
      // 释放座位弹窗显示状态
      releaseSeatsOpen: false,
      // 释放座位表单
      releaseForm: {
        releaseCount: null,
        maxSeats: 0,
        currentServer: null
      },
      // 释放座位表单校验规则
      releaseRules: {
        releaseCount: [
          { required: true, message: "释放数量不能为空", trigger: "blur" },
          { type: 'number', min: 1, message: "释放数量必须大于0", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value > this.releaseForm.maxSeats) {
                callback(new Error(`释放数量不能超过${this.releaseForm.maxSeats}`));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      },
      // 当前选中的申请记录ID
      currentRecordId: null,
      // 统计数据
      statistics: {
        pending: 0,
        approved: 0,
        rejected: 0,
        total: 0
      }
    };
  },
  computed: {
    // 是否可以批量审核通过
    canBatchApprove() {
      return this.selectedRows.some(row => row.auditStatus === 0);
    },
    // 是否可以批量审核拒绝
    canBatchReject() {
      return this.selectedRows.some(row => row.auditStatus === 0);
    }
  },
  created() {
    this.getList();
    this.calculateStatistics();
    // 添加键盘事件监听
    document.addEventListener('keydown', this.handleKeydown);
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.handleKeydown);
  },
  methods: {
    /** 查询分配记录列表 */
    getList() {
      this.loading = true;
      listRecords(this.queryParams).then(response => {
        this.recordsList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.calculateStatistics();
      });
    },

    /** 计算统计数据 */
    calculateStatistics() {
      this.statistics = {
        pending: this.recordsList.filter(item => item.auditStatus === 0).length,
        approved: this.recordsList.filter(item => item.auditStatus === 1).length,
        rejected: this.recordsList.filter(item => item.auditStatus === 2).length,
        total: this.recordsList.length
      };
    },

    /** 键盘事件处理 */
    handleKeydown(e) {
      // Ctrl + N: 新建申请
      if (e.ctrlKey && e.key === 'n') {
        e.preventDefault();
        this.handleAdd();
      }
      // Ctrl + E: 导出数据
      if (e.ctrlKey && e.key === 'e') {
        e.preventDefault();
        this.handleExport();
      }
      // F5: 刷新数据
      if (e.key === 'F5') {
        e.preventDefault();
        this.getList();
      }
    },

    /** 切换搜索显示 */
    toggleSearch() {
      this.showSearch = !this.showSearch;
    },

    /** 表格头部样式 */
    headerCellClass({ row, column, rowIndex, columnIndex }) {
      return 'modern-header';
    },

    /** 表格单元格样式 */
    cellClass({ row, column, rowIndex, columnIndex }) {
      return 'modern-cell';
    },

    /** 行点击事件 */
    handleRowClick(row, column, event) {
      // 可以添加行点击后的处理逻辑
    },

    /** 获取状态样式类 */
    getStatusClass(status) {
      const statusMap = {
        0: 'status-pending',
        1: 'status-approved',
        2: 'status-rejected',
        3: 'status-partial'
      };
      return statusMap[status] || '';
    },

    /** 获取状态图标 */
    getStatusIcon(status) {
      const iconMap = {
        0: 'el-icon-time',
        1: 'el-icon-check',
        2: 'el-icon-close',
        3: 'el-icon-warning'
      };
      return iconMap[status] || 'el-icon-question';
    },

    /** 获取状态文本 */
    getStatusText(status) {
      const textMap = {
        0: '待审核',
        1: '审核通过',
        2: '审核拒绝',
        3: '部分分配'
      };
      return textMap[status] || '-';
    },

    /** 批量命令处理 */
    handleBatchCommand(command) {
      if (command === 'sync') {
        this.handleBatchSync();
      } else if (command === 'export') {
        this.handleExport();
      }
    },

    /** 批量审核通过 */
    batchApprove() {
      const pendingRows = this.selectedRows.filter(row => row.auditStatus === 0);
      if (pendingRows.length === 0) {
        this.msgWarning('没有可审核通过的记录');
        return;
      }

      this.$confirm(`确认审核通过选中的 ${pendingRows.length} 条记录？`, '批量审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里调用批量审核通过的API
        this.msgSuccess('批量审核通过成功');
        this.getList();
      });
    },

    /** 批量审核拒绝 */
    batchReject() {
      const pendingRows = this.selectedRows.filter(row => row.auditStatus === 0);
      if (pendingRows.length === 0) {
        this.msgWarning('没有可审核拒绝的记录');
        return;
      }

      this.$confirm(`确认审核拒绝选中的 ${pendingRows.length} 条记录？`, '批量审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里调用批量审核拒绝的API
        this.msgSuccess('批量审核拒绝成功');
        this.getList();
      });
    },

    /** 清空选择 */
    clearSelection() {
      this.$refs.multipleTable && this.$refs.multipleTable.clearSelection();
      this.selectedRows = [];
      this.ids = [];
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        area: null,
        applyQuantity: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.selectedRows = selection;
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "申请iPad";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getRecords(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改分配记录";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.submitting = true;
          // 调用apply接口，传递申请数量和地区作为参数对象
          apply({
            applyCount: this.form.applyQuantity,
            area: this.form.area
          }).then(response => {
            this.msgSuccess("申请成功");
            this.open = false;
            this.getList();
          }).catch(() => {
            // this.msgError("申请失败");
          }).finally(() => {
            this.submitting = false;
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除分配记录编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delRecords(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有分配记录数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportRecords(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => { });
    },
    /** 单个同步按钮操作 */
    handleSingleSync(row) {
      const id = row.id;
      this.$confirm('是否确认同步编号为"' + id + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return batchUpdate([id]);
      }).then(() => {
        this.getList();
        this.msgSuccess("同步成功");
      }).catch(() => { });
    },
    /** 批量同步按钮操作 */
    handleBatchSync() {
      const ids = this.ids;
      this.$confirm('是否确认同步选中的' + ids.length + '条数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return batchUpdate(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("批量同步成功");
      }).catch(() => { });
    },
    /** 释放按钮操作 */
    handleRelease(row) {
      this.releaseLoading = true;
      this.releaseOpen = true;
      this.serverInfoList = [];
      this.currentRecordId = row.id;

      // 调用getServerInfo接口获取服务器信息
      getServerInfo(row.id).then(response => {
        this.serverInfoList = response.data || [];
        this.releaseLoading = false;
      }).catch(error => {
        this.releaseLoading = false;
        this.msgError("获取服务器信息失败");
      });
    },

    /** 抽屉关闭处理 */
    handleDrawerClose(done) {
      this.releaseOpen = false;
      done();
    },

    /** 释放座位按钮操作 */
    handleReleaseSeats(server) {
      this.releaseForm = {
        releaseCount: null,
        maxSeats: server.allocatedSeats || 0,
        currentServer: server
      };

      this.releaseSeatsOpen = true;
      this.$nextTick(() => {
        this.$refs.releaseForm && this.$refs.releaseForm.clearValidate();
      });
    },

    /** 提交释放座位 */
    submitReleaseSeats() {
      this.$refs.releaseForm.validate(valid => {
        if (valid) {
          // 根据后端ServerParam类结构组装参数
          const params = {
            ipadServerId: this.releaseForm.currentServer.ipadRecordId, // 服务器ID
            recordId: this.currentRecordId,                 // 记录ID
            releaseCount: this.releaseForm.releaseCount,    // 释放数量
            ipAddress: this.releaseForm.currentServer.ipAddress, // iPad地址
            port: this.releaseForm.currentServer.port       // 端口号
          };

          // 调用release接口
          release(params).then(response => {
            this.msgSuccess("释放成功");
            this.releaseSeatsOpen = false;
            // 重新加载服务器信息
            this.handleRelease({ id: this.currentRecordId });
          }).catch(error => {
            this.msgError("释放失败");
          });
        }
      });
    },

    /** 重置释放座位表单 */
    resetReleaseForm() {
      this.releaseForm = {
        releaseCount: null,
        maxSeats: 0,
        currentServer: null
      };
      this.$refs.releaseForm && this.$refs.releaseForm.clearValidate();
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background: #f0f2f5;
  min-height: calc(100vh - 84px);
}

// 统计卡片样式
.statistics-cards {
  margin-bottom: 20px;

  .stat-card {
    border-radius: 12px;
    border: none;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .stat-content {
      display: flex;
      align-items: center;
      padding: 10px;

      .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        font-size: 24px;
        color: white;

        &.pending {
          background: #409eff;
        }

        &.approved {
          background: #67c23a;
        }

        &.rejected {
          background: #f56c6c;
        }

        &.total {
          background: #909399;
        }
      }

      .stat-info {
        flex: 1;

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: #2c3e50;
          line-height: 1;
        }

        .stat-label {
          font-size: 14px;
          color: #7f8c8d;
          margin-top: 5px;
        }
      }
    }
  }
}

// 搜索卡片样式
.search-card {
  border-radius: 12px;
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  }

  .search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 20px;

    .search-title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;

      i {
        margin-right: 8px;
        color: #409eff;
      }
    }
  }

  .search-form {

    .search-input,
    .search-select,
    .search-date {
      width: 100%;
    }

    .search-btn,
    .reset-btn {
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .search-btn:hover {
      background-color: #66b1ff;
    }

    .reset-btn:hover {
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
  }
}

// 批量操作工具栏
.batch-toolbar {
  margin-bottom: 20px;

  .batch-card {
    border-radius: 12px;
    border: none;
    background: #fdf6ec;

    .batch-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .batch-info {
        display: flex;
        align-items: center;
        color: #f39c12;
        font-weight: 500;

        i {
          margin-right: 8px;
          font-size: 18px;
        }
      }

      .batch-actions {
        display: flex;
        gap: 10px;

        .el-button {
          border-radius: 6px;
          font-weight: 500;
        }
      }
    }
  }
}

// 操作按钮区域
.action-card {
  border-radius: 12px;
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  .action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .action-group {
      display: flex;
      gap: 15px;

      .action-btn {
        border-radius: 4px;
        font-weight: 500;
        transition: all 0.3s ease;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}

// 表格卡片样式
.table-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  }

  .modern-table {
    border-radius: 8px;
    overflow: hidden;

    ::v-deep .modern-header {
      background: #f5f7fa;
      color: #606266;
      font-weight: 600;
    }

    ::v-deep .modern-cell {
      .company-name {
        display: flex;
        align-items: center;

        i {
          margin-right: 5px;
          color: #409eff;
        }
      }

      .time-info {
        display: flex;
        align-items: center;
        font-size: 12px;

        i {
          margin-right: 5px;
          color: #909399;
        }
      }

      .no-data {
        color: #c0c4cc;
      }

      .rejection-reason {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
      }
    }

    ::v-deep .el-table__row {
      transition: all 0.3s ease;

      &:hover {
        background-color: #f5f7fa;
      }
    }

    .action-buttons {
      display: flex;
      justify-content: center;
      gap: 10px;

      .action-icon-btn {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        &:hover {
          transform: scale(1.1);
        }

        &.sync-btn {
          color: #409eff;

          &:hover {
            background: rgba(64, 158, 255, 0.1);
          }
        }

        &.release-btn {
          color: #e6a23c;

          &:hover {
            background: rgba(230, 162, 60, 0.1);
          }
        }
      }
    }
  }

  .pagination-wrapper {
    margin-top: 20px;
    text-align: right;
  }
}

// 状态标签样式
.status-wrapper {
  .el-tag {
    border-radius: 20px;
    padding: 4px 12px;
    font-weight: 500;
    border: none;

    i {
      margin-right: 5px;
    }

    &.status-pending {
      background-color: #e1f3d8;
      color: #67c23a;
      border-color: #e1f3d8;
    }

    &.status-approved {
      background-color: #f0f9ff;
      color: #409eff;
      border-color: #f0f9ff;
    }

    &.status-rejected {
      background-color: #fef0f0;
      color: #f56c6c;
      border-color: #fef0f0;
    }

    &.status-partial {
      background-color: #fdf6ec;
      color: #e6a23c;
      border-color: #fdf6ec;
    }
  }
}

// 对话框样式
::v-deep .modern-dialog {
  border-radius: 12px;

  .el-dialog__header {
    background: #f5f7fa;
    color: #606266;
    border-radius: 12px 12px 0 0;
    padding: 20px;

    .el-dialog__title {
      font-weight: 600;
    }
  }

  .el-dialog__body {
    padding: 30px 20px;
  }

  .dialog-content {
    .form-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #ebeef5;

      i {
        margin-right: 10px;
        color: #409eff;
        font-size: 20px;
      }

      span {
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
      }
    }

    .modern-form {
      .area-input {
        width: 100%;
      }
      
      .number-input {
        width: 100%;
      }

      .form-tip {
        display: flex;
        align-items: center;
        color: #909399;
        font-size: 12px;
        margin-top: 5px;

        i {
          margin-right: 5px;
        }
      }
    }
  }

  .dialog-footer {
    text-align: right;
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;

    .cancel-btn,
    .confirm-btn {
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .confirm-btn:hover {
      background-color: #66b1ff;
    }
  }
}

// 抽屉样式
::v-deep .modern-drawer {
  .el-drawer__header {
    background: #f5f7fa;
    color: #606266;
    padding: 20px;
    margin-bottom: 0;

    span {
      font-weight: 600;
    }
  }

  .drawer-content {
    padding: 20px;

    .server-table {
      border-radius: 8px;
      overflow: hidden;

      .access-url {
        color: #409eff;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }

        i {
          margin-right: 5px;
        }
      }

      .release-seats-btn {
        border-radius: 6px;
        font-weight: 500;
      }
    }
  }
}

// 释放对话框样式
::v-deep .release-dialog {
  border-radius: 12px;

  .el-dialog__header {
    background: #f5f7fa;
    color: #606266;
    border-radius: 12px 12px 0 0;

    .el-dialog__title {
      font-weight: 600;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .app-container {
    padding: 10px;
  }

  .statistics-cards {
    .el-col {
      margin-bottom: 10px;
    }
  }

  .search-form {
    .el-col {
      margin-bottom: 10px;
    }
  }

  .action-bar {
    flex-direction: column;
    align-items: stretch;

    .action-group {
      margin-bottom: 10px;
      justify-content: center;
    }
  }

  .batch-content {
    flex-direction: column;
    align-items: flex-start;

    .batch-actions {
      margin-top: 10px;
      flex-wrap: wrap;
    }
  }
}
</style>