<script setup lang="ts">
import { ElButton } from 'element-plus'
import { DocumentCopy } from '@element-plus/icons-vue'
import { calendar } from '@/utils'
import { $font_color } from '@/styles/variate'
import type { Message } from '@/api/chat'

type MessageProps = Message & {
  loading?: boolean
}

const props = defineProps<MessageProps>()
const emit = defineEmits<(e: 'copy', content: string) => void>()
const ai = props.role !== 'user'
const avatar = ai
  ? 'https://word-1313840333.cos.ap-guangzhou.myqcloud.com/1871559469209006081.png'
  : 'https://word-1313840333.cos.ap-guangzhou.myqcloud.com/1871826034265468929.png'
const style = ai ? 'background-color: #FFFFFF;' : 'background-color: #FFFCD9;'

const text = computed(() => {
  if (!props.reasoning) return props.content
  return `<blockquote>${props.reasoning}</blockquote>${props.content}`
})
</script>

<template>
  <div class="message" :class="role">
    <div class="avatar">
      <img :src="avatar" alt="avatar" />
    </div>
    <div class="wrapper">
      <div class="content" :style="style">
        <div class="text">
          <AiText :text="text" />
        </div>
      </div>
      <div class="footer">
        <div class="time">{{ calendar(createTime) }}</div>
        <div class="actions">
          <ElButton
            :color="$font_color"
            :disabled="loading"
            :icon="DocumentCopy"
            size="large"
            circle
            @click="emit('copy', text)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/page/chat/index.scss' as *;

.message {
  display: flex;
  gap: 12px;
  max-width: 94%;
  color: $font-color;

  &.user {
    flex-direction: row-reverse;
    align-self: flex-end;

    .content {
      background-color: #ecf5ff;
    }
  }

  .avatar {
    width: 80px;
    height: 6.67vh;
    border-radius: 50%;
    border: 0.08vh solid $font-color;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #fffef2;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .content {
      padding: 1.67vh;
      background-color: #fffcd9;
      border-radius: 0.67vh;

      .text {
        font-size: 1.33vh;
        line-height: 1.5;
        // white-space: pre-wrap;
        word-break: normal;
      }
    }

    .footer {
      display: flex;
      gap: 15px;
      padding: 0 12px;
      align-items: center;
      justify-content: space-between;
      margin: 0.42vh 0 0.83vh;

      .time {
        font-size: $font_size;
        color: #999;
      }

      .actions {
        display: flex;
        gap: 8px;
        align-items: center;
      }
    }
  }
}
</style>
