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

<script>
import Card from '@/components/Card'
import * as api from '@/api'
export default {
  name: 'Message',
  components: { Card },
  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
    }
  },
  methods: {
    // 获取消息详情
    getDetail() {
      api.getMessage(this.pid).then(response => {
        this.detail = response
      })
    },
    // 确认读消息
    onRead() {
      api.readMessage(this.pid).then(() => {
        this.$router.go(-1)
      })
    }
  },
  beforeMount() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.message-card {
  min-height: calc(100vh - 60px);
}
.message-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.message-content {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}
</style>
