<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { http } from '@/http/http'
import { toLoginPage } from '@/utils/toLoginPage'

defineOptions({
  name: 'Home',
})
definePage({
  // 使用 type: "home" 属性设置首页，其他页面不需要设置，默认为page
  type: 'page',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'custom',
    navigationBarTitleText: '%tabbar.home%',
  },
})

// 菜单项接口定义
interface MenuItem {
  /** 菜单ID */
  id: string
  /** 菜单名称 */
  name: string
  /** 图标 */
  icon?: string
  /** 链接地址 */
  url?: string
  /** 子菜单 */
  children?: MenuItem[]
  /** 图标颜色 */
  iconColor?: string
  /** 组件路径 */
  component?: string
  /** 元信息 */
  meta?: {
    /** 标题 */
    title?: string
    /** 图标 */
    icon?: string
  }
}

// 菜单数据
const menuData = ref<MenuItem[]>([])
const loading = ref(false)
const error = ref('')

// Mock数据 - 由于接口可能调不通，使用模拟数据
const mockMenuData: MenuItem[] = []

// 获取菜单数据
async function fetchMenuData() {
  loading.value = true
  error.value = ''
  try {
    // 尝试调用真实接口
    const response = await http<MenuItem[]>({
      url: '/getRouters',
      method: 'GET',
      data: {
        source: 1,
      },
    })
    menuData.value = response.data
    console.log('菜单数据:', response)
  }
  catch (err) {
    // 接口调用失败时使用mock数据
    // menuData.value = mockMenuData
    // 如果是token失效错误，会被http拦截器自动处理跳转到登录页
    if (err.data.msg.includes('认证失败')) {
      toLoginPage()
    }
  }
  finally {
    loading.value = false
  }
}

// 处理菜单项点击
function handleMenuItemClick(menu: MenuItem) {
  console.log(menu)
  if (menu.children && menu.children.length > 0) {
    // 有子菜单的父菜单不跳转
    return
  }
  uni.navigateTo({
    url: '/pages/schedule/view/index',
  })
  // 根据菜单ID执行相应操作

  if (menu.component) {
    uni.navigateTo({
      url: menu.component,
    })
  }
  else {
    uni.showToast({
      title: `点击了${menu.meta?.title || menu.name}`,
      icon: 'none',
    })
  }
}
onMounted(async () => {
  // fetchMenuData()
})
onLoad(async () => {
  fetchMenuData()
})
</script>

<template>
  <view class="min-h-screen bg-gray-100">
    <!-- 菜单内容 -->
    <view class="p-2">
      <block v-if="loading">
        <view class="p-16 text-center">
          <wd-loading size="large" type="ring" />
          <text class="mt-4 inline-block text-sm text-gray-500">加载中...</text>
        </view>
      </block>
      <block v-else-if="error">
        <view class="p-16 text-center">
          <wd-icon name="info-circle" size="60" color="#909399" />
          <text class="mt-4 inline-block text-sm text-gray-500">{{ error }}</text>
        </view>
      </block>
      <block v-else>
        <wd-card
          v-for="group in menuData"
          :key="group.id"
          class="mb-3"
          :title="group.meta?.title || group.name"
          :border="true"
          :shadow="false"
        >
          <wd-grid :column="4" :gutter="10">
            <wd-grid-item
              v-for="item in group.children"
              :key="item.id"
              class="menu-item"
              @click="handleMenuItemClick(item)"
            >
              <wd-card
                size="small"
                :border="false"
                class="menu-card"
                :style="{ backgroundColor: `${item.iconColor || '#4CAF50'}20` }"
              >
                <wd-icon
                  :name="item.meta?.icon || item.icon"
                  color="#0083ff"
                  size="30"
                />
              </wd-card>
              <text class="mt-1 text-center text-xs">{{ item.meta?.title || item.name }}</text>
            </wd-grid-item>
          </wd-grid>
        </wd-card>
      </block>
    </view>
    <tabbar />
  </view>
</template>

<style scoped>
.menu-item {
  padding: 10rpx 0;
}

.menu-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  border-radius: 16rpx !important;
  padding: 0;
  margin: 0 8px;
}
/* 修复wot ui组件样式 */
:deep(.wd-grid-item__content) {
  padding: 0;
}
</style>
