<template>
  <div class="debate-argument" :style="{ borderLeftColor: expertColor }">
    <div class="debate-argument__header">
      <span class="debate-argument__name" :style="{ color: expertColor }">{{ expertName }}</span>
      <a-tag color="purple">第{{ 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
  expertName: string
  expertColor: string
}>()

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

<style scoped>
.debate-argument {
  padding: 8px 12px;
  border-left: 3px solid #722ed1;
  background: #fafafa;
  border-radius: 4px;
}
.debate-argument__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.debate-argument__name { font-weight: 600; }
</style>
