<template>
  <div v-if="show" id="gbc-opportunity-board-card">
    <b-card
      :img-src="constants.apiHost + '/files/' + data.image"
      :img-alt="data.title"
    >
      <h2 slot="header" class="is-size-3 is-bold">{{ data.title.substring(0, 25) }}..</h2>
      <b-card-text>
        <div v-if="statusDel_D" v-html="data.description.substring(0, 50)">
        </div>
        <div v-if="statusDel_E" class="statusDel-on">
          <button id="confDel" class="btn" @click="clickDel()">
            <font-awesome-icon :icon="['fas', 'trash']" class="fa-4x"></font-awesome-icon>
          </button>
        </div>
      </b-card-text>
      <div slot="footer">
        <div v-if="statusDel_D" class="row">
          <a class="col-4" :href="constants.url+'/opportunities/details/'+data.slug"><button class="btn">
            <font-awesome-icon :icon="['fas', 'eye']" class="fa-1.5x"></font-awesome-icon>
          </button></a>
          <a class="col-4" :href="constants.url+'/opportunities/post/'+data.opportunity_id"><button class="btn">
            <font-awesome-icon :icon="['fas', 'pencil-alt']" class="fa-1.5x"></font-awesome-icon>
          </button></a>
          <a class="col-4" href="#">
            <button id="clickDel" class="btn" @click="statusDel_off()">
              <font-awesome-icon :icon="['fas', 'trash']" class="fa-1.5x"></font-awesome-icon>
            </button>
          </a>
        </div>
        <div v-if="statusDel_E" class="statusDel-on">
          <div class="cancelDel row">
            <div class="col-7"></div>
            <button class="btn col-4" @click="statusDel_on()">
              <font-awesome-icon :icon="['fas', 'window-close']" class="fa-1.5x"></font-awesome-icon>
            </button>
          </div>
        </div>
      </div>
    </b-card>
  </div>
</template>

<script>
import C from '../../constants'

export default {
  name: 'OpportunityBoardCard',
  components: {},
  props: {
    data: {
      type: Object,
      required: true,
      default: function() {
        return {
          title: 'XXX',
          description: 'XXXXXXXXX',
          image: '284',
          opportunity_id: null
        }
      }
    },
    constants: {
      type: Object,
      default: function() {
        return C
      }
    }
  },
  data() {
    return {
      show: true,
      statusDel_D: true,
      statusDel_E: false
    }
  },
  methods: {
    clickDel: function() {
      if (this.show) {
        this.show = false
        this.$emit('delete', this.data.id)
      }
    },
    statusDel_off: function() {
      if (this.statusDel_D) {
        this.statusDel_D = false
        this.statusDel_E = true
      }
    },

    statusDel_on: function() {
      if (this.show) {
        this.statusDel_D = true
        this.statusDel_E = false
      }
    }
  }
}
</script>
