<template>
  <modal-template is-footer-hide :id="modalId">
    <div slot="title" ref="title">
      {{ $t('Common.Announcement') }}
    </div>
    <div slot="body">
      <div>
        <b-img fluid center :src="imagePath"></b-img>
      </div>
    </div>
  </modal-template>
</template>

<script>
import ModalTemplate from '@/elements/common/components/modalTemplate'
import moment from 'moment'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'ImageAnnouncementModal',
  components: { ModalTemplate },
  props: {
    imagePath: { type: String, required: true },
    toDate: { type: String, required: true },
    applicationCountryCode: { type: Array, default: () => [] },
  },
  data() {
    return {
      modalId: 'announcement',
    }
  },
  methods: {
    ...mapActions(['seenAnnouncement']),
    show() {
      if (!this.getAnnouncementSeenStatus && new Date() <= new Date(this.toDate)) {
        let isSelectedCountry =
          this.applicationCountryCode.indexOf(this.getMemberDetails.country.code_iso_2.toLowerCase()) > -1
        if (this.applicationCountryCode.length === 0 || isSelectedCountry) {
          this.$bvModal.show(this.modalId)
          this.seenAnnouncement()
        }
      }
    },
  },
  computed: {
    ...mapGetters(['getMemberDetails', 'getAnnouncementSeenStatus']),
  },
}
</script>
