<template>
  <div class="container">
    <div style="height:430px; overflow-y:auto; overflow-x:hidden">
      <!-- 表格 -->
      <b-table
        class="text-center"
        small
        responsive="sm"
        ref="selectableTable"
        :fields="fields"
        :items="relateFileList"
        selectable
        @row-selected="onRowSelected"
        hover
        sticky-header="430px"
        style="overflow-x:hidden"
      >
        <!-- HEAD -->
        <template #head()="{ label, field: { button } }">
          <b-row>
            <b-col cols="1" v-if="button">
              <b-button @click="selectAllRows" style="margin-left:5px" class="btn3">
                全選
              </b-button>
              <b-button @click="clearSelected" style="margin-right:5px" class="btn4">
                取消選取
              </b-button>
            </b-col>
            <b-col cols="10" v-else>
              <span style="font-weight: normal; font-size: 15px; color:black; margin-left:30px;">
                {{ label }}
              </span>
            </b-col>
          </b-row>
        </template>
        <!-- BODY -->
        <!-- 檔案選取 -->
        <template #cell(select)="{ rowSelected }">
          <template v-if="rowSelected">
            <span aria-hidden="true">&check;</span>
            <span class="sr-only">Selected</span>
          </template>
          <template v-else>
            <span aria-hidden="true">&nbsp;</span>
            <span class="sr-only">Not selected</span>
          </template>
        </template>
        <!--檔案類型 -->
        <template #cell(icon)="data">
          <img class="ml-3 m-0" style="width:30px;height:auto;display:inline-block" :src="data.item.icon">
        </template>
        <!-- 檔案名稱 -->
        <template #cell(name)="data">
          <span style="font-weight:normal; color:black; font-size:15px; float:left; overflow: hidden;">
            {{ data.value | ellipsis}}
          </span>
        </template>
      </b-table>
    </div>
    <!-- 按鈕 | 下載 -->
    <div class="btn-download" style="padding-top: 15px ;">
      <b-row>
        <b-button
          class="btn_search"
          style=" margin-top: 4px;margin-left:50px"
          @click="downloadZip"
        >
          下載
        </b-button>
      </b-row>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import fileType from '@/util/fileType.js'

export default {
  data () {
    return {
      selectMode: 'multi',
      selected: [],
      fields: [
        {
          key: 'select',
          label: '',
          button: true,
          thStyle: {background: 'white', width: '20%'}
        },
        {
          key: 'icon',
          label: '檔案類型',
          tdClass: 'align-middle',
          thStyle: {background: 'white', width: '20%'}
        },
        {
          key: 'name',
          label: '檔案名稱',
          tdClass: 'align-middle',
          thStyle: {background: 'white', width: '60%'}
        }
      ],
      relateFileList: []
    }
  },
  async created () {
    await this.getFileList()
  },
  methods: {
    ...mapActions('newDocument', ['printZip']),
    onRowSelected (items) {
      this.selected = items
    },
    selectAllRows () {
      this.$refs.selectableTable.selectAllRows()
    },
    clearSelected () {
      this.$refs.selectableTable.clearSelected()
    },
    async downloadZip () {
      if (this.selected.length !== 0) {
        await this.printZip(this.selected)
      } else {
        alert('請先選取欲下載檔案!')
      }
    },
    async getFileList () {
      this.relateFileList = []
      for (let i = 0; i < this.fileList.length; i++) {
        const element = this.fileList[i]
        this.relateFileList.push({
          _id: element._id,
          name: element.name,
          mime: element.mime,
          size: element.size,
          src: element.src,
          icon: fileType(element.mime)
        })
      }
    }
  },
  filters: {
    ellipsis (value) {
      if (value.length > 35) { return value.slice(0, 31) + '...' }
      return value
    }
  },
  computed: {
    ...mapState({
      fileList: state => state.newDocument.controlWorkFile
    })
  }
}
</script>

<style scoped>
.container {
  width: 900px;
  height: 500px;
}
.text-center{
  color:#f7fafc;
  width: 100%;
  height: 400px;
  margin-top: 10px;
}
.btn_search{
  background-color: rgb(75, 102, 255);
  font-size:15px;
  padding-left:10px;
  padding-right: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
  color:white;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.btn_search:hover{
  color: black;
  background-color: rgb(228, 228, 228);
  transform: translateY(1);
}
.btn-download {
  margin-left: 90%;
}
.btn3{
  padding: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  font-size: 13px;
  background-color: rgb(75, 102, 255);
  color:white;
}
.btn4{
  padding: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  font-size: 13px;
  background-color: #f5365c;
  color:white;
}
</style>
