<!--
=============================================================================
企微IT智能服务台 — 配置分组卡片组件
=============================================================================
说明：配置分组卡片，显示组名、描述，每项配置支持：
  - 布尔值：使用 el-switch 开关
  - 数值：使用 el-input-number
  - JSON 数组/字符串：显示值 + 编辑按钮
-->
<template>
  <el-card class="config-group-card" shadow="never">
    <!-- 卡片头部 -->
    <template #header>
      <div class="config-group-header">
        <div class="config-group-title">
          <el-icon v-if="icon" :size="16" :style="{ color: iconColor || 'var(--accent)', marginRight: '6px' }">
            <component :is="icon" />
          </el-icon>
          {{ group.name }}
        </div>
        <el-tag v-if="statusTag" :type="statusTag.type" size="small">
          {{ statusTag.text }}
        </el-tag>
      </div>
      <div v-if="groupDescription" class="config-group-desc">{{ groupDescription }}</div>
    </template>

    <!-- 配置项列表 -->
    <div class="config-items">
      <div
        v-for="item in group.items"
        :key="item.key"
        class="config-item"
      >
        <div class="config-item-info">
          <span class="config-item-name">{{ item.description }}</span>
          <span v-if="itemStage" class="config-item-stage">{{ itemStage }}</span>
        </div>
        <div class="config-item-control">
          <!-- 布尔值：开关 -->
          <el-switch
            v-if="item.value_type === 'boolean'"
            :model-value="item.value === 'true'"
            @change="(val: boolean) => $emit('update', item.key, val ? 'true' : 'false')"
          />

          <!-- 数值：输入框 -->
          <el-input-number
            v-else-if="item.value_type === 'number'"
            :model-value="Number(item.value)"
            :min="0"
            :max="999"
            size="small"
            controls-position="right"
            @change="(val: number | undefined) => $emit('update', item.key, String(val ?? 0))"
            style="width: 120px"
          />

          <!-- JSON 数组/字符串：代码显示 + 编辑按钮 -->
          <template v-else>
            <code class="config-json-preview">{{ truncateValue(item.value) }}</code>
            <el-button size="small" text type="primary" @click="$emit('edit', item)">
              编辑
            </el-button>
          </template>
        </div>
      </div>
    </div>
  </el-card>
</template>

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

// ==========================================================================
// Props / Emits
// ==========================================================================
defineProps<{
  /** 配置分组数据 */
  group: ConfigGroup
  /** 分组图标名称 */
  icon?: string
  /** 图标颜色 */
  iconColor?: string
  /** 分组描述 */
  groupDescription?: string
  /** 状态标签 */
  statusTag?: {
    type: 'success' | 'warning' | 'danger' | 'info'
    text: string
  }
  /** 配置项阶段标签 */
  itemStage?: string
}>()

defineEmits<{
  /** 配置值更新 */
  update: [key: string, value: string]
  /** 编辑 JSON 值 */
  edit: [item: ConfigGroup['items'][0]]
}>()

// ==========================================================================
// 工具方法
// ==========================================================================

/** 截断过长的配置值显示 */
function truncateValue(value: string): string {
  if (value.length > 40) {
    return value.substring(0, 40) + '...'
  }
  return value
}
</script>

<style scoped>
/* 配置分组卡片 */
.config-group-card {
  background-color: var(--bg-secondary);
  border-color: var(--border);
}

/* 卡片头部 */
.config-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.config-group-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.config-group-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* 配置项列表 */
.config-items {
  display: flex;
  flex-direction: column;
}

/* 单个配置项 */
.config-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.config-item:first-child {
  border-top: none;
  padding-top: 0;
}

/* 配置项信息 */
.config-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.config-item-name {
  font-size: 13px;
  color: var(--text-primary);
}
.config-item-stage {
  font-size: 11px;
  color: var(--text-muted);
}

/* 配置项控件 */
.config-item-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* JSON 预览 */
.config-json-preview {
  font-size: 11px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
