<template>
  <Alert
    v-if="showNotify && getNotifyApp"
    type="info"
    class="mb-10"
    closable
    @on-close="onClose"
  >
    <b class="mr-2">{{ getNotifyApp.title }}</b>
    <span v-html="getNotifyApp.content" />
    <a
      v-if="getNotifyApp.btn_url && getNotifyApp.btn_text"
      :href="getNotifyApp.btn_url || ''"
      target="_blank"
    >
      {{ getNotifyApp.btn_text }}
    </a>
  </Alert>
</template>

<script>
import { appSetting } from '@/plugins/setting';

export default {
  name: 'NotifyApp',
  data() {
    return {
      readId: appSetting.readNotifyId.get(),
    };
  },
  methods: {
    onClose() {
      this.isRead = true;
      appSetting.readNotifyId.set(this.getNotifyApp.uuid);
    },
  },
  computed: {
    isRead() {
      return this.getNotifyApp && this.readId === this.getNotifyApp.uuid;
    },
    showNotify() {
      return (
        !this.isRead
          && this.getNotifyApp
          && this.getNotifyApp.content
          && this.getNotifyApp.title
          && this.getNotifyApp.is_show
      );
    },
  },
};
</script>
