<template>
  <div>
    <div style="display: flex;align-items: flex-end;">
      <span style="font-size: 18px;font-weight: bold;color: #333333;line-height: 26px;margin-left:5px">{{ $t('messagedetail.header') }}</span>
    </div>
    <div style="background: #F5F5F5;border-radius: 12px;height:60px;margin-top: 20px">
      <div style="display: flex;;margin-left: 15px;">
        <img src="@/assets/message/open.png" alt style="width: 26px;height: 26px;margin-top: 15px;">
        <span style="font-size: 18px;font-weight: bold;color: #333333;line-height: 26px;margin-left:5px;margin-top: 15px;">{{ $t('messagedetail.title') }}：{{ message.title }}</span>
      </div>
    </div>
    <div style="background: #F5F5F5;border-radius: 12px;margin-top: 20px;">
      <br>
      <div style="margin-left: 15px;">
        <span style="font-size: 14px;font-weight: 500;">{{ $t('messagedetail.type') }}：{{ type[message.type] }}</span>
      </div>
      <div style="margin-top: 10px;margin-left: 15px;">
        <span style="font-size: 14px;font-weight: 500;color: #999;">{{ $t('messagedetail.createTime') }}：{{ parseTime(message.createTime) }}</span>
      </div>
      <div style="margin-top: 20px;" />
      <div style="display: flex;">
        <div style="margin-top: 30px;margin-right: 20px;font-size: 14px;margin-left: 20px;">{{ message.content }}</div>
        <div>
          <img src="@/assets/message/detail.png" alt object-fit="cover" style="width: 260px;height: 176px;margin-top: 20px;margin-right: 20px;">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMessage, redInternalMessage } from '@/api/message'
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      parseTime,
      message: {},
      type: ['', this.$t('messagedetail.type1'), this.$t('messagedetail.type2'), this.$t('messagedetail.type3')]
    }
  },
  created() {
    const id = this.$route.query.id
    this.getDetail(id)
    redInternalMessage({ messageId: id })
  },
  methods: {
    getDetail(id) {
      getMessage({ id: id }).then(r => {
        this.message = r.data
        this.$bus.$emit('reload')
      })
    }
  }
}
</script>

<style>

</style>
