<template>
  <div class="flexItems flexColumn">
    <button-bar
      not-add
      not-discard
      not-update
      not-insert
      not-delete
      :write="writeFlag"
      @search="eventTrigger"
      @write="eventTrigger"
    />
    <h-splitter>
      <template #boxA>
        <search-bar
          :search-list="searchSetting"
          :search-flag="searchFlag"
          @search="selectData"
        />
      </template>
      <template #boxB>
        <div class="message-header level">
          <p class="level-left">
            {{ boardName }}
          </p>
        </div>
        <div class="message-body">
          <editable-grid
            :headers="setting"
            :grid-data="gridData"
            :grid-page="perPage"
            :event-info="eventInfo"
            @reset="resetInfo"
            @select="readNotice"
          />
        </div>
      </template>
    </h-splitter>
    <b-loading
      :is-full-page="isFullPage"
      :active.sync="isLoading"
      :can-cancel="true"
    >
      <b-icon
        pack="fas"
        icon="sync-alt"
        size="is-large"
        custom-class="fa-spin"
      />
    </b-loading>
  </div>
</template>

<script>
export default {
  props: {
    searchSetting: Array,
    setting: Array,
    serviceUrl: String,
    selectMethod: String,
    perPage: {
      type: Number,
      default: 30,
    },
    boardName: String,
    writeFlag: Boolean,
  },
  data() {
    return {
      isLoading: false,
      isFullPage: true,
      gridData: [],
      eventInfo: '',
      searchFlag: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.selectData();
    },
    selectData(value) {
      this.isLoading = true;
      const params = value;
      if (value) {
        this.searchFlag = false;
      }
      this.$service
        .read(this._props.serviceUrl + this._props.selectMethod, params)
        .then(({ data }) => {
          this.gridData = data;
        })
        .catch((error) => {
          this.$buefy.dialog.alert({
            message: '작업에 실패하였습니다.',
            type: 'is-danger',
          });
        })
        .finally(() => {
          this.resetInfo();
          this.isLoading = false;
        });
    },
    resetInfo() {
      this.eventInfo = '';
    },
    eventTrigger(value) {
      if (value === 'search') {
        this.searchFlag = true;
      }
      if (value === 'write') {
        this.readNotice(null);
      }
      this.eventInfo = value;
    },
    readNotice(row) {
      this.$emit('readNotice', row);
    },
  },
};
</script>
