<template>
<!-- 相關文件檔案 -->
 <div>
      <div style="font-size: 16px;
            font-weight: 800;
            color: #5e72e4;
            float: left;
            padding-top: 10px;
            margin-top:30px">
            <div style="float: left; padding-top: 10px">
              <a @click="isCollapsed = !isCollapsed" style="user-select: none">
              附件
              <span v-if="isCollapsed">▲</span>
              <span v-else>▼</span>
              </a>
            </div>
      </div>
      <div style="float: right ; margin-top: 40px ">
        <b-button
          @click="checkSave"
          variant="primary"
          class="m-1 p-1 float-right"
          v-show="conferenceManagement.permission === 2"
        >
          上傳附件
        </b-button>
        <input
          ref="inputFile"
          type="file"
          class="d-none"
          v-on:change="handleFileUpload()"
        />
      </div>
      <div style="height: 110px; width: 100%; overflow: auto; margin-top: 15px">
        <hr style="border-top: 1px solid gray; margin-top: 0; margin-bottom: 0" />
        <!-- <b-card></b-card> -->
        <b-collapse
          style="padding-top: 10px"
          :visible="!isCollapsed"
          id="collapse-2"
        >
          <ul
            class="list-group list-group-flush"
            style="list-style-type: none; font-weight: 600; font-size: 14px"
          >
            <div v-for="(file, index) in fileList" :key="index">
              <b-button
                @click="deleteFile(file._id)"
                size="sm"
                variant="danger"
                class="float-right"
                :disabled="conferenceManagement.permission === 1"
              >
                <b-icon icon="trash-fill"></b-icon>
              </b-button>
              <b-row style="margin-right: 15px">
                <b-col cols="8">
                  <a
                    class="mb-2"
                    style="
                      display: block;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    "
                    :href="file.src"
                    target="_blank"
                  >
                    • {{ file.name }}
                  </a>
                </b-col>
                <b-col cols="3">
                  <b-badge variant="info" style="padding-bottom: 5px">{{
                    new Date(file.uploadTime).toLocaleString("zh-TW", {
                      dateStyle: "long",
                      timeStyle: "short",
                      hour12: false,
                    })
                  }}</b-badge>
                </b-col>
              </b-row>
            </div>
          </ul>
        </b-collapse>
      </div>
 </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {
      isCollapsed: false,
      filesToBeUploaded: [],
      conferenceManagement: {}
    }
  },
  async created () {
    if (this.$route.query.fid !== undefined) {
      await this.$store.dispatch('conference/lookupConference',
        this.$route.query.fid
      )
      await this.$store.dispatch('conference/getFileList')
    }
  },
  mounted () {
    this.usePermission()
  },
  methods: {
    async checkSave () {
      this.$refs.inputFile.click()
    },
    async handleFileUpload () {
      if (window.FileReader && window.Blob) {
        let type = this.$refs.inputFile.files[0].type
        if (
          type === 'image/png' ||
          type === 'application/pdf' ||
          type === 'image/jpeg' ||
          type === 'image/jpg' ||
          type ===
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
          type ===
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          type === 'application/msword'
        ) {
          this.filesToBeUploaded.push(this.$refs.inputFile.files[0])
          await this.uploadFile(
            this.filesToBeUploaded[this.filesToBeUploaded.length - 1],
            this.filesToBeUploaded.length - 1
          )
        } else {
          alert(
            '不支援的檔案格式！僅支援上傳 JPG, PNG, PDF, DOCX, DOC, XLSX 檔案'
          )
        }
      }
    },
    async uploadFile (file, index) {
      try {
        await this.$store.dispatch('conference/addFiles', {
          file: file
        })
        alert('上傳成功！')
        await this.$store.dispatch('conference/getFileList')
      } catch (err) {
        alert('上傳失敗！')
      } finally {
        this.$set(this.filesToBeUploaded, index, file)
      }
    },
    async deleteFile (id) { // 刪除檔案
      if (!confirm('確定刪除此文件嗎?')) return
      await this.$store.dispatch('conference/deleteFiles', id)
      alert('已刪除')
      await this.$store.dispatch('conference/getFileList')
    },
    usePermission () { // 確認權限
      Object.values(this.currentUser.tenderPermissions).forEach(obj => {
        if (obj.tenderId === this.currentUser.defaultTender) {
          let permission = obj.permission
            .filter(name => name.title === '工作協同')
            .map(val => { return val.functionItem })
          for (const element of permission) {
            for (const a of element) {
              if (a.name === '會議管理') this.conferenceManagement = a
            }
          }
        }
      })
    }
  },
  computed: {
    ...mapState({
      conference: state => state.conference.Conference,
      fileList: state => state.conference.fileList,
      currentUser: state => state.user.current
    })
  }
}
</script>

<style>
/* .btn1 {
  background-color: rgb(75, 102, 255);
  font-size: 15px;
  margin-right: 15px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  border: none;
} */
</style>
