<template>
  <div class="ipub-upload"
       ref="ipub-upload">
    <input v-show="isShow"
           class="ipub-upload-input"
           type="file"
           :multiple="multiple?'multiple':false"
           :webkitdirectory="directory?'webkitdirectory':false"
           :directory="directory?'directory':false"
           @input="handleChange"
           ref="ipub-upload-input" />
    <div class="ipub-upload--label">
      <div class="ipub-p3 mar-b-10">
        <strong>
          {{label}}
        </strong>
        <strong class="default-color mar-l-20"
                v-if="disabled">
          <ipub-icon type="iconAdd" />
          Add New {{label}}
        </strong>
        <a v-else
           :class="[loading?'default-color':'link-color', 'mar-l-20']"
           @click="handleClick">
          <strong>
            <ipub-icon style="margin-right:5px;white-space: nowrap;"
                       :type="loading?'loading':'iconAdd'" />Add New File
          </strong>
        </a>
      </div>
      <div v-if="fileList&&fileList.length"
           :class="['flex', disabled?'ipub-upload--label--disabled':'']">
        <div class="ipub-upload--label__item flex"
             v-for="(item, index) in fileList"
             :key="item[_name]+'upload'+index">
          {{item[_name]}}
          <ipub-icon class="mar-l-10 ipub-c-p"
                     @click="download(item[_path], item[_name], domain)"
                     type="iconDownload1" />
          <div v-if="!disabled"
               class="flex ipub-upload--label__item__delete ipub-c-p">
            <ipub-icon @click="handleDelete(index)"
                       type="iconDelete" />
          </div>
        </div>
      </div>
      <div v-else-if="disabled"
           class="ipub-p2">This is no document uploaded.</div>
    </div>
  </div>
</template>

<script>
import { download } from '../../../src/utils/utils'
import IpubIcon from '../../icon'
export default {
  name: 'IpubUploadLabel',
  components: {
    IpubIcon
  },
  props: {
    domain: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: 'Attachment(s)'
    },
    drag: {
      type: Boolean,
      default: true
    },
    _name: {
      type: String,
      default: 'name'
    },
    _path: {
      type: String,
      default: 'path'
    },
    multiple: Boolean,
    directory: Boolean,
    loading: Boolean,
    disabled: Boolean,
    fileList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  inject: {
    ipubFormItem: {
      default: false
    }
  },
  data () {
    return {
      isShow: true,
      newList: [],
      currentFileList: [],
      download
    }
  },
  watch: {
    fileList: {
      handler (val) {
        this.currentFileList = val
      }, immediate: true
    }
  },
  mounted () {
    if (this.drag) {
      const dropEle = this.$refs['ipub-upload']
      dropEle.addEventListener('drop', (e) => {
        e.preventDefault()
        e.stopPropagation()
        const data = e.dataTransfer.files  // 获取文件对象
        const files = [];
        [...data].map(file => {
          files.push(file)
          this.currentFileList.push(file)
        })
        this.$emit('change', files, this.currentFileList)
      }, false)
      dropEle.addEventListener('dragover', function (e) {
        e.preventDefault()
      }, false)
      dropEle.ondragleave = (e) => {
        e.preventDefault()  //阻止离开时的浏览器默认行为
      }
    }
  },
  methods: {
    handleClick (e) {
      if (this.disabled || this.loading) {
        return
      }
      this.$refs['ipub-upload-input'].click()
      this.$emit('click', e)
      this.isShow = false
    },
    handleChange (e) {
      const files = [];
      [...e.target.files].map(file => {
        files.push(file)
        this.currentFileList.push(file)
      })
      this.$emit('change', files, this.currentFileList)
      this.isShow = true
      this.$refs['ipub-upload-input'].value = ''
    },
    handleDelete (index) {
      this.fileList.splice(index, 1)
      this.$emit('delete', this.fileList)
    }
  }
}
</script>

<style lang="scss" scoped>
.ipub-upload {
  display: inline-block;
  &-input {
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  &--label {
    &__item {
      transition: 0.3s all;
      color: $main_color;
      border: 1px solid $default_color;
      background: $content_color;
      padding: 5px 10px;
      border-radius: 2px;
      line-height: 20px;
      margin-right: 8px;
      &__delete {
        border-left: 1px solid $default_color;
        margin-left: 5px;
        padding-left: 5px;
      }
    }
    &--disabled {
      .ipub-upload--label__item {
        color: $link_color;
        border: 1px solid $link_color;
      }
    }
  }
}
</style>
