<template>
  <div>
    <file-pond
      ref="pond"
      name="file"
      label-idle="选择视频或者拖动视频到此处"
      label-file-processing="正在上传视频"
      label-file-processing-aborted="视频上传被取消"
      label-tap-to-retry="重新上传"
      label-file-processing-complete="视频已上传"
      accepted-file-types="video/mp4, video/m4v"
      :allow-multiple="false"
      :instant-upload="true"
      :server="server"
      :files="myFiles"
      @init="handleFilePondInit"
      @processfile="success"
    />
  </div>
</template>

<script>
import vueFilePond from 'vue-filepond'
import 'filepond/dist/filepond.min.css'
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'

// Create component
const FilePond = vueFilePond(FilePondPluginFileValidateType)
var resp = ''

export default {
  name: 'FilePondUpdate',
  components: {
    FilePond
  },
  resp,
  data() {
    return {
      myFiles: [],
      server: {
        url: '//api.reghao.cn' + '/api/file/upload/video',
        timeout: 600_000,
        revert: null,
        process: {
          headers: {
            'Authorization': 'Bearer ' + this.$store.getters.token
          },
          ondata: (formData) => {
            console.log(this.myFiles)
            return formData
          },
          onload(res) {
            resp = JSON.parse(res)
          }
        }
      }
    }
  },
  created() {
  },
  methods: {
    handleFilePondInit() {
      console.log('FilePond has initialized')
      // FilePond instance methods are available on `this.$refs.pond`
    },
    success() {
      this.$emit('resp', resp)
    }
  }
}
</script>
