<!-- 相關資料管理 -->
<template>
  <div>
    <div>
      <functionBar class="F_bar" @getList="getFileList"/>
    </div>
    <b-container fluid>
      <div style="margin-top: 80px">
        <b-row style="margin-top: 11px">
          <b-col cols="12">
            <div style="width: 800px; margin-left: 350px; color: black">
              <b-form-group
                label="關鍵字:"
                label-for="filter-input"
                label-cols="2"
                label-align="right"
                label-size="1px"
              >
                <b-input-group size="1px">
                  <b-form-input
                    id="filter-input"
                    v-model="filter"
                    type="search"
                    placeholder="請輸入關鍵字"
                  ></b-form-input>
                </b-input-group>
              </b-form-group>
            </div>
          </b-col>
        </b-row>
        <div>
          <b-row>
            <b-col>
              <!-- TABLE -->
              <b-table
                :items="relateFileList"
                :fields="fields"
                :filter="filter"
                thead-class="thClass"
                class="text-center"
                responsive="sm"
                striped
                bordered
                fixed
                :per-page="perPage"
                :current-page="currentPage"
              >
                <!-- HEAD -->
                <template #head()="{ label }">
                  <span
                    style="font-weight: normal; color: white; font-size: 15px"
                    >{{ label }}</span
                  >
                </template>
                <!-- BODY -->
                <!-- 序號 -->
                <template #cell(serial_number)="data">
                  <span
                    style="font-weight: normal; color: black; font-size: 15px"
                  >
                    {{ data.index + 1 }}
                  </span>
                </template>
                <!-- 檔案名稱 -->
                <template #cell(name)="data">
                  <a
                    style="font-weight: normal; color: blue; font-size: 15px"
                    :href="data.item.src"
                    target="_blank"
                  >
                    {{ data.value }}
                  </a>
                </template>
                <!-- 上傳日期 -->
                <template #cell(uploadTime)="data">
                  <span
                    style="font-weight: normal; color: black; font-size: 15px"
                  >
                    {{ getFormattedDate(data.value) }}
                  </span>
                </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(size)="data">
                  <span
                    style="font-weight: normal; color: black; font-size: 15px"
                    v-if="data.value / 1024 / 1024 > 1"
                    >{{ (data.value / 1024 / 1024).toFixed(1) }}&nbsp;MB</span
                  >
                  <span v-else
                    >{{ (data.value / 1024).toFixed(1) }}&nbsp;KB</span
                  >
                </template>
              </b-table>
              <!-- 分頁符號 -->
              <b-pagination
                v-model="currentPage"
                pills
                :total-rows="rows"
                :per-page="perPage"
                aria-controls="my-table"
              >
              </b-pagination>
            </b-col>
          </b-row>
        </div>
      </div>
    </b-container>
  </div>
</template>
<script>
import functionBar from '@/views/RelatedDataManagement/MainPage/functionBar.vue'
import moment from 'moment'
import { mapActions, mapState } from 'vuex'
import fileType from '@/util/fileType.js'
export default {
  data () {
    return {
      filter: null,
      perPage: 8,
      currentPage: 1,
      fields: [
        {
          key: 'serial_number',
          label: '序號',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f', color: '#ffffff', width: '20px' }
        },
        {
          key: 'name',
          label: '檔案名稱',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f', color: '#ffffff', width: '90px' }
        },
        {
          key: 'uploadTime',
          label: '上傳日期',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f', color: '#ffffff', width: '50px' }
        },
        {
          key: 'icon',
          label: '類型',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f', color: '#ffffff', width: '40px' }
        },
        {
          key: 'size',
          label: '檔案大小',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f', color: '#ffffff', width: '40px' }
        }
      ],
      relateFileList: []
    }
  },
  computed: {
    rows () {
      return this.relateFileList.length
    },
    ...mapState({
      tenders: (state) => state.tenders.tenders,
      relatedList: (state) => state.tenders.relatedList,
      currentUser: state => state.user.current
    })
  },
  components: {
    functionBar
  },
  async mounted () {
    await this.$store.dispatch('tenders/getOtherList', this.currentUser.defaultTender)
    await this.getRelatedManagement(this.currentUser.defaultTender)
    await this.getFileList()
  },
  methods: {
    ...mapActions('tenders', ['getRelatedManagement']),
    getFormattedDate (date) {
      // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    },
    async getFileList () {
      this.relateFileList = []
      for (let i = 0; i < this.relatedList.length; i++) {
        const element = this.relatedList[i]
        this.relateFileList.push({
          _id: element._id,
          name: element.name,
          uploadTime: element.uploadTime,
          mime: element.mime,
          size: element.size,
          src: element.src,
          icon: fileType(element.mime)
        })
      }
    }
  }
}
</script>
<style>
.thClass {
  font-size: 16px;
  background-color: #1d325f;
  color: white;
}
/* 把原B排序黑醜箭頭拔掉 */
.table.b-table > thead > tr > th,
.table.b-table > tfoot > tr > td {
  background-image: none !important;
}
</style>
<style lang="scss" scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  margin-top: 20px;
  color: #383838;
}
/deep/ .align-middle {
  max-width: 400px;
  white-space: normal !important;
}
/deep/ .truncate {
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
