<template>
  <!-- 钥匙管理组件模板 -->
  <div class="p-4">
    <!-- 钥匙柜选择器 -->
    <el-select v-model="value" placeholder="请选择钥匙柜" style="width: 240px">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-divider />
    <!-- 钥匙柜及钥匙状态展示区域 -->
    <el-row :gutter="20">
      <!-- 遍历钥匙列表，每个钥匙显示为一个卡片 -->
      <el-col :span="8" v-for="k in keyList" :key="k">
        <el-card shadow="always">
          <!-- 卡片头部 - 显示槽位号 -->
          <template #header>
            <div class="card-header">
              <span>{{ k.keySlot }}</span>
            </div>
          </template>
          <!-- 卡片内容 - 显示钥匙详细信息 -->
          <div class="flex gap-2">
            <el-table :data="k.keyDatas" :show-header="false" style="width: 100%">
              <el-table-column prop="infotype" label="项目" />
              <el-table-column prop="status" label="状态">
                <template #default="scope">
                  <el-tag v-for="s in scope.row.status" :key="s.value" :type="s.type" effect="light">
                    {{ s.value }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 卡片底部 - 操作按钮组 -->
          <template #footer>
            <div class="card-footer">
              <el-button-group>
                <el-button size="small" type="primary" :icon="Pointer">申请</el-button>
                <el-button size="small" type="success" :icon="Unlock">解锁</el-button>
                <el-button size="small" type="danger" :icon="Lock">锁定</el-button>
              </el-button-group>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
/**
 * 钥匙管理组件脚本部分
 * 负责钥匙柜的选择、钥匙状态的展示和操作
 */
import { ref } from 'vue'
import { Pointer, Unlock, Lock } from '@element-plus/icons-vue' // 导入操作按钮图标

/**
 * 状态定义
 */
const value = ref('') // 当前选择的钥匙柜ID

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

/**
 * 数据类型定义
 */
// 状态标签类型接口
type Status = {
  type: string // 标签类型（primary/success/warning/danger/info）
  value: string // 标签显示内容
}

// 钥匙数据项类型接口
type KeyData = {
  infotype: string // 信息类型（如：钥匙名称、钥匙状态等）
  status: Status[] // 状态标签数组
}

// 钥匙槽位及其中钥匙数据的接口
type KeyDatas = {
  keySlot: string // 槽位名称
  keyDatas: KeyData[] // 钥匙详细数据
}

/**
 * 钥匙列表数据
 * 模拟从后端获取的钥匙柜中的钥匙数据
 */
const keyList: KeyDatas[] =
  [
    {
      keySlot: '1号槽位',
      keyDatas: [
        {
          infotype: '钥匙名称：',
          status: [{ type: 'primary', value: '苏A54321' }]
        },
        {
          infotype: '钥匙类型：',
          status: [{ type: 'primary', value: '车辆钥匙' }]
        },
        {
          infotype: '钥匙状态：',
          status: [{ type: 'success', value: '在位' }]
        },
        {
          infotype: '领用人员：',
          status: [{ type: 'success', value: '无' }]
        },
        {
          infotype: '领用时间：',
          status: [{ type: 'success', value: '无' }]
        }
      ]
    },
    {
      keySlot: '2号槽位',
      keyDatas: [
        {
          infotype: '钥匙名称：',
          status: [{ type: 'primary', value: '苏A123456' }]
        },
        {
          infotype: '钥匙类型：',
          status: [{ type: 'primary', value: '车辆钥匙' }]
        },
        {
          infotype: '钥匙状态：',
          status: [{ type: 'success', value: '在位' }]
        },
        {
          infotype: '领用人员：',
          status: [{ type: 'success', value: '无' }]
        },
        {
          infotype: '领用时间：',
          status: [{ type: 'success', value: '无' }]
        }
      ]
    },
    {
      keySlot: '3号槽位',
      keyDatas: [
        {
          infotype: '钥匙名称：',
          status: [{ type: 'primary', value: '1#仓库1号门2号钥匙' }]
        },
        {
          infotype: '钥匙类型：',
          status: [{ type: 'primary', value: '仓库钥匙' }]
        },
        {
          infotype: '钥匙状态：',
          status: [{ type: 'info', value: '在位-申请成功' }]
        },
        {
          infotype: '领用人员：',
          status: [{ type: 'info', value: '值班员1' }]
        },
        {
          infotype: '领用时间：',
          status: [{ type: 'info', value: '无' }]
        }
      ]
    },
    {
      keySlot: '3号槽位',
      keyDatas: [
        {
          infotype: '钥匙名称：',
          status: [{ type: 'primary', value: '1#仓库1号门1号钥匙' }]
        },
        {
          infotype: '钥匙类型：',
          status: [{ type: 'primary', value: '仓库钥匙' }]
        },
        {
          infotype: '钥匙状态：',
          status: [{ type: 'warning', value: '离位-申请成功' }]
        },
        {
          infotype: '领用人员：',
          status: [{ type: 'warning', value: '值班员1' }]
        },
        {
          infotype: '领用时间：',
          status: [{ type: 'warning', value: '10:00:00' }]
        }
      ]
    }
  ]
</script>

<style scoped>
/**
 * 钥匙管理组件样式定义
 * 使用空军蓝为主色调，打造科技感界面
 */
/* 设置页面背景为透明 */
:deep(.p-4) {
  background-color: transparent !important;
}

/* 确保所有容器元素背景也是透明的 */
div {
  background-color: transparent !important;
}

/* 布局相关样式 */
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/* 空军蓝为主色调的卡片样式 */
:deep(.el-card) {
  /* 空军蓝半透明渐变背景 */
  background: linear-gradient(to right, rgba(12, 43, 77, 0.95), rgba(12, 43, 77, 0.7)) !important;
  backdrop-filter: blur(5px) !important;
  border: 1px solid #68c9ff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(104, 201, 255, 0.3) !important;
  overflow: hidden !important;
  margin-bottom: 20px;
}

/* 卡片头部样式 */
:deep(.el-card__header) {
  border-bottom: 1px solid #68c9ff !important;
  padding: 12px 16px !important;
  margin-bottom: 0 !important;
}

/* 卡片头部文本样式 */
:deep(.card-header span) {
  color: #68c9ff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* 卡片内容中的表格样式 */
:deep(.el-card__body table tr) {
  color: #b6dfff !important;
  width: 100%;
  font-size: 13px !important;
  padding: 0 !important;
  background: none;
}

:deep(.el-card__body table tr td) {
  color: #b6dfff !important;
  font-size: 13px !important;
  padding: 0 !important;
  background: none;
}

/* 卡片底部样式 */
:deep(.el-card__footer) {
  background: rgba(12, 43, 77, 0.8) !important;
  border-top: 1px solid #68c9ff !important;
  padding: 12px 16px !important;
  margin-top: 0 !important;
}

/* 钥匙柜选择器样式 */
:deep(.el-select) {
  background: rgba(12, 43, 77, 0.7) !important;
  border: 1px solid #68c9ff !important;
  border-radius: 4px !important;
}

:deep(.el-select .el-input__wrapper) {
  background: transparent !important;
  border: none !important;
}

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

/* 分割线样式 */
:deep(.el-divider) {
  background: linear-gradient(to right, rgba(104, 201, 255, 0), rgba(104, 201, 255, 0.5), rgba(104, 201, 255, 0)) !important;
  margin: 16px 0 !important;
}
</style>