<!-- =============================================================================
// 企微IT智能服务台 — H5用户端审批流程链接组件
// =============================================================================
// 说明：展示所有审批流程链接，按分类分组
//   使用 Vant4 CellGroup + Cell 组件
//   点击链接在企微内置浏览器中打开
// ============================================================================= -->

<template>
  <div class="approval-links">
    <!-- 加载中提示 -->
    <div v-if="loading" class="approval-links__loading">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>

    <!-- 无数据提示 -->
    <div v-else-if="Object.keys(groupedLinks).length === 0" class="approval-links__empty">
      <van-empty description="暂无审批流程" image="search" />
    </div>

    <!-- 按分类展示审批链接 -->
    <template v-else>
      <div
        v-for="(links, category) in groupedLinks"
        :key="category"
        class="approval-links__group"
      >
        <!-- 分类标题 -->
        <div class="approval-links__category">{{ category }}</div>
        <!-- 该分类下的链接列表 -->
        <van-cell-group inset>
          <van-cell
            v-for="link in links"
            :key="link.id"
            :title="link.title"
            :icon="link.icon || 'link-o'"
            is-link
            @click="openLink(link.url)"
          >
            <!-- 右侧箭头 -->
            <template #right-icon>
              <van-icon name="arrow" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
/**
 * ApprovalLinks 审批流程链接组件
 * 从 API 获取审批流程数据，按分类分组展示
 * 点击链接在企微内置浏览器中打开
 */

import { computed } from 'vue'
import { useConversationStore } from '@/stores/conversation'
const store = useConversationStore()

/** 加载状态：当审批链接列表为空且未初始化时视为加载中 */
const loading = computed(() => {
  return store.approvalLinks.length === 0 && !store.initialized
})

/** 审批链接按分类分组（从 store 计算属性获取） */
const groupedLinks = computed(() => store.approvalLinksByCategory)

/**
 * 打开审批流程链接
 * 在企微内置浏览器中打开目标链接
 * @param url 审批流程链接地址
 */
function openLink(url: string): void {
  // 在企微 WebView 中直接使用 window.open 即可在内置浏览器中打开
  window.open(url, '_blank')
}
</script>

<style scoped>
/* 审批链接容器 */
.approval-links {
  padding: 8px 0;
}

/* 加载中状态 */
.approval-links__loading {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

/* 空数据状态 */
.approval-links__empty {
  padding: 20px 0;
}

/* 分类分组容器 */
.approval-links__group {
  margin-bottom: 12px;
}

/* 分类标题 */
.approval-links__category {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 8px 16px 4px;
  font-weight: 500;
}
</style>
