<template>
    <div>
        <b-table
        :items="contractFileList"
        :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="deleteOne" 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/getContractFile', this.currentUser.defaultTender)
    },
    methods: {
      ...mapActions('tenders', ['deleteContractFile', 'getContractFile']),
      async deleteOne () {
        if (!confirm('確定要刪除選擇的契約文件?')) return
        const selectedContractFile = this.contractFileList.filter((contractFile) => contractFile.selected)
        for (let index = 0; index < selectedContractFile.length; index++) {
          const contractFile = selectedContractFile[index]
          await this.$store.dispatch('tenders/deleteContractFile', contractFile._id)
          this.$emit('closeEvent')
        }
        await this.$store.dispatch('tenders/getContractFile', this.currentUser.defaultTender)
        alert('刪除成功')
      }
    },
    computed: {
      ...mapState({
        currentUser: state => state.user.current,
        contractFileList: (state) => state.tenders.fileList
      }),
      row () {
        return this.fileList.length
      }
    }
  }
  </script>
  
  <style>
  .checkbox-custom {
    margin-left: 10px
  }
  </style>
  