<template>
<div style="margin-top: 50px; margin-left: 10px">
    <b-row>
      <b-col cols="12">
        <b-card-group deck style="height: 700px;width: 900px">
          <b-card
          header-bg-variant="light"
          header="檔案名稱"
          header-class="header"
          >
            <b-list-group>
              <b-list-group-item
                v-for="(item, index) in controlWorkFile"
                :key="index"
              >
                {{ item.name }}
                <div style="float: right">
                  <b-button size="sm" :href="item.src" target="_blank">
                    <b-icon-arrow-bar-down />
                  </b-button>
                  <b-button size="sm" variant="danger" @click="deleteFiles(item._id, item)">
                    <b-icon-trash />
                  </b-button>
                </div>
              </b-list-group-item>
            </b-list-group>
          </b-card>
        </b-card-group>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data () {
    return {
    }
  },
  async created () {
    if (this.$route.query.fid !== undefined) {
      await this.$store.dispatch('newDocument/getFileList', {
        DocId: this.$route.query.fid,
        controlWorkId: this.$route.query.relatedFile
      })
    }
  },
  async mounted () {
    // console.log(this.$route.query.fid)
    // console.log(this.$route.query.relatedFile)
  },
  methods: {
    ...mapActions('newDocument', ['deleteFiles', 'addFileRecord']),
    async deleteFiles (_id, item) { // 刪除檔案
      let fid = this.$route.query.fid
      let fileId = this.$route.query.relatedFile
      if (!confirm('確定刪除檔案嗎?')) return
      await this.$store.dispatch('newDocument/deleteFiles', {
        docId: fid,
        controlWorkId: fileId,
        fileId: _id
      })
      alert('已刪除')
      await this.$store.dispatch('newDocument/getFileList', {
        DocId: fid,
        controlWorkId: fileId
      })
      await this.addFileRecord({
        fid: fid,
        fileId: fileId,
        recordData: {
          fileName: item.name,
          staffName: this.currentUser.name,
          todo: '刪除'
        }
      })
    }
  },
  computed: {
    ...mapState({
      controlWorkFile: state => state.newDocument.controlWorkFile,
      newDoc: state => state.newDocument.NewDoc,
      currentUser: state => state.user.current
    })
  }
}
</script>

<style>
.thClass {
  font-size: 16px;
  background-color: #1d325f;
  color: white;
}
.header{
  font-size: 22px;
  font-weight:bold
  }
</style>
<style scoped>
 .text-center{
   color:#f7fafc;
     width: 115%;
     height: 100%;
     padding-left: 5%;
     padding-right: 5%;
     margin-top: 10px;
 }
.container {
  height: 30px;
  margin-top: 0px;
  margin-left: 5%;
  padding-top: 10px;
  padding-left: 1%;
  padding-right: 1%;
}
.b {
  background-color: white;
  font-size: 16px;
  margin-left: 15px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #383838;
  border: none;
}
.b:hover {
  color: black;
  background-color: rgb(228, 228, 228);
}
</style>
