<template>
  <div class="main-message">
    <div class="message-time">{{ detail.created_time }}</div>
    <h1 class="message-title">{{ detail.title }}</h1>
    <div class="message-content" v-html="detail.contents"></div>
    <!-- <input
      type="button"
      class="submit-button"
      value="我知道了"
      @click="onRead"
    /> -->
  </div>
</template>

<script>
import * as api from '@/api'
export default {
  name: 'Message',
  data() {
    return {
      detail: {}
    }
  },
  computed: {
    type() {
      return this.$route.params.type
    },
    title() {
      const typeMap = { 1: '组织消息', 2: '活动消息', 3: '系统消息' }
      return typeMap[this.type]
    },
    pid() {
      return this.$route.params.id
    }
  },
  metaInfo() {
    return {
      title: this.title
    }
  },
  methods: {
    // 获取消息详情
    getDetail() {
      api.getMessage(this.pid).then(response => {
        this.detail = response
      })
    },
    // 确认读消息
    onRead() {
      api.readMessage(this.pid).then(() => {
        this.$router.go(-1)
      })
    },
    read() {
      api.readMessage(this.pid).then(() => {})
    }
  },
  beforeMount() {
    this.getDetail()
    this.read()
  }
}
</script>

<style lang="scss" scoped>
.main-message {
  padding: 20px;
  min-height: 100vh;
  background-color: #f6f8f9;
}
.message-time {
  text-align: center;
  color: #a0a0a0;
}
.message-title {
  padding-top: 17px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.message-content {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}
</style>
