<template>
  <div
    class="chat-message"
    :class="{ 'user-message': isMyself, 'ai-message': !isMyself }"
  >
    <!-- AI消息显示头像 -->
    <div v-if="!isMyself" class="chat-avatar">
      <img :src="value.thumb" alt="AI Avatar" />
    </div>

    <!-- 消息内容 -->
    <div class="message-content">
      <div class="message-text">
        {{ value.content }}
      </div>
      <!-- AI消息显示操作栏 -->
      <div v-if="!isMyself" class="message-actions flex">
        <SvgIcon
          v-for="item in actionList"
          :key="item.value"
          :name="item.icon"
          size="39"
          @click.stop="handleClickAction(item.value)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
// 定义消息类型
interface ChatMessage {
  id: string
  content: string
  userId: string
  time: string
  thumb: string
}

// 定义操作项类型
interface ActionItem {
  value: string
  icon: string
}

// 定义组件props类型
interface NoticeItemProps {
  value: ChatMessage
}

const props = defineProps<NoticeItemProps>()

const isMyself = computed(()=>{
  return props.value.userId === '1'
})

const handleClickAction = (value: string): void => {
  console.log('click Action', value)
}

const actionList: ActionItem[] = [
  {
    value: 'thumbup',
    icon: 'thumbup'
  },
  {
    value: 'thumbdown',
    icon: 'thumbdown'
  },
  {
    value: 'refresh',
    icon: 'refresh'
  },
  {
    value: 'upload',
    icon: 'upload'
  },
  {
    value: 'more',
    icon: 'more'
  }
]
</script>

<style lang="less" scoped>
.chat-message {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-start;
  .message-text {
    font-size: 4.2rem;
    font-family: 'robotoBold';
    line-height: 121%;
    font-weight: 400;
    background-color: #efefef;
    padding: 4.95rem 3.95rem;
  }

  &.user-message {
    justify-content: flex-end;

    .message-content {
      align-items: flex-end;

      .message-text {
        border-radius: 2rem 2rem 0 2rem;
      }
    }
  }

  &.ai-message {
    justify-content: flex-start;

    .message-content {
      align-items: flex-start;

      .message-text {
        color: #000;
        border-radius: 0 2rem 2rem 2rem;
      }
    }
  }
}

.chat-avatar {
  width: 7.8rem;
  height: 7.4rem;
  border-radius: 50%;
  margin-right: 1.88rem;

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

.message-content {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.message-actions {
  margin-top: 2.6rem;
  color: #6b6b6b;
  column-gap: 1.61rem;
  .svg-icon {
    cursor: pointer;
  }
}
</style>
