<template>
  <!-- 钥匙取用记录组件模板 -->
  <div class="p-4">
    <h2 class="text-xl font-bold text-blue-400 mb-4">钥匙取用记录</h2>
    
    <!-- 筛选条件区域 -->
    <div class="filter-container mb-4">
      <el-form :inline="true" :model="searchForm" class="mb-4">
        <el-form-item label="钥匙柜：">
          <el-select v-model="searchForm.cabinetId" placeholder="请选择钥匙柜" style="width: 180px">
            <el-option v-for="item in cabinetOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="钥匙名称：">
          <el-input v-model="searchForm.keyName" placeholder="请输入钥匙名称" style="width: 180px" />
        </el-form-item>
        
        <el-form-item label="申请人：">
          <el-input v-model="searchForm.applicant" placeholder="请输入申请人" style="width: 180px" />
        </el-form-item>
        
        <el-form-item label="日期范围：">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 280px"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 记录表格区域 -->
    <el-table :data="recordList" style="width: 100%" border>
      <el-table-column prop="id" label="记录ID" width="80" />
      <el-table-column prop="cabinetName" label="钥匙柜" width="150" />
      <el-table-column prop="keySlot" label="槽位" width="100" />
      <el-table-column prop="keyName" label="钥匙名称" width="180" />
      <el-table-column prop="keyType" label="钥匙类型" width="120" />
      <el-table-column prop="applicant" label="申请人" width="120" />
      <el-table-column prop="applyTime" label="申请时间" width="180" />
      <el-table-column prop="applyReason" label="申请事由" min-width="200" show-overflow-tooltip />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作人" width="120" />
      <el-table-column prop="operationTime" label="操作时间" width="180" />
    </el-table>
    
    <!-- 分页组件 -->
    <div class="pagination-container mt-4">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
/**
 * 钥匙取用记录组件
 * 用于展示和查询钥匙的使用申请和取用记录
 */
import { ref, reactive, onMounted } from 'vue'

// 搜索表单数据
const searchForm = reactive({
  cabinetId: '',           // 钥匙柜ID
  keyName: '',             // 钥匙名称
  applicant: '',           // 申请人
  dateRange: null          // 日期范围
})

// 钥匙柜选项列表
const cabinetOptions = ref([
  { value: '1', label: '指挥中心钥匙柜1#' },
  { value: '2', label: '指挥中心钥匙柜2#' }
])

// 记录列表数据
const recordList = ref([])

// 分页信息
const pagination = reactive({
  currentPage: 1,          // 当前页码
  pageSize: 10,            // 每页条数
  total: 0                 // 总记录数
})

/**
 * 获取状态对应的标签类型
 * @param status 状态字符串
 * @returns 标签类型
 */
const getStatusType = (status: string): string => {
  const statusMap: Record<string, string> = {
    '申请中': 'info',
    '已批准': 'primary',
    '已领取': 'success',
    '已归还': 'warning',
    '已拒绝': 'danger'
  }
  return statusMap[status] || 'default'
}

/**
 * 模拟获取记录数据
 */
const fetchRecords = () => {
  // 这里应该是实际的API调用，现在使用模拟数据
  const mockData = [
    {
      id: '1',
      cabinetName: '指挥中心钥匙柜1#',
      keySlot: '1号槽位',
      keyName: '苏A54321',
      keyType: '车辆钥匙',
      applicant: '值班员1',
      applyTime: '2025-10-10 09:30:00',
      applyReason: '外出执行任务需要用车',
      status: '已归还',
      operation: '管理员1',
      operationTime: '2025-10-10 11:30:00'
    },
    {
      id: '2',
      cabinetName: '指挥中心钥匙柜1#',
      keySlot: '3号槽位',
      keyName: '1#仓库1号门1号钥匙',
      keyType: '仓库钥匙',
      applicant: '值班员1',
      applyTime: '2025-10-12 10:00:00',
      applyReason: '需要进入仓库领取物资',
      status: '已领取',
      operation: '管理员1',
      operationTime: '2025-10-12 10:05:00'
    },
    {
      id: '3',
      cabinetName: '指挥中心钥匙柜2#',
      keySlot: '2号槽位',
      keyName: '苏A123456',
      keyType: '车辆钥匙',
      applicant: '值班员2',
      applyTime: '2025-10-12 14:20:00',
      applyReason: '外出巡逻需要用车',
      status: '申请中',
      operation: '',
      operationTime: ''
    },
    {
      id: '4',
      cabinetName: '指挥中心钥匙柜1#',
      keySlot: '3号槽位',
      keyName: '1#仓库1号门2号钥匙',
      keyType: '仓库钥匙',
      applicant: '值班员1',
      applyTime: '2025-10-12 09:15:00',
      applyReason: '需要进入仓库盘点物资',
      status: '已批准',
      operation: '管理员1',
      operationTime: '2025-10-12 09:20:00'
    }
  ]
  
  // 根据搜索条件过滤数据
  let filteredData = [...mockData]
  
  if (searchForm.cabinetId) {
    filteredData = filteredData.filter(item => {
      const cabinetMap: Record<string, string> = {
        '1': '指挥中心钥匙柜1#',
        '2': '指挥中心钥匙柜2#'
      }
      return item.cabinetName === cabinetMap[searchForm.cabinetId]
    })
  }
  
  if (searchForm.keyName) {
    filteredData = filteredData.filter(item => 
      item.keyName.includes(searchForm.keyName)
    )
  }
  
  if (searchForm.applicant) {
    filteredData = filteredData.filter(item => 
      item.applicant.includes(searchForm.applicant)
    )
  }
  
  // 更新分页信息
  pagination.total = filteredData.length
  
  // 根据分页参数截取数据
  const start = (pagination.currentPage - 1) * pagination.pageSize
  const end = start + pagination.pageSize
  recordList.value = filteredData.slice(start, end)
}

/**
 * 查询按钮点击事件处理
 */
const handleSearch = () => {
  pagination.currentPage = 1
  fetchRecords()
}

/**
 * 重置按钮点击事件处理
 */
const handleReset = () => {
  // 重置搜索表单
  Object.assign(searchForm, {
    cabinetId: '',
    keyName: '',
    applicant: '',
    dateRange: null
  })
  
  // 重置分页并重新获取数据
  pagination.currentPage = 1
  fetchRecords()
}

/**
 * 每页条数变化处理
 * @param size 新的每页条数
 */
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  fetchRecords()
}

/**
 * 页码变化处理
 * @param current 新的页码
 */
const handleCurrentChange = (current: number) => {
  pagination.currentPage = current
  fetchRecords()
}

/**
 * 组件挂载时初始化数据
 */
onMounted(() => {
  fetchRecords()
})
</script>

<style scoped>
/**
 * 钥匙取用记录组件样式
 * 保持与系统整体风格一致，使用空军蓝配色和透明背景
 */
/* 设置页面背景为透明 */
.p-4 {
  background-color: transparent !important;
}

/* 筛选容器样式 */
.filter-container {
  background: rgba(12, 43, 77, 0.7) !important;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #68c9ff;
  backdrop-filter: blur(5px);
}

/* 表格样式 */
:deep(.el-table) {
  background: transparent !important;
  border: 1px solid #68c9ff;
  backdrop-filter: blur(5px);
}

:deep(.el-table tr){
  background: transparent !important;
}

:deep(.el-table__header th) {
  background: rgba(12, 43, 77, 0.7) !important;
  border-bottom: 1px solid #68c9ff !important;
  color: #68c9ff !important;
  font-weight: 500;
}

:deep(.el-table__row) {
  color: #b6dfff !important;
  border-bottom: 1px solid rgba(104, 201, 255, 0.3) !important;
}

:deep(.el-table__row:hover > td) {
  background: rgba(104, 201, 255, 0.1) !important;
}

:deep(.el-table__row.el-table__row--striped > td) {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* 分页组件样式 */
.pagination-container {
  background: rgba(12, 43, 77, 0.7) !important;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #68c9ff;
  backdrop-filter: blur(5px);
}

:deep(.el-pagination.is-background .el-pager li) {
  background: rgba(255, 255, 255, 0.05);
  color: #b6dfff;
  border: 1px solid #68c9ff;
}

:deep(.el-pagination.is-background .el-pager li:hover:not(.disabled)) {
  background: rgba(104, 201, 255, 0.2);
  color: #68c9ff;
}

:deep(.el-pagination.is-background .el-pager li.active) {
  background: #68c9ff;
  color: #0c2b4d;
  border-color: #68c9ff;
}

/* 输入框和下拉框样式 */
:deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: #68c9ff !important;
}

:deep(.el-input__inner) {
  color: #b6dfff !important;
  background: transparent !important;
}

:deep(.el-select) {
  background: rgba(255, 255, 255, 0.05) !important;
}

:deep(.el-date-editor) {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* 标题样式 */
.text-xl {
  font-size: 20px;
}

.font-bold {
  font-weight: 600;
}

.text-blue-400 {
  color: #68c9ff;
}

.mb-4 {
  margin-bottom: 16px;
}

.mt-4 {
  margin-top: 16px;
}
</style>