<template>
  <div class="message-list">
    <div
      v-for="item in messageList"
      :key="item.id"
      class="message-row"
      :style="item.isMe ? `flex-direction: row-reverse;` : ''"
    >
      <div class="avatar">
        {{ item.account[0] }}
      </div>

      <div class="message-item">
        <div class="sender" :style="item.isMe ? `text-align: right;` : ''">
          {{ item.account }}
        </div>
        <div
          class="text"
          :style="item.isMe ? `background-color: #89d961;` : ``"
          v-html="item.msg"
        ></div>
        <div class="time">{{ item.time }}</div>
      </div>
    </div>
  </div>
</template>
<script setup name="messageList">
import { toRefs } from "vue";

const props = defineProps({
  messageList: {
    type: Array,
    default: [],
  },
});
const { messageList } = toRefs(props);
</script>

<style scoped lang="scss">
.message-list {
  background-color: #f5f5f5;
  padding: 20px;
  min-height: 100px;
  margin-bottom: 20px;
  border-radius: 12px;
}
.message-row {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  .avatar {
    width: 40px;
    height: 40px;
    background-color: #bcbcbc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    // align-items: center;
    font-weight: 700;
    font-size: 24px;
  }
  .message-item {
    margin: 0 16px 0;
    .sender {
      font-size: 12px;
      color: #333;
    }
    .text {
      margin: 3px 0 3px;
      padding: 10px;
      background-color: #fff;
      border-radius: 10px;
      font-size: 16px;
    }
    .time {
      font-size: 12px;
      text-align: right;
      color: #333;
    }
  }
}
</style>
