<template>
  <div class="flexContainer flexColumn">
    <div class="flexItem is-12 noChild">
      <section class="message">
        <div class="flexContainer flexColumn">
          <div class="flexItem is-12 noChild">
            <search
              :data="setting"
              :service-name="serviceName"
              :method-name="methodName"
              @grid-search="selectData"
            />
          </div>
          <!-- <div class="message-header level">
            <p class="level-left"></p>
          </div> -->
          <div class="flexItem is-12 noChild">
            <div
              class="message-body"
              width="100%"
            >
              <common-grid
                :headers="grid[0].headers"
                :grid-data="grid[0].data"
                :name="grid[0].name"
                @grid-click="gridClick"
              />
              <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>
          </div>
        </div>
      </section>
    </div>
    <b-modal
      :active.sync="detailNotice"
      :can-cancel="false"
      has-modal-card
    >
      <notice-modal
        v-bind="{ modal: this.detailNoticeParams, serviceName }"
      />
    </b-modal>
  </div>
</template>

<script>
import noticeModal from './NoticeModal.vue';

export default {
  components: {
    noticeModal,
  },
  props: {
    setting: Array,
    serviceUrl: String,
    serviceName: String,
    methodName: String,
  },
  data() {
    return {
      grid: [
        {
          headers: this.setting,
          data: [{}],
        },
      ],
      detailNotice: false,
      detailNoticeParams: [],
      isLoading: false,
      isFullPage: true,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.selectData(null);
    },
    selectData(params) {
      const basePath = this.serviceUrl;
      this.isLoading = true; // 로딩 부분 시작지점
      this.$service
        .read(`${basePath}/selectNotice`, params)
        .then(({ data }) => {
          this.grid[0].data = data;
        })
        .finally(() => {
          this.isLoading = false; // 로딩 부분 닫아주기
        });
    },
    gridClick(params) {
      this.detailNotice = true;
      this.detailNoticeParams = params;
    },
  },
};
</script>
