<template>
  <div class="ipub-upload">
    <div ref="ipub-upload"
         @click="handleClick">
      <input v-show="isShow"
             class="ipub-upload-input"
             type="file"
             :webkitdirectory="directory?'webkitdirectory':false"
             :directory="directory?'directory':false"
             @input="handleChange"
             ref="ipub-upload-input" />
      <div :class="['ipub-upload--input flex',ipubClass]">
        <div class="omis">
          <template v-if="file[_name]">
            <font v-if="loading"
                  class="link-color">
              <ipub-icon type="loading"
                         style="margin-right:10px" /> {{file[_name]}}
            </font>
            <a v-else
               @click.stop="download(file[_path],file[_name],domain)">{{file[_name]}}</a>
          </template>
          <font v-else
                class="default-color">{{placeholder}}</font>
        </div>
        <div class="ipub-upload--input__btns flex-center"
             v-if="file[_name]&&!loading"
             @click.stop>
          <ipub-icon @click="handleClick"
                     type="iconReplace" />
          <span style="margin:0 8px;font-size:14px">|</span>
          <ipub-icon @click="handleDelete"
                     type="iconDelete" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { download } from '../../../src/utils/utils'
export default {
  name: 'IpubUploadInput',
  props: {
    domain: {
      type: String,
      default: ''
    },
    file: {
      type: Object,
      default () {
        return {}
      }
    },
    placeholder: {
      type: String,
      default: 'Click here to upload file'
    },
    drag: {
      type: Boolean,
      default: true
    },
    _name: {
      type: String,
      default: 'name'
    },
    _path: {
      type: String,
      default: 'path'
    },
    directory: Boolean,
    loading: Boolean,
    disabled: Boolean
  },
  data () {
    return {
      download,
      isShow: true,
      currentFileList: []
    }
  },
  inject: {
    ipubFormItem: {
      default: false
    }
  },
  watch: {
    fileList (val) {
      this.currentFileList = val
    }
  },
  computed: {
    ipubClass () {
      let newClass = ''
      if (this.loading) {
        newClass += 'ipub-upload--input--focus '
      }
      if (this.disabled) {
        newClass += 'ipub-upload--input--disabled '
      }
      if (this.ipubFormItem && this.ipubFormItem.validateStatus) {
        newClass += 'ipub--validateStatus '
      }
      return newClass
    }
  },
  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 = ''
      if (this.ipubFormItem) {
        this.ipubFormItem.validate('change')
      }
    },
    handleDelete () {
      this.$emit('delete')
      if (this.ipubFormItem) {
        this.ipubFormItem.validate('change')
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.ipub-upload {
  display: block;
  background: $content_color;
  &-input {
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  &--input {
    border: 1px solid $border_color;
    box-sizing: border-box;
    transition: 0.3s all;
    font-size: 14px;
    line-height: 20px;
    padding: 9px 12px;
    border-radius: 2px;
    width: 100%;
    cursor: pointer;
    &:hover,
    &--focus {
      border-color: $link_color;
    }
    &--disabled {
      border-color: $disable_color;
      background: $disable_color;
      pointer-events: none;
      .ipub-upload--input__btns {
        color: $default_color;
      }
    }
    &__btns {
      vertical-align: middle;
      font-size: 16px;
      > span {
        color: $default_color;
      }
    }
  }
}
</style>
