<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'

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

// 颜色数组
const colors = [
  '#00A845', // 暗绿色
  '#1E5FD1', // 暗蓝色
  '#D15700', // 暗橙色
  '#B000D1', // 暗紫色
  '#D11336', // 暗红色
  '#0095AF', // 暗青色
  '#D13200', // 暗橙红色
  '#1E4DC1', // 暗靛蓝色
  '#009C85', // 暗蓝绿色
  '#D1B200'  // 暗黄色
]

// 页面参数
const menuData = ref<MenuItem[]>([])
const title = ref('')

// 获取页面参数
onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options
  
  if (options.menuData) {
    menuData.value = JSON.parse(decodeURIComponent(options.menuData as string))
  }
  
  if (options.title) {
    title.value = decodeURIComponent(options.title as string)
  }
  
  // 更新页面标题
  uni.setNavigationBarTitle({
    title: title.value
  })
})

// 将字符串转换为1-10的数字
function stringToNumber1_10(str: string) {
  let hash = 0;
  
  // 遍历字符串计算哈希值
  for (let i = 0; i < str.length; i++) {
    hash = ((hash << 5) - hash) + str.charCodeAt(i);
    hash |= 0; // 转换为32位整数
  }
  
  // 将哈希值映射到 1-10 范围内
  return Math.abs(hash) % 10 + 1;
}

// 根据perms获取背景色
function getBackgroundColor(perms?: string) {
  if (!perms) return '#4CAF50'; // 默认颜色
  const index = stringToNumber1_10(perms) - 1; // 转换为0-9的索引
  return colors[index];
}

// 处理菜单项点击
function handleMenuItemClick(menu: MenuItem) {
  console.log(menu)
  if (menu.children && menu.children.length > 0) {
    return
  }
  // 根据菜单ID执行相应操作
  if (menu.component) {
    // 构建带参数的URL
    let url = menu.component;
    if (menu.perms) {
      url += (url.includes('?') ? '&' : '?') + 'perms=' + encodeURIComponent(menu.perms);
    }
    uni.navigateTo({
      url: url,
    })
  } else {
    uni.showToast({
      title: `点击了${menu.meta?.title || menu.name}`,
      icon: 'none',
    })
  }
}
</script>

<template>
  <view class="min-h-screen bg-gray-100">
    <!-- 菜单内容 -->
    <view>
      <block v-if="menuData.length === 0">
        <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">暂无菜单数据</text>
        </view>
      </block>
      <block v-else>
        <wd-card
          v-for="(group, index) in [menuData]"
          :key="index"
          style="margin: 0px;"
          :border="true"
          :shadow="false">
          <wd-grid :column="4" :gutter="10">
            <wd-grid-item
              v-for="item in group"
              :key="item.id"
              class="menu-item"
              @click="handleMenuItemClick(item)"
            >
              <wd-card
                size="small"
                :border="false"
                class="menu-card"
                :style="{ backgroundColor: `${getBackgroundColor(item.perms)}` }">
                <wd-icon
                  :name="item.meta?.icon === '#' ? 'list' : item.meta?.icon"
                  color="#ffffff"
                  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>
  </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>
