<template>
  <div class="debate-summary">
    <div class="debate-summary__header">
      <span class="debate-summary__moderator">{{ moderatorName }}</span>
      <a-tag color="orange">第{{ round }}轮小结</a-tag>
    </div>
    <AssistantText :message="textMessage" />
  </div>
</template>

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

const props = defineProps<{
  content: string
  round: number
  moderatorName: string
}>()

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

<style scoped>
.debate-summary {
  padding: 8px 12px;
  border-left: 3px solid #fa8c16;
  background: #fff7e6;
  border-radius: 4px;
  margin-left: 16px;
}
.debate-summary__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.debate-summary__moderator { font-weight: 600; color: #fa8c16; }
</style>
