<template>
  <v-container>
    <v-card id="drop-area"
            flat>
      <v-card-title class="text-center">
        上传游戏配置文件
      </v-card-title>
      <v-divider></v-divider>
      <v-card-text>
        <input v-show="false"
               ref="fileinput"
               @change="changeFile"
               type="file"
               multiple="multiple" />
        <v-card id="drop-area"
                @click="selectFile"
                variant="outlined"
                height="220">
          <v-card-text>
            <v-row justify="center"
                   dense>
              <v-col cols="12"
                     class="text-center">
                <v-icon size="120">mdi-cloud-upload</v-icon>
              </v-col>
              <v-col cols="12"
                     class="text-center">将文件拖到此处，或<strong class="blue--text text--lighten-1">点击上传</strong>
              </v-col>
              <v-col cols="12"
                     class="text-center">只能上传 .json 格式的文件</v-col>
            </v-row>
          </v-card-text>
        </v-card>
        <v-card variant="outlined"
                class="mt-5">
          <v-card-title>文件列表</v-card-title>
          <v-card-text>
            <v-row>
              <v-col cols="12"
                     v-for="(file,i) in files"
                     :key="i">
                <v-card>
                  <v-card-text class="pa-0 ">
                    <v-row>
                      <v-col cols="10">{{file.title}}</v-col>
                      <v-col cols="2"
                             class="d-flex justify-end">
                        <v-btn variant="outlined"
                               size="x-small"
                               icon
                               @click="removefile(i)">
                          <v-icon>
                            mdi-close-circle
                          </v-icon>
                        </v-btn>
                      </v-col>
                    </v-row>
                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>
          </v-card-text>
          <v-card-actions>
            <v-row justify="center">
              <v-col cols="5">
                <v-btn variant="flat"
                       color="secondary"
                       :disabled="files.length == 0"
                       :loading="uploading"
                       @click="uploadres"
                       block>提交</v-btn>
              </v-col>
            </v-row>
          </v-card-actions>
        </v-card>
      </v-card-text>
    </v-card>
    <v-snackbar v-model="snackbar"
                :timeout="2000">
      {{ errstr }}

      <template v-slot:action="{ attrs }">
        <v-btn color="blue"
               text
               v-bind="attrs"
               @click="snackbar = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </v-container>
</template>

<script>
import { uploadformData } from '@/utils/upload'
export default {
  name: 'upload',
  data() {
    return {
      errstr: '',
      snackbar: false,
      files: [],
      dialog: false,
      uploading: false,
      uploadprogress: 0,
    }
  },
  methods: {
    // 选择文件
    changeFile(e) {
      let suffixs = ['json']
      console.log('suffixs:%o', suffixs)

      for (let file of e.target.files) {
        let filename = file.name
        let isallow = false
        //获取文件的后缀名的位置
        var index = filename.lastIndexOf('.')
        if (index == -1) {
          this.$refs.fileinput.value = null

          this.errstr = '目标文件格式不符合规范!'
          this.snackbar = true
          return
        }
        //截取后缀名
        var suffix = filename.substring(index + 1)

        for (var i = 0; i < suffixs.length; i++) {
          if (suffix == suffixs[i]) {
            isallow = true
            break
          }
        }
        if (!isallow) {
          this.$refs.fileinput.value = null
          this.errstr = '目标文件格式不符合规范!'
          this.snackbar = true
          return
        }
        this.files.push({
          file: file,
          title: file.name,
        })
      }
      this.$refs.fileinput.value = null
    },
    selectFile() {
      this.$refs.fileinput.dispatchEvent(new MouseEvent('click'))
    },
    removefile(i) {
      this.files.forEach(function (item, index, arr) {
        if (index == i) {
          arr.splice(index, 1)
        }
      })
    },
    uploadres() {
      this.uploading = true
      var formData = new FormData()
      for (let i = 0; i < this.files.length; ++i) {
        formData.append('file_' + i, this.files[i].file)
      }
      formData.append('filenum', this.files.length)
      uploadformData('/upload', formData, (p) => {
        this.uploadprogress = p
      })
        .then((resp) => {
          this.uploading = false
          this.errstr = '文件上传成功!'
          this.snackbar = true
          this.files = []
          console.log('uploadformData 文件上传成功')
          this.$forceUpdate()
        })
        .catch((err) => {
          this.uploading = false
          this.errstr = err.message
          this.snackbar = true
          console.log('uploadformData 文件上传失败 err:%o', err)
        })
    },
  },
}
</script>

<style>
</style>