<template>
  <div>
    <b-table
      :data="gridData.length == 0 ? [] : gridData"
      :striped="isStriped != false"
      :bordered="isBordered"
      :narrowed="isNarrowed"
      :hoverable="isHoverable"
      :loading="isLoading"
      :focusable="isFocusable"
      :paginated="pageAble != false"
      :per-page="gridPage ? gridPage : 10"
      :selected.sync="selected"
      class="my-table"
      @dblclick="dbClick"
    >
      <template v-slot:header="{ column }">
        <template v-if="column.meta">
          <span v-html="column.meta(column.label)" />
        </template>
        <template v-else>
          <div
            class="has-text-centered"
            style="width:100%;"
          >
            {{ column.label }}
          </div>
        </template>
      </template>

      <template v-slot="{ 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"
          :centered="column.centered"
          :numeric="column.numeric"
        >
          <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 v-slot: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: {
    inServiceErp: {
      type: Boolean,
    },
    headers: Array,
    gridData: Array,
    name: String,
    gridPage: Number,
    pageAble: {
      default: true,
      type: Boolean,
    },
    isLoading: Boolean,
    isEmpty: Boolean,
    isStriped: {
      default: true,
      type: Boolean,
    },
    isBordered: Boolean,
    isNarrowed: Boolean,
    isHoverable: Boolean,
    isFocusable: Boolean,
  },
  data: () => ({
    selected: {},
  }),
  computed: {
    changeGrid: () => {
      this.selected = null;
      this.gridPage = this.gridPage !== 10 ? this.gridPage : 10;
      this.pageAble = this.pageAble !== false;
      this.isLoading = this.isLoading !== false;
      this.isStriped = this.isStriped !== false;
      this.isBordered = this.isBordered !== false;
      this.isStriped = this.isStriped !== false;
      this.isNarrowed = this.isNarrowed !== false;
      this.isHoverable = this.isHoverable !== false;
      this.isFocusable = this.isFocusable !== false;
      this.isBordered = this.isBordered !== false;
    },
  },
  watch: {
    selected() {
      this.$emit('user-grid-click', this.selected, this.name);
    },
  },
  methods: {
    gridChange() {
      // console.log(this.selected, 'gridChange!!');
    },
    dbClick() {
      this.$emit('grid-dbClick', this.selected);
    },
  },
};
</script>

<style>
.my-table {
  max-height: 600px;
  max-width: 150%;
  overflow-y: auto;
  overflow-x: auto;
}
</style>
