<template>
  <el-popover
    ref="popoverRef"
    :width="700"
    trigger="hover"
    popper-class="fast-enter-popover"
    :show-arrow="false"
    placement="bottom-start"
    :offset="0"
    popper-style="border: 1px solid var(--art-border-dashed-color); border-radius: calc(var(--custom-radius) / 2 + 4px); "
  >
    <template #reference>
      <div class="fast-enter-trigger">
        <div class="btn">
          <i class="iconfont-sys">&#xe81a;</i>
          <span class="red-dot"></span>
        </div>
      </div>
    </template>

    <div class="fast-enter">
      <div class="apps-section">
        <div class="apps-grid">
          <!-- 左侧应用列表 -->
          <div
            class="app-item"
            v-for="app in applications"
            :key="app.name"
            @click="handleAppClick(app.path)"
          >
            <div class="app-icon">
              <i class="iconfont-sys" v-html="app.icon" :style="{ color: app.iconColor }"></i>
            </div>
            <div class="app-info">
              <h3>{{ app.name }}</h3>
              <p>{{ app.description }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="quick-links">
        <h3>快速链接</h3>
        <ul>
          <li v-for="link in quickLinks" :key="link.name" @click="handleAppClick(link.path)">
            <span>{{ link.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router'
  import { ref, computed } from 'vue'
  import { RoutesAlias } from '@/router/routesAlias'
  import { WEB_LINKS } from '@/utils/constants'
  import { useUserStore } from '@/store/modules/user'

  const router = useRouter()
  const popoverRef = ref()
  const userStore = useUserStore()

  interface Application {
    name: string
    description: string
    icon: string
    iconColor: string
    path: string
    permission?: string
  }

  interface QuickLink {
    name: string
    path: string
  }

  const applications = computed<Application[]>(() => {
    const apps: Application[] = [
      {
        name: '官方文档',
        description: '使用指南与开发文档',
        icon: '&#xe788;',
        iconColor: '#ffb100',
        path: WEB_LINKS.DOCS
      },
      {
        name: '技术支持',
        description: '技术支持与问题反馈',
        icon: '&#xe86e;',
        iconColor: '#ff6b6b',
        path: WEB_LINKS.COMMUNITY
      },
      {
        name: '哔哩哔哩',
        description: '技术分享与交流',
        icon: '&#xe6b4;',
        iconColor: '#FB7299',
        path: WEB_LINKS.BILIBILI
      }
    ]

    const menus = userStore.menus || []

    const hasMenuPermission = (permCode: string): boolean => {
      const findMenu = (items: any[]): boolean => {
        for (const item of items) {
          if (item.perm_code === permCode) return true
          if (item.children && item.children.length > 0) {
            if (findMenu(item.children)) return true
          }
        }
        return false
      }
      return findMenu(menus)
    }

    if (hasMenuPermission('menu:dashboard')) {
      apps.unshift({
        name: '工作台',
        description: '系统概览与数据统计',
        icon: '&#xe721;',
        iconColor: '#377dff',
        path: RoutesAlias.Dashboard
      })
    }

    if (hasMenuPermission('menu:analysis')) {
      apps.unshift({
        name: '分析页',
        description: '数据分析与可视化',
        icon: '&#xe812;',
        iconColor: '#ff3b30',
        path: RoutesAlias.Analysis
      })
    }

    if (hasMenuPermission('menu:ecommerce')) {
      apps.unshift({
        name: '电子商务',
        description: '电商数据统计',
        icon: '&#xe856;',
        iconColor: '#00b42a',
        path: RoutesAlias.Ecommerce
      })
    }

    return apps
  })

  const quickLinks: QuickLink[] = [
    { name: '登录', path: RoutesAlias.Login },
    { name: '个人中心', path: RoutesAlias.UserCenter }
  ]

  const handleAppClick = (path: string) => {
    if (path.startsWith('http')) {
      window.open(path, '_blank')
    } else {
      router.push(path)
    }
    popoverRef.value?.hide()
  }
</script>

<style lang="scss" scoped>
  .fast-enter-trigger {
    display: flex;
    gap: 8px;
    align-items: center;

    .btn {
      position: relative;
      display: block;
      width: 38px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.2s;

      i {
        display: block;
        font-size: 19px;
        color: var(--art-gray-600);
      }

      &:hover {
        color: var(--main-color);
        background-color: rgba(var(--art-gray-200-rgb), 0.7);
      }

      .red-dot {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 6px;
        height: 6px;
        background-color: var(--el-color-danger);
        border-radius: 50%;
      }
    }
  }

  .fast-enter {
    display: grid;
    grid-template-columns: 2fr 0.8fr;

    .apps-section {
      .apps-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
      }

      .app-item {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 8px 12px;
        margin-right: 12px;
        cursor: pointer;
        border-radius: 8px;

        &:hover {
          background-color: rgba(var(--art-gray-200-rgb), 0.7);

          .app-icon {
            background-color: transparent !important;
          }
        }

        .app-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 46px;
          height: 46px;
          background-color: rgba(var(--art-gray-200-rgb), 0.7);
          border-radius: 8px;

          i {
            font-size: 20px;
          }
        }

        .app-info {
          h3 {
            margin: 0;
            font-size: 14px;
            font-weight: 500;
            color: var(--art-text-gray-800);
          }

          p {
            margin: 4px 0 0;
            font-size: 12px;
            color: var(--art-text-gray-500);
          }
        }
      }
    }

    .quick-links {
      padding: 8px 0 0 24px;
      border-left: 1px solid var(--el-border-color-lighter);

      h3 {
        margin: 0 0 10px;
        font-size: 16px;
        font-weight: 500;
        color: var(--art-text-gray-800);
      }

      ul {
        li {
          padding: 8px 0;
          cursor: pointer;

          &:hover {
            span {
              color: var(--el-color-primary);
            }
          }

          span {
            color: var(--art-text-gray-600);
            text-decoration: none;
          }
        }
      }
    }
  }
</style>
