<!-- =============================================================================
// 企微IT智能服务台 — H5用户端软件下载入口组件
// =============================================================================
// 说明：展示所有可下载的软件，按分类分组
//   显示名称 + 版本号 + 平台标签
//   点击下载链接直接下载
// ============================================================================= -->

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

    <!-- 无数据提示 -->
    <div v-else-if="Object.keys(groupedDownloads).length === 0" class="software-downloads__empty">
      <van-empty description="暂无软件下载" image="search" />
    </div>

    <!-- 按分类展示软件下载列表 -->
    <template v-else>
      <div
        v-for="(items, category) in groupedDownloads"
        :key="category"
        class="software-downloads__group"
      >
        <!-- 分类标题 -->
        <div class="software-downloads__category">{{ category }}</div>
        <!-- 该分类下的软件列表 -->
        <van-cell-group inset>
          <van-cell
            v-for="item in items"
            :key="item.id"
            :title="item.name"
            :label="versionLabel(item)"
            :icon="item.icon || 'down'"
            is-link
            @click="handleDownload(item)"
          >
            <!-- 右侧平台标签 -->
            <template #right-icon>
              <div class="software-downloads__platforms">
                <span
                  v-for="platform in item.platforms"
                  :key="platform"
                  class="software-downloads__tag"
                >
                  {{ platform }}
                </span>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
/**
 * SoftwareDownloads 软件下载入口组件
 * 从 API 获取软件下载数据，按分类分组展示
 * 显示名称、版本号、平台标签，点击下载
 */

import { computed } from 'vue'
import { useConversationStore } from '@/stores/conversation'
import type { SoftwareDownload } from '@/api/conversation'

const store = useConversationStore()

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

/** 软件下载按分类分组（从 store 计算属性获取） */
const groupedDownloads = computed(() => store.softwareDownloadsByCategory)

/**
 * 生成版本号标签文字
 * @param item 软件下载项
 * @returns 版本号文字（如 "v2.1.0"）
 */
function versionLabel(item: SoftwareDownload): string {
  return item.version ? `版本: ${item.version}` : ''
}

/**
 * 处理下载点击
 * 在企微内置浏览器中打开下载链接
 * @param item 软件下载项
 */
function handleDownload(item: SoftwareDownload): void {
  window.open(item.download_url, '_blank')
}
</script>

<style scoped>
/* 软件下载容器 */
.software-downloads {
  padding: 8px 0;
}

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

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

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

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

/* 平台标签容器 */
.software-downloads__platforms {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* 单个平台标签 */
.software-downloads__tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background-color: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
</style>
