<template>
  <!-- 不需要 -->
  <div>
    <b-table
      class="select-staff-table"
      responsive="sm"
      sticky-header
      head-variant="light"
      :fields="fields"
      :items="staff"
      selectable
      ref="selectableTable"
      hover
      @row-selected="onStaffRowSelected"
      :select-mode="selectMode"
      borderless
    >
      <template #cell(select)="{ rowSelected }">
        <template v-if="rowSelected">
          <span aria-hidden="true">&check;</span>
        </template>
        <template v-else>
          <span aria-hidden="true">&nbsp;</span>
        </template>
      </template>
    </b-table>
      <b-button class="btn_right" @click="personalInfoEdit"> 編輯 </b-button>
      <b-button class="btn_right"> 取消 </b-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectMode: 'single',
      fields: [
        {
          key: 'select',
          label: '選取',
          thStyle: { width: '10%' }
        },
        {
          key: 'name',
          label: '人員姓名',
          thStyle: { width: '30%' }
        },
        {
          key: 'email',
          label: '電子郵件',
          thStyle: { width: '60%' }
        }
      ],
      staff: []
    }
  },
  async mounted () {
    this.staff = await this.$store.dispatch('staff/getAllStaff')
  },
  methods: {
    onStaffRowSelected () {},
    personalInfoEdit () {
      this.$router.push({ name: 'PermissionSetting' })
    }
  }
}
</script>

<style>
</style>
