<template>
  <div>
    <b-table
      v-bind="computedProps"
      @selected="selected"
    >
      <template #header="{ column }">
        <template v-if="column.meta">
          <span v-html="column.meta(column.label)" />
        </template>
        <template v-else>
          {{ column.label }}
        </template>
      </template>

      <template #default="{ row }">
        <b-table-column
          v-for="(column, index) in headers"
          :key="index"
          :field="column.field"
          :label="column.label"
          :meta="column.headerTemplate"
          :width="column.width"
          :sortable="column.sortable != false"
          :visible="column.visible != false"
        >
          <span v-if="!column.template"> {{ row[column.field] }} </span>
          <span v-else>
            <span v-html="column.template(row[column.field])" />
          </span>
        </b-table-column>
      </template>

      <template #empty>
        <section class="section">
          <div class="content has-text-grey has-text-centered">
            <p>
              <b-icon
                icon="frown"
                size="is-large"
              />
            </p>
            <p>데이터가 없습니다.</p>
          </div>
        </section>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  props: {
    headers: {
      type: Array,
      required: true,
    },
    gridData: {
      type: Array,
      default: () => [],
    },
    name: String,
    gridPage: {
      type: Number,
      default: 10,
    },
    pageAble: {
      type: Boolean,
      default: true,
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    isEmpty: {
      type: Boolean,
      default: false,
    },
    isStriped: {
      type: Boolean,
      default: true,
    },
    isBordered: {
      type: Boolean,
      default: false,
    },
    isNarrowed: {
      type: Boolean,
      default: false,
    },
    isHoverable: {
      type: Boolean,
      default: false,
    },
    isFocusable: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['grid-click'],
  computed: {
    computedProps() {
      return {
        data: this.gridData,
        striped: this.isStriped,
        bordered: this.isBordered,
        narrowed: this.isNarrowed,
        hoverable: this.isHoverable,
        loading: this.isLoading,
        focusable: this.isFocusable,
        paginated: this.pageAble,
        'per-page': this.gridPage,
      };
    },
  },
  methods: {
    selected(row) {
      this.$emit('grid-click', row);
    },
  },
};
</script>
