<template>
    <div>
        <b-table
        :items="qualityList"
        :fields="fields"
        select-mode="multi"
        responsive="md"
        ref="selectableTable"
        >
        <template #cell(請勾選)="row">
          <b-form-checkbox v-model="row.item.selected" class="checkbox-custom"></b-form-checkbox>
        </template>
        <template #cell(name)="data">
            <span style="font-weight:normal;color:black;font-size:15px">{{data.value}}</span>
        </template>
  
      </b-table>
      <b-button @click="deleteDoc" variant="primary" size="sm" class="float-right">確認</b-button>
    </div>
  </template>
  
  <script>
  import { mapState, mapActions } from 'vuex'
  export default {
    data () {
      return {
        fields: [
          '請勾選',
          {
            key: 'name',
            label: '檔案名稱',
            tdClass: 'align-right'
          }
        ],
        fileList: []
      }
    },
    async mounted () {
      await this.$store.dispatch('tenders/getQualityDoc', this.currentUser.defaultTender)
    },
    methods: {
      ...mapActions('tenders', ['deleteQualityDoc', 'getQualityDoc']),
      async deleteDoc () {
        if (!confirm('確定要刪除選擇的品保文件?')) return
        const selectedQualityDoc = this.qualityList.filter((QualityDoc) => QualityDoc.selected)
        for (let index = 0; index < selectedQualityDoc.length; index++) {
          const QualityDoc = selectedQualityDoc[index]
          console.log('Deleting File:', QualityDoc._id)
          await this.$store.dispatch('tenders/deleteQualityDoc', QualityDoc._id)
          this.$emit('closeEvent')
        }
        await this.$store.dispatch('tenders/getQualityDoc', this.currentUser.defaultTender)
        alert('刪除成功')
      }
    },
    computed: {
      ...mapState({
        currentUser: state => state.user.current,
        qualityList: (state) => state.tenders.qualityList
      }),
      row () {
        return this.qualityList.length
      }
    }
  }
  </script>
  
  <style>
  .checkbox-custom {
    margin-left: 10px
  }
  </style>
  