<template>
<div>
    <div>
        <!-- 檔名、限制驗收完須改 -->
        <b-button
        @click="$refs.inputFiles.click()"
        style="
        background-color: rgb(75, 102, 255);
        font-size:14px;
        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:14px">(僅支援上傳CSV檔案)</span>

        <b-button
        @click="upload()"
        style="
        background-color: rgb(75, 102, 255);
        font-size:14px;
        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 { mapState } from 'vuex'

export default {
  data () {
    return {
      file: null,
      csvData: []
    }
  },
  components: {
    papa
  },
  methods: {

    async upload () {
      var yes = confirm('確定匯入?')
      if (yes) {
        alert('匯入成功')
        this.$emit('closeEvent')
        let aaa = new Date(this.csvData[0].來文日期)
        this.officialDoc.issue_text_number = this.csvData[0].來文字號
        this.officialDoc.issuer = this.csvData[0].來文單位
        this.officialDoc.issue_date = aaa
        this.officialDoc.subject = this.csvData[0].主旨
        this.officialDoc.instruction = this.csvData[0].說明
      } else {
        alert('取消匯入')
      }
    },
    clearFiles () {
      this.$refs['inputFiles'].reset()
    },
    csvTojson () {
      let csvFile = this.$refs.inputFiles.files[0]
      var 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({
      officialDoc: (state) => state.officialDocument.officialDoc

    })
  }
}

</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>
