<template>
  <div>
    <v-layout
      ref="upload-area"
      class="upload-area"
      :style="{cursor: disabled ? 'not-allowed' : 'pointer'}"
      align-center
      justify-center
      row
      fill-height
      @click="selectMedia"
    >
      <v-flex xs12 style="text-align: center">
        <span v-if="disabled" />
        <span v-else-if="!uploadOnGoing">Upload one media</span>
        <span v-else>Uploading {{ percent }}%</span>
      </v-flex>
    </v-layout>
    <div class="upload-note">
      {{ note }}
    </div>
    <input ref="uploader" type="file" style="display:none" @change="onMediaSelected">
  </div>
</template>

<script>
import cfg from '@/config'

export default {
  model: { prop: 'mid', event: 'change' },
  props: {
    mid: { type: String, default: '' },
    docColl: { type: String, default: '' },
    docId: { type: String, default: '' },
    docPath: { type: String, default: '' },
    disabled: { type: Boolean, default: false }
  },
  data: () => ({
    uploadOnGoing: false,
    percent: 0,
    selectedMedia: null,
    mediaId: null,
    mediaInfo: null
  }),
  computed: {
    note () {
      return this.mediaInfo ? this.mediaInfo.originalName : ''
    }
  },
  watch: {
    mid (val) {
      if (!val) { return }
      this.mediaId = val
      this.updateBg()
    }
  },
  mounted () {},
  methods: {
    updateBg () {
      if (!this.mediaId) { return }
      this.$refs['upload-area'].style.backgroundImage = `url('${cfg.serverUrl}/media/preview/${this.mediaId}?height=120&timestamp=${(new Date()).getTime()}')`
      this.$axios
        .get(`${cfg.serverUrl}/api/media/${this.mediaId}`)
        .then((res) => {
          this.mediaInfo = res.data.data
        })
    },
    onMediaSelected (event) {
      this.selectedMedia = event.target.files[0]
      this.uploadOnGoing = true
      this.percent = 0

      const formData = new FormData()
      formData.append('media', this.selectedMedia, this.selectedMedia.name)
      formData.append('docColl', this.docColl || '')
      formData.append('docId', this.docId || '')
      formData.append('docPath', this.docPath || '')

      this.$axios
        .post(`${cfg.serverUrl}/media/upload`, formData, {
          onUploadProgress: (progressEvent) => {
            this.percent = Math.ceil(progressEvent.loaded / progressEvent.total * 100)
          }
        })
        .then((pRes) => {
          this.uploadOnGoing = false
          this.selectedMedia = null
          this.mediaId = pRes.data.mediaId
          this.$emit('change', this.mediaId)
          this.updateBg()
        })
        .catch((pRes) => {
          this.uploadOnGoing = false
          this.selectedMedia = null
        })
    },
    selectMedia () {
      if (this.disabled) { return }
      if (this.uploadOnGoing) { return }
      this.$refs.uploader.click()
    }
  }
}
</script>

<style scoped>
.upload-area {
  height: 120px;
  background: #CCC;
  box-shadow: 0 0 8px #666 inset;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.upload-note {
  color: #AAA;
}
</style>
