<template>
  <div>
      <b-table
      :items="directoryList"
      :fields="fields"
      select-mode="multi"
      responsive="sm"
      ref="selectableTable"
      >
      <template #cell(請勾選)="row">
        <b-form-checkbox v-model="row.item.selected"></b-form-checkbox>
      </template>
      <template #cell(company)="data">
          <span style="font-weight:normal;color:black;font-size:14px">{{data.value}}</span>
      </template>
      <template #cell(unit)="data">
        <span style="font-weight:normal;color:black;font-size:14px">{{data.value}}</span>
      </template>
      <template #cell(name)="data">
        <span style="font-weight:normal;color:black;font-size:14px">{{data.value}}</span>
      </template>
      <template #cell(title)="data">
        <span style="font-weight:normal;color:black;font-size:14px">{{data.value}}</span>
      </template>
    </b-table>
    <b-button @click="deleteOne" variant="primary" size="sm" class="float-right">刪除</b-button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      fields: [
        '請勾選',
        {
          key: 'company',
          label: '公司名稱'
        },
        {
          key: 'unit',
          label: '單位',
          tdClass: 'align-middle'
        },
        {
          key: 'name',
          label: '人員名稱',
          tdClass: 'align-middle'
        },
        {
          key: 'title',
          label: '職位',
          tdClass: 'align-middle'
        }
      ]
    }
  },
  async mounted () {
    await this.$store.dispatch('project/lookupDirectories')
  },
  methods: {
    ...mapActions('project', ['deleteDirectory', 'lookupDirectories']),
    async deleteOne () {
      if (!confirm('確定要刪除選擇的廠商?')) return
      const selectedDirectories = this.directoryList.filter((directory) => directory.selected)
      for (let index = 0; index < selectedDirectories.length; index++) {
        const directory = selectedDirectories[index]
        await this.$store.dispatch('project/deleteDirectory', directory._id)
        alert('刪除成功')
        this.$emit('closeEvent')
        this.lookupDirectories()
      }
    }
  },
  computed: {
    ...mapState({
      directoryList: (state) => state.project.list
    })
  }
}
</script>

<style>

</style>
