<template>
  <div>
    <b-table
      :data="gridData.length == 0 ? [] : gridData"
      :striped="false"
      :bordered="isBordered"
      :narrowed="isNarrowed"
      :hoverable="isHoverable"
      :loading="isLoading"
      :focusable="isFocusable"
      :paginated="gridData.length == 0 ? false : pageAble != false"
      :per-page="gridPage ? gridPage : 50"
      :selected.sync="selected"
      :checked-rows.sync="checkedRows"
      :checkable="isChecked"
      class="my-table2"
      :class="{'check-table': isChecked}"
      :backend-pagination="isBackend"
      :backend-sorting="isBackend"
      :total="isBackend ? total : ''"
      :current-page.sync="currentPage"
      @dblclick="dbClick"
      @page-change="onPageChange"
      @sort="onSort"
    >
      <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"
          :sortable="column.sortable != false"
          :visible="column.visible != false"
          :numeric="column.numeric"
          :centered="column.centered"
          :width="getColWidth(column.width)"
          :style="[setWidh ? { width: getColWidth(column.width) } : {}]"
        >
          <!-- 기존 코드 -->
          <!-- <span v-if="!column.template"> {{ row[column.field] }} </span>
          <span v-else>
            <span v-html="column.template(row[column.field])"></span>
          </span> -->

          <!-- v-if에 numeric 조건을 걸어 numeric true 경우 콤마가있는 숫자형태로 반환-->
          <span v-if="!column.numeric && !column.template">
            {{ row[column.field] }}
          </span>
          <span v-else-if="column.numeric">
            {{
              row[column.field] ? Number(row[column.field]).toLocaleString() : 0
            }}
          </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,
    isChecked: Boolean,
    isBackend: Boolean,
    total: Number,
  },
  data: () => ({
    selected: {},
    screenWidth: 0,
    checkedRows: [],
    page: 1,
    perPage: 0,
    sortField: '',
    sortOrder: '',
    currentPage: 1,
  }),
  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;
    },
    setWidh() {
      return this.screenWidth >= 768;
    },
  },
  watch: {
    selected() {
      this.$emit('grid-click', this.selected, this.name);
    },
    checkedRows() {
      this.$emit('grid-check', this.checkedRows);
    },
  },
  created() {
    window.addEventListener('resize', this.myEventHandler);
  },
  destroyed() {
    window.removeEventListener('resize', this.myEventHandler);
  },
  mounted() {
    this.myEventHandler();
    this.perPage = this._props.gridPage === undefined ? 50 : this._props.gridPage;
  },
  methods: {
    dbClick() {
      this.$emit('grid-dbClick', this.selected);
    },
    getColWidth(width) {
      return `${(width == null ? 100 : width) / 100}em`;
    },
    myEventHandler() {
      this.screenWidth = window.innerWidth;
    },
    resetCheckedRows() {
      this.checkedRows = [];
    },
    onPageChange(page) {
      this.page = page;
      this.$emit('grid-backend', this.page, this.perPage, this.sortField, this.sortOrder);
    },
    onSort(field, order) {
      this.sortField = field;
      this.sortOrder = order;
      this.$emit('grid-backend', this.page, this.perPage, this.sortField, this.sortOrder);
    },
    resetCurrentPage() {
      this.currentPage = 1;
    },
  },
};
</script>

<style>
/* .my-table {
  max-height: 600px;
  max-width: 150%;
  overflow-y: auto;
  overflow-x: auto;
  padding-right: 5px;
} */
.my-table2 > div.table-wrapper {
  max-width: 100%;
  max-height: 100%;
  overflow-x: auto;
}
.my-table2 > div.table-wrapper > table.table > tbody {
  display: block;
  max-width: 100%;
  max-height: 500px;
  overflow-y: auto;
}
.my-table2 > div.table-wrapper > table.table > tbody > tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.my-table2 > div.table-wrapper > table.table > tbody > tr > td {
  word-break: break-all;
}
.my-table2 > div.table-wrapper > table.table > thead > tr {
  display: table;
  width: calc(100% - 15px);
  table-layout: fixed;
}
.check-table > div.table-wrapper > table.table > tbody > tr > td.checkbox-cell,
.check-table > div.table-wrapper > table.table > thead > tr > th.checkbox-cell {
  width: 0.5em;
  padding-right: 0;
}
.th-wrap {
  width: max-content;
}
.pagination {
  font-size: 0.6rem;
}
div.th-wrap {
  width: 100%;
}
</style>
