<template>
  <b-modal
    :active.sync="active"
    width="40rem"
  >
    <div
      class="message-header"
      style="justify-content: flex-end;"
    >
      <button
        class="button"
        type="button"
        @click="eventTrigger('select')"
      >
        Select
      </button>
    </div>
    <div class="message-body">
      <editable-grid
        :headers="headers"
        :grid-data="gridData"
        :grid-page="gridPage"
        :event-info="eventInfo"
        @reset="resetInfo"
        @select="selectRow"
      />
    </div>
  </b-modal>
</template>

<script>
export default {
  props: {
    headers: Array,
    gridData: Array,
    gridPage: {
      type: Number,
      default: 50,
    },
    isActive: Boolean,
  },
  data() {
    return {
      eventInfo: '',
    };
  },
  computed: {
    active() {
      return this._props.isActive;
    },
  },
  methods: {
    resetInfo() {
      this.eventInfo = '';
    },
    eventTrigger(value) {
      this.eventInfo = value;
    },
    selectRow(row) {
      this.$emit('select', row);
      this.resetInfo();
    },
  },
};
</script>
