<script setup lang="ts">
/**
 * 首页 — 舆图智慧水务
 *
 * 设计规格：
 *  - NavBar: #1E74FF 背景, 白色文字/图标, 右侧设置/通知/加号
 *  - Banner 轮播: van-swipe, 180px 高, 圆角 6px, margin 8px 12px
 *  - 提示栏: 橙色图标 + 调度指令提示, 白色背景, 圆角 6px
 *  - 菜单面板: van-collapse 分组, 每组标题带 #1E74FF 4px 强调条, 4 列图标网格
 *  - Tabbar: 3 个标签页 (首页/地图/我的)
 */
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

// ── Tabbar ──
const activeTab = ref(0)

function onTabChange(index: number): void {
  activeTab.value = index
  if (index === 0) router.replace('/home')
  else if (index === 1) router.replace('/map')
  else if (index === 2) router.replace('/mine')
}

// ── Banner ──
interface BannerItem {
  id: number
  image: string
  title: string
}

const banners = ref<BannerItem[]>([
  { id: 1, image: '', title: '智慧水务·守护城市水脉' },
  { id: 2, image: '', title: '实时监测·精准调度' },
  { id: 3, image: '', title: '防汛应急·快速响应' },
])

// ── 提示栏 ──
const alertMessage = ref('提示：有调度指令请查收反馈！')

// ── 菜单分组 ──
interface MenuItem {
  id: string
  label: string
  route?: string
}

interface MenuGroup {
  id: string
  name: string
  items: MenuItem[]
}

const menuGroups = reactive<MenuGroup[]>([
  {
    id: 'fxgl',
    name: '防汛管理',
    items: [
      { id: 'fxgl-1', label: '防汛指令', route: '/instructionList' },
      { id: 'fxgl-2', label: '打卡记录', route: '/groupsClockList' },
      { id: 'fxgl-3', label: '物资管理', route: '/materialList' },
      { id: 'fxgl-4', label: '选择成员', route: '/teamList' },
    ],
  },
  {
    id: 'xj',
    name: '巡检养护',
    items: [
      { id: 'xj-1', label: '巡检任务', route: '/inspection' },
      { id: 'xj-2', label: '巡检记录', route: '/inspectionRecords' },
      { id: 'xj-3', label: '养护管理', route: '/maintenance' },
      { id: 'xj-4', label: '养护记录', route: '/maintenanceRecords' },
      { id: 'xj-5', label: '养护检查', route: '/maintenanceCheck' },
      { id: 'xj-6', label: '问题工单', route: '/inspectionProblem' },
    ],
  },
  {
    id: 'jc',
    name: '监测设备',
    items: [
      { id: 'jc-1', label: '监测设备', route: '/monitoringEquipment' },
      { id: 'jc-2', label: '设备详情', route: '/equipmentInfo' },
      { id: 'jc-3', label: '地图监控', route: '/mapMonitoring' },
      { id: 'jc-4', label: '监测详情', route: '/monitoringDetail' },
    ],
  },
  {
    id: 'psh',
    name: '排水户管理',
    items: [
      { id: 'psh-1', label: '排水户列表', route: '/pshList' },
      { id: 'psh-2', label: '检查记录', route: '/checkList' },
      { id: 'psh-3', label: '任务管理', route: '/pshTaskList' },
      { id: 'psh-4', label: '问题列表', route: '/pshProblemList' },
    ],
  },
  {
    id: 'wt',
    name: '问题上报',
    items: [
      { id: 'wt-1', label: '问题上报', route: '/problemReport' },
      { id: 'wt-2', label: '积淹点上报', route: '/reportFloodedPoints' },
      { id: 'wt-3', label: '巡检问题', route: '/reportInspection' },
      { id: 'wt-4', label: '设备报修', route: '/reportEquipmentRepair' },
    ],
  },
  {
    id: 'other',
    name: '其他',
    items: [
      { id: 'other-1', label: '工程项目', route: '/constructionTracking' },
      { id: 'other-2', label: '监督记录', route: '/superviseRecord' },
      { id: 'other-3', label: '有限空间', route: '/yxkjzyRecords' },
      { id: 'other-4', label: '消息通知', route: '/noticeList' },
    ],
  },
])

// ── 折叠面板激活项 ──
const activePanels = ref<string[]>([])

function onMenuItemClick(item: MenuItem): void {
  if (item.route) {
    router.push(item.route)
  } else {
    showToast(`${item.label} — 即将上线`)
  }
}

// ── 导航栏右侧按钮 ──
function onNavSetting(): void {
  router.push('/menuEdit')
}
function onNavNotify(): void {
  router.push('/noticeList')
}
function onNavPlus(): void {
  router.push('/problemReport')
}
</script>

<template>
  <div class="home-page">
    <!-- ═══════════ 顶部导航栏 ═══════════ -->
    <van-nav-bar
      title="舆图智慧水务"
      fixed
      placeholder
    >
      <template #left>
        <span class="nav-left-brand">💧</span>
      </template>
      <template #right>
        <van-icon name="setting-o" size="20" @click="onNavSetting" />
        <van-icon name="bell" size="20" style="margin-left: 12px" @click="onNavNotify" />
        <van-icon name="add-o" size="20" style="margin-left: 12px" @click="onNavPlus" />
      </template>
    </van-nav-bar>

    <!-- ═══════════ 页面主体 ═══════════ -->
    <div class="home-body">
      <!-- ── Banner 轮播 ── -->
      <div class="banner-wrapper">
        <van-swipe
          :autoplay="3000"
          :loop="true"
          :height="180"
          indicator-color="#1E74FF"
          class="banner-swipe"
        >
          <van-swipe-item v-for="item in banners" :key="item.id">
            <div class="banner-slide">
              <div class="banner-content">
                <span class="banner-icon">🏗️</span>
                <span class="banner-title">{{ item.title }}</span>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- ── 提示栏 ── -->
      <div class="alert-bar" @click="router.push('/instructionList')">
        <van-icon name="warning-o" color="#FF976A" size="18" />
        <span class="alert-text">{{ alertMessage }}</span>
        <van-icon name="arrow" color="#C8C9CC" size="14" />
      </div>

      <!-- ── 菜单面板 (van-collapse) ── -->
      <van-collapse
        v-model="activePanels"
        class="menu-collapse"
      >
        <van-collapse-item
          v-for="group in menuGroups"
          :key="group.id"
          :name="group.id"
        >
          <template #title>
            <div class="panel-title">
              <span class="panel-accent"></span>
              <span class="panel-label">{{ group.name }}</span>
            </div>
          </template>
          <div class="menu-grid">
            <div
              v-for="item in group.items"
              :key="item.id"
              class="menu-item"
              @click="onMenuItemClick(item)"
            >
              <div class="menu-icon-box">
                <van-icon name="apps-o" size="24" color="#1E74FF" />
              </div>
              <span class="menu-label">{{ item.label }}</span>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>

      <!-- 底部安全区占位 -->
      <div class="safe-bottom"></div>
    </div>

    <!-- ═══════════ 底部导航栏 ═══════════ -->
    <van-tabbar
      v-model="activeTab"
      :fixed="true"
      :placeholder="true"
      active-color="#1E74FF"
      @change="onTabChange"
    >
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="map-marked">地图</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="scss" scoped>
.home-page {
  min-height: 100vh;
  background: var(--color-bg-page);
  display: flex;
  flex-direction: column;

  // ── 导航栏 ──
  :deep(.van-nav-bar) {
    background: #1E74FF;

    .van-nav-bar__title {
      color: #ffffff;
      font-weight: 600;
      font-size: 17px;
    }

    .van-nav-bar__left,
    .van-nav-bar__right {
      .van-icon {
        color: #ffffff;
      }
    }
  }
}

.nav-left-brand {
  font-size: 18px;
  line-height: 1;
}

// ── 页面主体 ──
.home-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

// ── Banner ──
.banner-wrapper {
  margin: 8px 12px;
}

.banner-swipe {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.banner-slide {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #1E74FF 0%, #64B5F6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #ffffff;
}

.banner-icon {
  font-size: 36px;
}

.banner-title {
  font-size: 16px;
  font-weight: 500;
}

// ── 提示栏 ──
.alert-bar {
  margin: 0 12px 8px;
  padding: 10px 14px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  &:active {
    background: #f7f8fa;
  }
}

.alert-text {
  flex: 1;
  font-size: 13px;
  color: var(--color-text-regular);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// ── 菜单折叠面板 ──
.menu-collapse {
  margin: 0 12px;

  :deep(.van-collapse-item) {
    margin-bottom: 8px;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;

    .van-cell {
      padding: 14px 16px;
      background: #ffffff;
    }

    .van-collapse-item__content {
      padding: 0 16px 14px;
      background: #ffffff;
    }
  }
}

// ── 面板标题 ──
.panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-accent {
  width: 4px;
  height: 18px;
  background: #1E74FF;
  border-radius: 2px;
  flex-shrink: 0;
}

.panel-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

// ── 菜单网格 (4 列) ──
.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 0;

  &:active {
    .menu-icon-box {
      background: #e3f2fd;
    }
  }
}

.menu-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #f0f6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.menu-label {
  font-size: 12px;
  color: var(--color-text-regular);
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

// ── 底部安全区 ──
.safe-bottom {
  height: 12px;
}
</style>
