<template>
  <div :class="messageDivClassList">
    <el-avatar :src="`data:image/png;base64,${props.data.base64}`" />
    <div class="message-user">
      <div :class="tagBoxClassList">
        <el-tag :type="tagType">{{ props.data.sender }}</el-tag>
        <el-tag :type="tagType">{{ props.data.sendtime }}</el-tag>
      </div>
      <el-popover
          trigger="contextmenu"
      >
        <el-link type="info" @click="recall">撤回</el-link>
        <template #reference>
          <div :class="messageContentBoxClassList">
            <div :class="arrowDivClassList"></div>
            <div :class="messageBoxDivClassList">{{props.data.content}}</div>
          </div>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {MessageData, isSelf} from "../entities/MessageData";
import {computed} from "vue";
const props = defineProps<{data: MessageData}>()
const emit = defineEmits(["remove"])
const self = computed<boolean>(() => isSelf(props.data));
const messageDivClassList = computed<string[]>(() => ['message', self.value ? 'message-self' : '']);
const messageBoxDivClassList = computed<string[]>(() => ['message-box', self.value ? 'message-box-self' : '']);
const messageContentBoxClassList = computed<string[]>(() => ['message-content-box', self.value ? 'message-content-box-self' : '']);
const arrowDivClassList = computed<string[]>(() => ['arrow', self.value ? 'arrow-self' : '']);
const tagBoxClassList = computed<string[]>(() => ['tag-box', self.value ? 'tag-box-self' : '']);
const tagType = computed<string>(() => self.value ? 'danger' : 'success');
const recall = () => {
  emit("remove", props.data.id);
}
</script>

<style scoped>
.message {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  align-items: flex-end;
}
.message-self {
  flex-direction: row-reverse;
}
.message-box {
  padding: 4px;
  width: fit-content;
  height: fit-content;
  background-color: #FFFFFF;
}
.message-box-self{
  background-color: #71c346;
}
.arrow {
  width: 10px;
  height: 10px;
  background-image: url("/ffffff.svg");
}
.arrow-self {
  background-image: url("/95ec69.svg");
}
.message-content-box {
  display: flex;
  flex-direction: row;
}
.message-content-box-self {
  flex-direction: row-reverse;
}
.message-user {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tag-box {
  display: flex;
  flex-direction: column;
}
.tag-box-self {
  align-items: flex-end;
}
.tag-box > span {
  margin-bottom: 5px;
  width: min-content;
}
</style>