<template>
  <GenericManager
    :uri="resource_uri"
    ref="gm"
    object_name="消息"
    show_search=1
    no_edit=1
    no_create=1
    no_details=1
    :actions="actions"
    :list_fields="['datetime', 'sender', 'subject', 'read']"
    :visible_fields="['datetime', 'sender', 'subject', 'read', 'content']"
  >
  </GenericManager>
  <Modal ref="message_modal"
    ok_button_text="关闭并标为已读"
    cancel_button_text="关闭并保持未读">
  <div>
    标题：
    <span class="message-subject">
      {{ modal_msg.subject }}
    </span>
  </div>
  <div>
    来自：
    <span>
      {{ modal_msg.sender }}
    </span>
  </div>
  <div>
    时间：
    <span>
      {{ format_timestamp(modal_msg.datetime) }}
    </span>
  </div>
  <pre class="message-body">{{ modal_msg.content }}</pre>
  </Modal>
</template>

<script>
export default {
  name: 'Inbox',
  props: [],
  components: {
  },
  data: function () {
    return {
      resource_uri: '/api/v1/message/',
      actions: [
        {
          name: '',
          handler: this.handle_show_message,
          icon: 'eye',
          title: '查看',
        },
        {
          name: '',
          handler: this.handle_mark_unread,
          icon: 'envelope',
          title: '查看',
        },
      ],
      modal_msg: {},
    };
  },
  computed: {
  },
  methods: {
    mark_read: async function(item, read) {
      await this.$root.api_patch(item.resource_uri, {
        read: read,
      });
      this.$refs.gm.reload_data();
    },
    handle_show_message: function(item) {
      this.modal_msg = item;
      this.$refs.message_modal.show((ok) => {
        if (ok) this.mark_read(item, true);
      });
    },
    handle_mark_unread: function(item) {
      this.mark_read(item, false);
    },
  },
  mounted() {
  },
}
</script>

<style scoped>
.message-body {
  padding: 1rem;
  border: 1px dashed #00f;
  margin: 1rem 0;
}
.message-subject {
  font-weight: bold;
}
</style>

