<template>
  <div class="visual-management-container">
    <!-- 顶部统计栏 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :span="6">
        <vab-card shadow="hover" class="stat-card">
          <div class="stat-icon bg-primary">
            <vab-icon icon="building-line" style="font-size: 24px; color: #fff;" />
          </div>
          <div class="stat-info">
            <div class="stat-value">12</div>
            <div class="stat-label">公寓楼宇 (栋)</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover" class="stat-card">
          <div class="stat-icon bg-success">
            <vab-icon icon="hotel-bed-line" style="font-size: 24px; color: #fff;" />
          </div>
          <div class="stat-info">
            <div class="stat-value">2,450</div>
            <div class="stat-label">总床位数 (个)</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover" class="stat-card">
          <div class="stat-icon bg-warning">
            <vab-icon icon="user-line" style="font-size: 24px; color: #fff;" />
          </div>
          <div class="stat-info">
            <div class="stat-value">1,890</div>
            <div class="stat-label">当前在住 (人)</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover" class="stat-card">
          <div class="stat-icon bg-danger">
            <vab-icon icon="pie-chart-line" style="font-size: 24px; color: #fff;" />
          </div>
          <div class="stat-info">
            <div class="stat-value">77.1%</div>
            <div class="stat-label">入住率</div>
          </div>
        </vab-card>
      </el-col>
    </el-row>

    <!-- 主体内容区 -->
    <el-row :gutter="20">
      <!-- 左侧楼宇列表 -->
      <el-col :span="5">
        <vab-card class="building-list-card">
          <template #header>
            <div class="card-header">
              <span>公寓列表</span>
              <el-input
                v-model="searchBuilding"
                placeholder="搜索楼宇"
                size="small"
                style="width: 120px"
              >
                <template #prefix><vab-icon icon="search-line" /></template>
              </el-input>
            </div>
          </template>
          <el-scrollbar height="600px">
            <div class="building-menu">
              <div
                v-for="item in buildingList"
                :key="item.id"
                class="building-item"
                :class="{ active: currentBuilding === item.id }"
                @click="currentBuilding = item.id"
              >
                <div class="building-name">{{ item.name }}</div>
                <div class="building-tags">
                  <el-tag size="small" type="info">{{ item.type }}</el-tag>
                  <el-tag size="small" effect="plain">{{ item.floors }}层</el-tag>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </vab-card>
      </el-col>

      <!-- 右侧房态图 -->
      <el-col :span="19">
        <vab-card>
          <template #header>
            <div class="visual-header">
              <div class="left-panel">
                <span class="current-title">{{ currentBuildingName }} 房态视图</span>
                <el-radio-group v-model="viewMode" size="small" class="ml-20">
                  <el-radio-button label="grid">网格视图</el-radio-button>
                  <el-radio-button label="list">列表视图</el-radio-button>
                </el-radio-group>
              </div>
              <div class="right-panel">
                <div class="legend-box">
                  <div class="legend-item"><span class="dot empty"></span>空闲</div>
                  <div class="legend-item"><span class="dot full"></span>满员</div>
                  <div class="legend-item"><span class="dot partial"></span>未满</div>
                  <div class="legend-item"><span class="dot repair"></span>维修</div>
                  <div class="legend-item"><span class="dot reserved"></span>预留</div>
                </div>
              </div>
            </div>
          </template>

          <!-- 楼层遍历 -->
          <div class="floor-container" v-if="viewMode === 'grid'">
            <div v-for="floor in floors" :key="floor" class="floor-section">
              <div class="floor-title">
                <div class="floor-num">{{ floor }}F</div>
              </div>
              <div class="room-grid">
                <div
                  v-for="room in getRoomsByFloor(floor)"
                  :key="room.id"
                  class="room-card"
                  :class="room.status"
                  @click="handleRoomClick(room)"
                >
                  <div class="room-header">
                    <span class="room-no">{{ room.no }}</span>
                    <vab-icon v-if="room.type === 'male'" icon="men-line" class="gender-icon male" />
                    <vab-icon v-else icon="women-line" class="gender-icon female" />
                  </div>
                  <div class="room-body">
                    <div class="bed-stat">
                      <span class="occupied">{{ room.occupied }}</span>
                      <span class="divider">/</span>
                      <span class="total">{{ room.total }}</span>
                    </div>
                    <div class="room-type">{{ room.category }}</div>
                  </div>
                  <!-- 悬浮操作层 -->
                  <div class="hover-actions">
                    <el-button type="primary" size="small" circle>
                      <vab-icon icon="search-eye-line" />
                    </el-button>
                    <el-button type="success" size="small" circle>
                      <vab-icon icon="edit-line" />
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="list-container" v-else>
            <el-table :data="roomsMock" border stripe height="600px">
              <el-table-column prop="no" label="房间号" width="120" sortable fixed />
              <el-table-column prop="floor" label="楼层" width="100" sortable align="center">
                <template #default="{ row }">{{ row.floor }}F</template>
              </el-table-column>
              <el-table-column prop="category" label="房间类型" width="120" />
              <el-table-column prop="type" label="住宿性别" width="120" align="center">
                <template #default="{ row }">
                  <el-tag :type="row.type === 'male' ? '' : 'danger'" effect="plain">
                    <vab-icon :icon="row.type === 'male' ? 'men-line' : 'women-line'" />
                    {{ row.type === 'male' ? '男生' : '女生' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="入住情况" min-width="200">
                <template #default="{ row }">
                  <el-progress 
                    :percentage="row.total > 0 ? (row.occupied / row.total) * 100 : 0" 
                    :format="() => `${row.occupied}/${row.total}`"
                    :status="row.status === 'full' ? 'exception' : (row.status === 'empty' ? 'success' : '')"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="120" align="center">
                <template #default="{ row }">
                  <el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150" fixed="right" align="center">
                <template #default="{ row }">
                  <el-button type="primary" text size="small" @click="handleRoomClick(row)">
                    <vab-icon icon="search-eye-line" /> 详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

        </vab-card>
      </el-col>
    </el-row>

    <!-- 房间详情弹窗 -->
    <room-detail-dialog
      v-model="dialogVisible"
      :data="selectedRoom"
      :building-name="currentBuildingName"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import RoomDetailDialog from '../components/RoomDetailDialog.vue'

defineOptions({
  name: 'VisualManagement',
})

// --- Mock Data ---
const buildingList = [
  { id: 1, name: '一号书院', type: '本科生公寓', floors: 6 },
  { id: 2, name: '二号书院', type: '本科生公寓', floors: 6 },
  { id: 3, name: '三号书院', type: '留学生公寓', floors: 12 },
  { id: 4, name: '四号书院', type: '研究生公寓', floors: 12 },
  { id: 5, name: '五号书院', type: '教工公寓', floors: 8 },
]

const roomsMock = []
// 生成模拟房间数据
for (let f = 1; f <= 6; f++) {
  for (let r = 1; r <= 12; r++) {
    const no = `${f}${r.toString().padStart(2, '0')}`
    const total = 4
    const occupied = Math.floor(Math.random() * 5) // 0-4
    let status = 'partial'
    if (occupied === 0) status = 'empty'
    else if (occupied === total) status = 'full'
    
    // 随机插入一些特殊状态
    if (Math.random() > 0.95) status = 'repair'
    else if (Math.random() > 0.95) status = 'reserved'

    roomsMock.push({
      id: parseInt(no),
      no: no,
      floor: f,
      type: f % 2 === 0 ? 'female' : 'male', // 偶数层女生，奇数层男生
      category: '四人间',
      total: total,
      occupied: status === 'empty' ? 0 : occupied,
      status: status,
      beds: Array.from({ length: total }, (_, i) => ({
        no: `${i + 1}号床`,
        status: i < occupied ? 'occupied' : 'empty',
        student: i < occupied ? { name: `学生${no}-${i}`, id: `319010${i}` } : null
      }))
    })
  }
}

// --- State ---
const searchBuilding = ref('')
const currentBuilding = ref(1)
const viewMode = ref('grid')
const dialogVisible = ref(false)
const selectedRoom = ref(null)

// --- Computed ---
const currentBuildingName = computed(() => {
  return buildingList.find(b => b.id === currentBuilding.value)?.name || ''
})

const floors = computed(() => {
  // 简单模拟：假设当前楼宇有6层
  return [6, 5, 4, 3, 2, 1]
})

// --- Methods ---
const getStatusLabel = (status) => {
  const map = { empty: '空闲', full: '满员', partial: '未满', repair: '维修', reserved: '预留' }
  return map[status] || status
}

const getStatusType = (status) => {
  const map = { empty: 'info', full: 'danger', partial: 'success', repair: 'warning', reserved: 'primary' }
  return map[status]
}

const getRoomsByFloor = (floor) => {
  return roomsMock.filter(r => r.floor === floor)
}

const handleRoomClick = (room) => {
  selectedRoom.value = room
  dialogVisible.value = true
}
</script>

<style lang="scss" scoped>
.visual-management-container {
  border: none !important;
  .mb-20 {
    margin-bottom: 20px;
  }
  
  .ml-20 {
    margin-left: 20px;
  }
  
  .mt-20 {
    margin-top: 20px;
  }
  
  .text-gray {
    color: #909399;
  }
  
  .ml-5 {
    margin-left: 5px;
  }

  // 顶部统计卡片
  .stat-card {
    :deep(.el-card__body) {
      display: flex;
      align-items: center;
      padding: 20px;
    }

    .stat-icon {
      width: 70px;
      height: 70px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      
      .vab-icon {
        font-size: 36px;
        color: #fff;
      }

      &.bg-primary { background: linear-gradient(135deg, #409eff, #79bbff); }
      &.bg-success { background: linear-gradient(135deg, #67c23a, #95d475); }
      &.bg-warning { background: linear-gradient(135deg, #e6a23c, #eebe77); }
      &.bg-danger { background: linear-gradient(135deg, #f56c6c, #f89898); }
    }

    .stat-info {
      .stat-value {
        font-size: 28px;
        font-weight: bold;
        color: #303133;
        line-height: 1.2;
      }
      .stat-label {
        font-size: 14px;
        color: #909399;
        margin-top: 5px;
      }
    }
  }

  // 左侧楼宇列表
  .building-list-card {
    height: 100%;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .building-menu {
      .building-item {
        padding: 12px 15px;
        margin-bottom: 8px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;
        border: 1px solid transparent;

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

        &.active {
          background-color: var(--el-color-primary-light-9);
          border-color: var(--el-color-primary-light-5);
          
          .building-name {
            color: var(--el-color-primary);
            font-weight: 600;
          }
        }

        .building-name {
          font-size: 15px;
          color: #606266;
          margin-bottom: 8px;
        }

        .building-tags {
          display: flex;
          gap: 5px;
        }
      }
    }
  }

  // 右侧房态图
  .visual-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    .left-panel {
      display: flex;
      align-items: center;
    }
    .current-title {
      font-size: 18px;
      font-weight: bold;
      color: #303133;
    }

    .legend-box {
      display: flex;
      gap: 15px;
      
      .legend-item {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #606266;
        .dot {
          position: relative;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          margin-right: 6px;
          
          &.empty { background-color: #909399; opacity: 0.2; border: 1px solid #909399; }
          &.full { background-color: #f56c6c; }
          &.partial { background-color: #67c23a; }
          &.repair { background-color: #e6a23c; }
          &.reserved { background-color: #409eff; }
        }
      }
    }
    .right-panel {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
  }

  .floor-container {
    margin-top: 20px;

    .floor-section {
      display: flex;
      margin-bottom: 20px;
      border-bottom: 1px dashed #e4e7ed;
      padding-bottom: 20px;

      &:last-child {
        border-bottom: none;
      }

      .floor-title {
        width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        
        .floor-num {
          width: 50px;
          height: 50px;
          background-color: #303133;
          color: #fff;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: bold;
          box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
      }

      .room-grid {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;

        .room-card {
          width: 140px;
          height: 100px;
          border-radius: 8px;
          padding: 10px;
          cursor: pointer;
          position: relative;
          transition: all 0.3s;
          border: 1px solid #ebeef5;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;

          // 状态样式
          &.empty { 
            background-color: #f9f9f9; 
            .room-no { color: #606266; }
            .bed-stat { color: #909399; }
          }
          &.full { 
            background-color: #fef0f0; border-color: #fab6b6;
            .room-no { color: #f56c6c; }
            .bed-stat { color: #f56c6c; }
          }
          &.partial { 
            background-color: #f0f9eb; border-color: #b3e19d;
            .room-no { color: #67c23a; }
            .bed-stat { color: #67c23a; }
          }
          &.repair { 
            background-color: #fdf6ec; border-color: #f3d19e;
            background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(230, 162, 60, 0.1) 10px, rgba(230, 162, 60, 0.1) 20px);
            .room-no { color: #e6a23c; }
          }
          &.reserved { 
            background-color: #ecf5ff; border-color: #a0cfff;
            .room-no { color: #409eff; }
          }

          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            
            .hover-actions {
              opacity: 1;
              transform: translateY(0);
            }
          }

          .room-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .room-no {
              font-size: 16px;
              font-weight: bold;
            }
            
            .gender-icon {
              font-size: 14px;
              &.male { color: #409eff; }
              &.female { color: #f56c6c; }
            }
          }

          .room-body {
            .bed-stat {
              font-size: 18px;
              font-family: 'Impact', sans-serif;
              
              .occupied { font-size: 22px; }
              .divider { margin: 0 2px; font-size: 14px; opacity: 0.6; }
              .total { font-size: 14px; opacity: 0.8; }
            }
            
            .room-type {
              font-size: 12px;
              color: #909399;
              margin-top: 4px;
            }
          }

          .hover-actions {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s;
          }
        }
      }
    }
  }

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 15px;
    border-left: 4px solid var(--el-color-primary);
    padding-left: 10px;
  }
}
</style>
