<template>
  <div style="margin-top: 20px; margin-left: 50px">
    <b-row>
      <b-col cols="12">
        <div
          style="
            font-size: 25px;
            font-weight: 800;
            color: #5e72e4;
            float: left;
            padding-top: 10px;
            margin-top:30px
          "
        >
          上傳紀錄
        </div>
        <div style="height: 660px; width: 750px; overflow: auto">
          <hr
            style="border-top: 1px solid gray; margin-top: 0; margin-bottom: 0"
          />
          <b-card
            style="margin-top: 5px"
            v-for="(record, index) in fileRecordList"
            :key="index"
            class="card-body"
          >
            {{ record.fileName }}
            <div style="float: right; font-size: 20px">
              <b-badge variant="success" v-if="record.todo === '上傳成功'">
                {{ record.todo }} </b-badge>
              <b-badge variant="danger" v-if="record.todo === '刪除'">
                {{ record.todo }} </b-badge>
              <b-badge variant="primary">{{ record.staffName }}</b-badge>
              <b-badge
              variant="info">
                {{
                  new Date(record.recordedTime).toLocaleString("zh-TW", {
                    dateStyle: "long",
                    timeStyle: "short",
                    hour12: false,
                  })
                }}</b-badge
              >
            </div></b-card
          >
        </div>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { mapState, mapActions } 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 () {
    this.getFileRecord({
      fid: this.$route.query.fid,
      fileId: this.$route.query.relatedFile
    })
  },
  methods: {
    ...mapActions('newDocument', ['getFileRecord'])
  },
  computed: {
    ...mapState({
      fileRecordList: state => state.newDocument.FileRecordList,
      controlWorkFile: state => state.newDocument.controlWorkFile
    })
  }
}
</script>

<style scoped>
.card-body {
  padding: 8px;
}
</style>
