<!-- =============================================================================
// 企微IT智能服务台 — H5用户端 AI 助手面板容器
// =============================================================================
// 说明：AI 助手面板的容器组件，使用 Vant4 Tab 组件
//   4个Tab：相似问题 | 审批流程 | 软件下载 | 搜索
//   右上角展开/收起按钮（移动端）
// ============================================================================= -->

<template>
  <div class="ai-helper-panel">
    <!-- 面板头部：标题 + 收起按钮 -->
    <div class="ai-helper-panel__header">
      <span class="ai-helper-panel__title">AI 助手</span>
      <!-- 移动端收起按钮 -->
      <van-icon
        name="cross"
        size="18"
        color="var(--text-tertiary)"
        class="ai-helper-panel__close"
        @click="handleClose"
      />
    </div>

    <!-- Tab 切换区域 -->
    <van-tabs v-model:active="activeTab" sticky animated swipeable>
      <!-- Tab1: 相似问题（暂未实现，显示占位符） -->
      <van-tab title="相似问题">
        <ComingSoon title="相似问题与做法" />
      </van-tab>

      <!-- Tab2: 审批流程 -->
      <van-tab title="审批流程">
        <ApprovalLinks />
      </van-tab>

      <!-- Tab3: 软件下载 -->
      <van-tab title="软件下载">
        <SoftwareDownloads />
      </van-tab>

      <!-- Tab4: 搜索（暂未实现，显示占位符） -->
      <van-tab title="搜索">
        <ComingSoon title="知识库搜索" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
/**
 * AiHelperPanel AI 助手面板容器
 * 4个Tab模块：
 *   - 相似问题：占位符"即将上线"
 *   - 审批流程：真实功能（从 API 获取数据）
 *   - 软件下载：真实功能（从 API 获取数据）
 *   - 搜索：占位符"即将上线"
 * 移动端可通过右上角按钮收起面板
 */

import { ref } from 'vue'
import { useConversationStore } from '@/stores/conversation'
import ComingSoon from './ComingSoon.vue'
import ApprovalLinks from './ApprovalLinks.vue'
import SoftwareDownloads from './SoftwareDownloads.vue'

const store = useConversationStore()

/** 当前激活的 Tab 索引（0=相似问题, 1=审批流程, 2=软件下载, 3=搜索） */
const activeTab = ref<number>(1) // 默认显示审批流程

/**
 * 收起面板（移动端使用）
 * 通知 store 切换面板可见性
 */
function handleClose(): void {
  store.toggleAssistantPanel()
}
</script>

<style scoped>
/* AI 助手面板容器 */
.ai-helper-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-secondary);
}

/* 面板头部 */
.ai-helper-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

/* 面板标题 */
.ai-helper-panel__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 收起按钮 */
.ai-helper-panel__close {
  cursor: pointer;
  padding: 4px;
}

/* Tab 区域占满剩余空间 */
.ai-helper-panel :deep(.van-tabs) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ai-helper-panel :deep(.van-tabs__content) {
  flex: 1;
  overflow-y: auto;
}

.ai-helper-panel :deep(.van-tab__panel) {
  min-height: 100%;
}
</style>
