<template>
  <div>
    <div>
      <b-button
      @click="$refs.inputFiles.click()"
        style="
          background-color: rgb(75, 102, 255);
          font-size: 16px;
          color: white;
          box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
          margin-left: 0px;
          margin-bottom: 10px;
        "
      >上傳檔案</b-button>
      <input type="file" id="file" ref="inputFiles" class="d-none" @change="csvToJson()"/>
      <span style="font-size: 16px">(僅支援上傳CSV檔案)</span>
      <b-button
        v-if="$route.name === 'FileReviewCreate'"
        @click="uploadReview()"
        style="
          background-color: rgb(75, 102, 255);
          font-size: 16px;
          color: white;
          box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
          margin-left: 175px;
          margin-bottom: 10px;
        "
      >匯入</b-button>
      <b-button
        v-if="$route.name === 'FileSubmitCreate'"
        @click="uploadSubmit()"
        style="
          background-color: rgb(75, 102, 255);
          font-size: 16px;
          color: white;
          box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
          margin-left: 175px;
          margin-bottom: 10px;
        "
      >匯入</b-button>
    </div>
    <div>
      <table class="table table-bordered table-hover table-condensed">
        <thead>
          <tr>
            <th title="Field #1">文件編號</th>
            <th title="Field #2">文件名稱</th>
            <th title="Field #3">文件描述</th>
            <th title="Field #4">文件類別</th>
            <th title="Field #5">承辦人員</th>
          </tr>
        </thead>
        <tbody v-for="(data, i) in csvData" :key="i">
          <tr>
            <td>{{data.文件編號}}</td>
            <td>{{data.文件名稱}}</td>
            <td>{{data.文件描述}}</td>
            <td>{{data.文件類別}}</td>
            <td>{{data.承辦人員}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import papa from 'papaparse'
import { mapActions, mapState } from 'vuex'

export default {
  data () {
    return {
      file: null,
      csvData: []
    }
  },
  components: {
    papa
  },
  methods: {
    ...mapActions('newDocument', ['post', 'getDocList']),
    // async uploadReview () {
    //   let yes = confirm('確定匯入?')
    //   if (yes) {
    //     alert('匯入成功')
    //     this.$emit('closeEvent')
    //     let list = []
    //     for (let i = 0; i < this.csvData.length; i++) {
    //       let ele = this.csvData[i]
    //       let item = {}
    //       item.document_distinguish = '審查文件'
    //       item.document_number = ele.document_number
    //       item.document_name = ele.document_name
    //       item.description = ele.description
    //       item.document_type = ele.document_type
    //       item.authority = ele.authority
    //       list.push(item)
    //     }
    //     for (let index = 0; index < list.length; index++) {
    //       const element = list[index]
    //       this.postNewDoc(element)
    //     }
    //   } else {
    //     alert('取消匯入')
    //   }
    // },
    async uploadReview () {
      var yes = confirm('確定匯入?')
      if (yes) {
        alert('匯入成功')
        this.$emit('closeEvent')
        this.NewDoc.document_number = this.csvData[0].文件編號
        this.NewDoc.document_name = this.csvData[0].文件名稱
        this.NewDoc.description = this.csvData[0].文件描述
        this.NewDoc.document_type = this.csvData[0].文件類別
        this.NewDoc.authority = this.csvData[0].承辦人員
      } else {
        alert('取消匯入')
      }
    },
    async uploadSubmit () {
      var yes = confirm('確定匯入?')
      if (yes) {
        alert('匯入成功')
        this.$emit('closeEvent')
        this.NewDoc.document_number = this.csvData[0].文件編號
        this.NewDoc.document_name = this.csvData[0].文件名稱
        this.NewDoc.description = this.csvData[0].文件描述
        this.NewDoc.document_type = this.csvData[0].文件類別
        this.NewDoc.authority = this.csvData[0].承辦人員
      } else {
        alert('取消匯入')
      }
    },
    // async uploadSubmit () {
    //   let yes = confirm('確定匯入?')
    //   if (yes) {
    //     alert('匯入成功')
    //     this.$emit('closeEvent')
    //     let list = []
    //     for (let i = 0; i < this.csvData.length; i++) {
    //       let ele = this.csvData[i]
    //       let item = {}
    //       item.document_distinguish = '提送文件'
    //       item.document_number = ele.document_number
    //       item.document_name = ele.document_name
    //       item.description = ele.description
    //       item.document_type = ele.document_type
    //       item.authority = ele.authority
    //       list.push(item)
    //     }
    //     for (let index = 0; index < list.length; index++) {
    //       const element = list[index]
    //       this.postNewDoc(element)
    //     }
    //   } else {
    //     alert('取消匯入')
    //   }
    // },
    // async postNewDoc (item) {
    //   await this.post({
    //     document_distinguish: item.document_distinguish,
    //     document_number: item.document_number,
    //     document_name: item.document_name,
    //     description: item.description,
    //     document_type: item.document_type,
    //     authority: item.authority
    //   })
    //   if (item.document_distinguish === '審查文件') {
    //     await this.getDocList({ document_distinguish: '審查文件' })
    //   } else if (item.document_distinguish === '提送文件') {
    //     await this.getDocList({ document_distinguish: '提送文件' })
    //   }
    // },
    clearFiles () {
      this.$refs['inputFiles'].reset()
    },
    csvToJson () {
      let csvFile = this.$refs.inputFiles.files[0]
      let type = this.$refs.inputFiles.files[0].type
      if (type === 'text/csv') {
        this.csvData = []
        let that = this
        papa.parse(csvFile, {
          header: true,
          dynamicTyping: true,
          skipEmptyLines: true,
          perview: 100,
          complete (result) {
            that.csvData = result.data
          }
        })
        alert('上傳成功！')
      } else {
        alert('不支援的檔案格式！僅支援上傳 CSV 檔案')
      }
    }
  },
  computed: {
    ...mapState({
      NewDoc: (state) => state.newDocument.NewDoc
    })
  }
}
</script>

<style scoped>
.file {
  width: 500px;
}
.text {
  width: 100%;
  margin-top: 9px;
  padding-bottom: 15px;
  font-weight: bold;
  font-size: 20px;
}
.modal-footer {
  padding-left: 10px;
}
.btn {
  background-color: white;
  font-size: 16px;
  margin-top: 7px;
  margin-left: 20px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  color: #383838;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.btn:hover {
  color: black;
  background-color: rgb(228, 228, 228);
  transform: scale(1.1);
}
</style>
