<template>
  <div
    class="c-upload-dashboard u-pointer"
    @click="open"
  >
    <i
      class="c-upload-dashboard__icon el-icon-upload"
      :class="{ breathe: uploading }"
    />
    <el-dialog
      title="上传文件"
      :visible.sync="show"
      custom-class="c-dialog"
      :before-close="close"
      append-to-body
    >
      <template v-if="show">
        <el-upload
          ref="upload"
          class="c-upload-dashboard__item o-upload"
          :class="{ 'l-flex__fill': !hasFile }"
          action="none"
          :accept="accept"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="onChange"
          drag
          multiple
        >
          <div class="l-flex--row">
            <i class="o-upload__icon el-icon-upload" />
            拖拽文件到此或
            <span class="o-upload__tip">点击选择文件</span>
          </div>
          <div class="o-upload__accept">{{ accept }}</div>
        </el-upload>
        <file-progress
          v-if="hasFile"
          class="l-flex__auto c-upload-dashboard__item"
        />
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  appendFile,
  addListener,
  removeListener,
  isUploading
} from '@/utils/upload'
import FileProgress from './FileProgress'

export default {
  name: 'UploadDashboard',
  components: {
    FileProgress
  },
  data () {
    return {
      show: false,
      uploading: false,
      hasFile: false
    }
  },
  computed: {
    accept () {
      return '.png,.jpg,.jpeg,.gif,.mp4,audio/mpeg'
    }
  },
  created () {
    addListener('change', this.check)
  },
  beforeDestroy () {
    removeListener('change', this.check)
  },
  methods: {
    onChange ({ raw }) {
      this.$refs.upload.clearFiles()
      appendFile(raw)
    },
    open () {
      this.show = true
    },
    close () {
      this.show = false
    },
    check (files) {
      this.uploading = isUploading()
      this.hasFile = files.length > 0
    }
  }
}
</script>

<style lang="scss" scoped>
.c-upload-dashboard {
  &__icon {
    color: $blue;
    font-size: 28px;
  }

  &__item + &__item {
    margin-top: $spacing;
  }
}

.breathe {
  animation: breathe 1s ease-in-out infinite alternate;
}

@keyframes breathe {
  0% {
    text-shadow: 0 0 2px rgba($blue, 0.5);
  }
  100% {
    text-shadow: 0 0 20px $blue;
  }
}
</style>
