<!--
=============================================================================
企微IT智能服务台 — 集成系统卡片组件
=============================================================================
说明：外部系统集成卡片，显示系统名称、图标、状态指示灯、配置按钮
  可配置的系统（Dify/RAGFlow）显示"配置"按钮
  不可配置的系统仅显示状态和描述
-->
<template>
  <div class="integration-card" :class="{ 'is-configurable': integration.configurable }">
    <!-- 系统图标 -->
    <div
      class="integration-icon"
      :style="{ background: iconBg, color: iconColor }"
    >
      <el-icon :size="22">
        <component :is="icon" />
      </el-icon>
    </div>

    <!-- 系统名称 -->
    <div class="integration-name">{{ integration.name }}</div>

    <!-- 状态指示灯 -->
    <div class="integration-status">
      <el-tag :type="statusTagType" size="small" effect="dark">
        {{ statusText }}
      </el-tag>
    </div>

    <!-- 描述信息 -->
    <div class="integration-detail">
      <slot name="detail">
        <template v-if="integration.configurable && integration.config">
          <!-- url_key 模式（Dify / RAGFlow） -->
          <template v-if="integration.config_type === 'url_key' || !integration.config_type">
            <div v-if="integration.config.api_url" class="config-info">API: {{ integration.config.api_url }}</div>
            <div class="config-info">{{ integration.config.api_key_set ? '密钥已配置' : '密钥未配置' }}</div>
          </template>
          <!-- access_key 模式（火绒安全） -->
          <template v-else-if="integration.config_type === 'access_key'">
            <div v-if="integration.config.base_url" class="config-info">URL: {{ integration.config.base_url }}</div>
            <div class="config-info">{{ integration.config.access_key_id_set ? 'AccessKey 已配置' : 'AccessKey 未配置' }}</div>
          </template>
          <!-- account_password 模式（联软LV7000） -->
          <template v-else-if="integration.config_type === 'account_password'">
            <div v-if="integration.config.base_url" class="config-info">URL: {{ integration.config.base_url }}</div>
            <div class="config-info">{{ integration.config.api_account_set ? '账号已配置' : '账号未配置' }}</div>
          </template>
        </template>
      </slot>
    </div>

    <!-- 操作按钮 -->
    <div class="integration-actions">
      <el-button
        v-if="integration.configurable"
        size="small"
        type="primary"
        @click="$emit('configure', integration)"
      >
        配置
      </el-button>
      <el-button
        v-if="integration.configurable"
        size="small"
        @click="$emit('test', integration)"
      >
        测试
      </el-button>
      <el-button
        v-else
        size="small"
        @click="$emit('view', integration)"
      >
        查看
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
// ==========================================================================
// 依赖导入
// ==========================================================================
import { computed } from 'vue'
import type { Integration } from '@/types'

// ==========================================================================
// Props / Emits
// ==========================================================================
const props = defineProps<{
  /** 集成系统数据 */
  integration: Integration
  /** 图标组件名 */
  icon: string
  /** 图标背景色 */
  iconBg: string
  /** 图标颜色 */
  iconColor: string
}>()

defineEmits<{
  /** 配置按钮点击 */
  configure: [integration: Integration]
  /** 测试按钮点击 */
  test: [integration: Integration]
  /** 查看按钮点击 */
  view: [integration: Integration]
}>()

// ==========================================================================
// 计算属性
// ==========================================================================

/** 状态标签类型 */
const statusTagType = computed(() => {
  switch (props.integration.status) {
    case 'connected': return 'success'
    case 'partial': return 'warning'
    case 'disconnected': return 'info'
    case 'pending': return 'info'
    default: return 'info'
  }
})

/** 状态文本 */
const statusText = computed(() => {
  switch (props.integration.status) {
    case 'connected': return '已连接'
    case 'partial': return '部分集成'
    case 'disconnected': return '未连接'
    case 'pending': return '待确认'
    default: return props.integration.status
  }
})
</script>

<style scoped>
/* 集成卡片 */
.integration-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  transition: border-color 0.2s;
}
.integration-card:hover {
  border-color: var(--border-hover);
}
.integration-card.is-configurable {
  border-color: var(--accent);
  border-opacity: 0.3;
}

/* 图标 */
.integration-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

/* 名称 */
.integration-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
}

/* 状态 */
.integration-status {
  margin-bottom: 12px;
}

/* 详情 */
.integration-detail {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
  min-height: 32px;
}

.config-info {
  margin-bottom: 2px;
}

/* 操作按钮 */
.integration-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}
</style>
