<template>
  <vab-card class="quick-nav-card">
    <template #header>
      <div class="card-header">
        <span class="title">
          <vab-icon icon="function-line" class="mr-5" />
          快捷导航
        </span>
        <el-tag size="small" type="primary" effect="plain">常用功能</el-tag>
      </div>
    </template>

    <el-row :gutter="20">
      <el-col v-for="(item, index) in menuList" :key="index" :span="6" :xs="12">
        <div class="nav-item" @click="handleNav(item.link)">
          <div class="icon-box" :class="item.color">
            <vab-icon :icon="item.icon" style="font-size: 24px; color: #fff;" />
          </div>
          <div class="nav-info">
            <div class="nav-title">{{ item.title }}</div>
            <div class="nav-desc">{{ item.desc }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </vab-card>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const menuList = [
  {
    title: '房源管理',
    desc: '楼宇/房间/床位',
    icon: 'building-4-line',
    color: 'blue',
    link: 'BuildingList',
  },
  {
    title: '入住办理',
    desc: '新生入住/退宿',
    icon: 'user-follow-line',
    color: 'green',
    link: 'CheckIn',
  },
  {
    title: '日常检查',
    desc: '卫生/违纪查寝',
    icon: 'survey-line',
    color: 'orange',
    link: 'InspectionManage',
  },
  {
    title: '门禁权限',
    desc: '人脸/刷卡授权',
    icon: 'shield-user-line',
    color: 'purple',
    link: 'AccessControl',
  },
  {
    title: '水电控费',
    desc: '费率/充值记录',
    icon: 'flashlight-line',
    color: 'yellow',
    link: 'FeeConfig',
  },
  {
    title: '报修处理',
    desc: '工单分配/结单',
    icon: 'tools-line',
    color: 'cyan',
    link: 'RepairList',
  },
  {
    title: '房态图',
    desc: '房源可视化',
    icon: 'computer-line',
    color: 'indigo',
    link: 'VisualManagement',
  },
  {
    title: '系统设置',
    desc: '参数/字典配置',
    icon: 'settings-3-line',
    color: 'gray',
    link: 'SystemConfig',
  },
]

const handleNav = (name) => {
  // router.push({ name })
  // Fallback if route doesn't exist yet
  try {
    router.push({ name })
  } catch (e) {
    console.warn('Route not found:', name)
  }
}
</script>

<style lang="scss" scoped>
.quick-nav-card {
  height: 100%;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    .mr-5 { margin-right: 8px; }
  }

  .nav-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 15px;
    border: 1px solid transparent;

    &:hover {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      transform: translateY(-2px);
    }

    .icon-box {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      
      .vab-icon {
        font-size: 24px;
        color: #fff;
      }

      &.blue { background: linear-gradient(135deg, #36a3f7, #007bff); }
      &.green { background: linear-gradient(135deg, #34d399, #10b981); }
      &.orange { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
      &.purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
      &.yellow { background: linear-gradient(135deg, #fcd34d, #f59e0b); }
      &.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); }
      &.indigo { background: linear-gradient(135deg, #818cf8, #4f46e5); }
      &.gray { background: linear-gradient(135deg, #9ca3af, #4b5563); }
    }

    .nav-info {
      .nav-title {
        font-size: 15px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 4px;
      }
      .nav-desc {
        font-size: 12px;
        color: #909399;
      }
    }
  }
}
</style>