<template>
  <div class="debate-banner">
    <div class="debate-banner__icon"><AuditOutlined /></div>
    <div class="debate-banner__body">
      <div class="debate-banner__title">辩论开始</div>
      <div class="debate-banner__topic">{{ topic }}</div>
      <div class="debate-banner__participants">
        <span class="debate-banner__label">参与专家：</span>
        <a-tag v-for="p in participants" :key="p" color="purple">{{ p }}</a-tag>
      </div>
      <div v-if="opening" class="debate-banner__opening">
        <AssistantText :message="openingMessage" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { AuditOutlined } from '@ant-design/icons-vue'
import AssistantText from './AssistantText.vue'
import type { IChatMessage } from '@/api/types'

const props = defineProps<{
  topic: string
  participants: string[]
  opening: string
}>()

const openingMessage = computed<IChatMessage>(() => ({
  id: 'debate-opening',
  role: 'assistant',
  content: props.opening,
  timestamp: new Date().toISOString(),
  status: 'completed',
}))
</script>

<style scoped>
.debate-banner {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-left: 3px solid #722ed1;
  background: #f9f0ff;
  border-radius: 4px;
}
.debate-banner__icon { font-size: 24px; }
.debate-banner__title { font-weight: 600; color: #722ed1; margin-bottom: 4px; }
.debate-banner__topic { font-size: 14px; margin-bottom: 8px; }
.debate-banner__participants { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.debate-banner__label { font-size: 12px; color: #666; }
.debate-banner__opening { margin-top: 8px; }
</style>
