<template>
  <section>
    <b-table
      :data="gridData"
      :columns="gridSetting"
      :paginated="gridData.length == 0 ? false : pageAble != false"
      :per-page="gridPage ? gridPage : 50"
      :checked-rows.sync="checkedRows"
      :selected.sync="selected"
      :row-class="row => (this.setRowClass(row) ? 'is-checked' : '')"
      checkable
      class="my-table2"
      @check="select($event)"
      @click="click($event)"
    />
  </section>
</template>

<script>
export default {
  props: {
    gridSetting: Array,
    gridData: Array,
    gridPage: Number,
    pageAble: {
      default: true,
      type: Boolean,
    },
  },
  data() {
    return {
      checkedRows: [],
      selectedNum: [],
      selected: {},
    };
  },
  watch: {
    checkedRows() {
      this.$emit('grid-checked', this.checkedRows);
    },
  },
  methods: {
    select(event) {
      this.selectedNum = [];
      for (const i in event) {
        this.selectedNum.push(event[i].postNum);
      }
    },
    click(event) {
      this.$emit('grid-clicked', event);
    },
    setRowClass(row) {
      let isSelect = false;
      const nums = this.selectedNum;
      for (const i in nums) {
        if (nums[i] === row.postNum) isSelect = true;
      }
      return isSelect;
    },
    resetCheckedRows() {
      this.checkedRows = [];
      this.selectedNum = [];
    },
  },
};
</script>
