<template>
  <div>
    <div
      style="
        font-size: 17px;
        font-weight: 800;
        color: #5e72e4;
        margin-bottom: 0px;
      "
    >
      <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
        style="float: right"
        v-show="$route.name === 'PaperPostCreate' && officialDocument.permission === 2"
      >
        <!-- <b-button v-show="deleteRelatedDocument === false" @click="deleteRelatedDocument = true" variant="danger" class="m-1 p-1 float-right">刪除</b-button>
      <b-button v-show="deleteRelatedDocument === true" @click="deleteRelatedDocument = false" variant="danger" class="m-1 p-1 float-right" >返回</b-button> -->
        <b-button
          @click="uploadFile()"
          variant="primary"
          class="m-1 p-1 float-right"
          >上傳附件</b-button
        >
      </div>
    </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-collapse
        style="padding-top: 10px"
        :visible="!isCollapsed"
        id="collapse-2"
      >
        <ul
          class="pl-2"
          style="list-style-type: none; font-weight: 600; font-size: 14px"
        >
          <div v-for="(file, index) in fileList" :key="index">
            <b-button
              :disabled="officialDocument.permission === 1"
              @click="deleteDocument(file._id)"
              size="sm"
              variant="danger"
              class="float-right"
            >
              <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;
                    margin-right: 10px;
                  "
                  :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>
    <modal
      :isOpen="UploadFileModalOpen"
      @closeEvent="UploadFileModalOpen = false"
      title="上傳附件"
    >
      <uploadFile
        @closeEvent="UploadFileModalOpen = false"
        @succeedEvent="
          UploadFileModalOpen = false;
          $store.dispatch('officialDocument/getFileList');
        "
      />
    </modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import uploadFile from '@/views/DocumentManagement/ModalContent/uploadFile.vue'
export default {
  //   name: 'task-related-document',
  data () {
    return {
      // deleteRelatedDocument: false,
      UploadFileModalOpen: false,
      isCollapsed: false,
      officialDocument: {}
    }
  },
  mounted () {
    this.usePermission()
  },
  methods: {
    async deleteDocument (id) {
      if (!confirm('確定刪除此文件嗎?')) return
      // 刪除寫這裡
      await this.$store.dispatch('officialDocument/deleteOfficialDocFile', id)
      alert('已刪除')
      // this.deleteRelatedDocument = false
      await this.$store.dispatch('officialDocument/getFileList')
      await this.addRecord({
        staffName: this.currentUser.name,
        todo: '刪除文件'
      })
    },
    async uploadFile () {
      if (this.officialDoc._id === undefined) {
        alert('請先儲存')
        this.UploadFileModalOpen = false
      } else {
        this.UploadFileModalOpen = true
      }
    },
    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.officialDocument = a
            }
          }
        }
      })
    }
  },
  computed: {
    ...mapState({
      officialDoc: state => state.officialDocument.officialDoc,
      fileList: state => state.officialDocument.fileList,
      currentUser: state => state.user.current
    })
  },
  components: {
    modal: () => import('@/views/Modal/index.vue'),
    uploadFile
  }
}
</script>
