<template>
    <div>
        <b-table
        :items="receiveFileManagementList"
        :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.item.docFile[0].name }}</span>
        </template>
        <template #cell(receiveDay)="data">
            <span style="font-weight:normal;color:black;font-size:15px">{{ getFormattedDate(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'
  import moment from 'moment'
  export default {
    data () {
      return {
        fields: [
          '請勾選',
          {
            key: 'name',
            label: '檔案名稱',
            tdClass: 'align-right'
          },
          {
            key: 'receiveDay',
            label: '收文日期',
            tdClass: 'align-right'
          }
        ],
        receiveFileList: []
      }
    },
    async mounted () {
      await this.$store.dispatch('tenders/getReceiveFileManagement', this.currentUser.defaultTender)
    },
    methods: {
      ...mapActions('tenders', ['deleteReceiveFile', 'getReceiveFileManagement']),
      getFormattedDate (date) {
        let d = null
        if (date) {
          return moment(date).format('YYYY-MM-DD')
        } else {
          return d
        }
      },
      async deleteOne () {
        if (!confirm('確定要刪除選擇的收文文件?')) return
        const selectedReceiveFileManagement = this.receiveFileManagementList.filter((receiveFileManagement) => receiveFileManagement.selected)
        for (let index = 0; index < selectedReceiveFileManagement.length; index++) {
          const receiveFileManagement = selectedReceiveFileManagement[index]
          await this.$store.dispatch('tenders/deleteReceiveFile', receiveFileManagement._id)
          this.$emit('closeEvent')
        }
        await this.$store.dispatch('tenders/getReceiveFileManagement', this.currentUser.defaultTender)
        alert('刪除成功')
      }
    },
    computed: {
      ...mapState({
        currentUser: state => state.user.current,
        receiveFileManagementList: (state) => state.tenders.receiveFileManagementList
      }),
      row () {
        return this.receiveFileList.length
      }
    }
  }
  </script>
  
  <style>
  .checkbox-custom {
    margin-left: 10px
  }
  </style>
  