<template>
  <div class="text_content need_bg">
    <img src="@/assets/images/chatFooter/file.png" class="pic" alt="">
    <div>
      <div>{{ fileElem.fileName }}</div>
      <div v-if="isSucceed">
        <span class="fz size">{{ getFileSize() }}</span> -
        <a :href="fileElem.sourceUrl" :download="fileElem.fileName" class="fz link">下载</a>
      </div>
      <div v-else class="fz">上传中...</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ExedMessageItem} from "./data";
import {MessageStatus} from "@openim/wasm-client-sdk";

type TextMsgRendererProps = {
  message: ExedMessageItem;
}

const props = defineProps<TextMsgRendererProps>();
const fileElem = props.message.fileElem || {
  fileName: '',
  sourceUrl: '',
  fileSize: 0
};
const isSucceed = computed(() => props.message.status === MessageStatus.Succeed);
const getFileSize = () => {
  const fileSize = fileElem.fileSize / 1024;
  if (fileSize > 1024) {
    return (fileSize / 1024).toFixed(2) + 'M';
  } else {
    return fileSize.toFixed(1) + 'KB';
  }
};
</script>

<style lang="scss" scoped>
.text_content {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
}

.pic {
  width: 38px;
  height: 38px;
}

.fz {
  font-size: 13px;
}

.size {
  color: gray;
}

.link {
  color: #0289fa;
}
</style>
