<template>
  <b-container class="py-4">
    <b-form-group
      label="Selection mode:"
      label-for="table-select-mode-select"
      label-cols-md="4"
    >
      <b-form-select
        id="table-select-mode-select"
        v-model="selectMode"
        :options="modes"
        class="mb-3"
      ></b-form-select>
    </b-form-group>

    <b-table
      :items="items"
      :fields="fields"
      :select-mode="selectMode"
      responsive="sm"
      ref="selectableTable"
      selectable
      @row-selected="onRowSelected"
      @row-unselected="onRowUnSelected"
      @selection="onSelection"
      :select-cell="false"
    >
      <template #selectHead>Is Selected?</template>
      <template #selectCell>✔</template>
      <!-- Example scoped slot for select state illustrative purposes -->
      <template #cell(selected)="{ rowSelected }">
        <template v-if="rowSelected">
          <span aria-hidden="true">&check;</span>
          <span class="sr-only">Selected</span>
        </template>
        <template v-else>
          <span aria-hidden="true">&nbsp;</span>
          <span class="sr-only">Not selected</span>
        </template>
      </template>
    </b-table>
    <p>
      Selected Rows:<br>
      {{ selected }}
    </p>
    <p>
      Internal Selected Rows:<br>
      {{ internalSelected }}
    </p>
  </b-container>
</template>

<script  lang="ts" >
import { defineComponent } from "vue";
import { BTableProps } from "./types/components";

export default defineComponent({
  data() {
    return {
      modes: ['multi', 'single', 'range'],
      fields: ['isActive', 'age', 'first_name', 'last_name'],
      items: [
        { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
      ],
      selectMode: 'multi' as BTableProps['selectMode'],
      selected: [],
      internalSelected: [],
    }
  },
  methods: {
    onRowSelected(item: any) {
      this.selected.push(item);
    },
    onRowUnSelected(item: any) {
      this.selected.splice(this.selected.indexOf(item), 1);
    },
    onSelection(items: any) {
      this.internalSelected = items;
    },
  }
});
</script>