<template>
  <div class="upload">
     <Upload
      ref="upload"
      :show-upload-list="hideUploadList"
      :default-file-list="defaultList"
      :on-success="handleSuccess"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      :before-upload="beforeUpload"
      :data="uploadData"
      multiple
      type="drag"
      :action="uploadHost">
        <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击或者拖拽到这里上传</p>
        </div>
    </Upload>
  </div>
</template>
<script>
import { oss } from '@/view/common/upload'
export default {
  props: {
    value: {
      type: String,
      default: '' // 文件url
    },
    video: {
      type: Boolean,
      default: false // 是否视频上传
    },
    hideUploadList: {
      type: Boolean,
      default: true // 是否显示上传列表
    }
  },
  data () {
    return {
      // 附件上传路径
      uploadHost: '',
      // 附件上传携带参数
      uploadData: {},
      // 上传后返回的存储的文件名
      fileName: '',
      // 上传后返回的文件存储地址
      filePath: '',
      uploadList: [],
      defaultList: []
    }
  },
  watch: {
    value: {
      handler: function (val) {
        console.log(val)
        this.init(val)
      }
    //  immediate: true
    }
  },
  methods: {
    handleRemove (file) {
      const fileList = this.$refs['upload'].fileList

      this.$refs['upload'].fileList.splice(fileList.indexOf(file), 1)
      this.updateFileList()
    },
    handleSuccess (res, file) {
      console.log(res)
      console.log(file)
      file.url = res.data.url
      file.name = res.data.filename
      this.$emit('success', file.name)
    },
    /**
     * 供外部组件提取当前文件上传位置
     * @return this.uploadList[0].name
     */
    getData () {
      if (this.uploadList.length > 0) {
        const result = { url: this.uploadList[0] && this.uploadList[0].url, name: this.uploadList[0].name }
        return result
      } else {
        console.log(this.uploadList)
      }
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: 'The file format is incorrect',
        desc:
          'File format of ' +
          file.name +
          ' is incorrect, please select jpg or png.'
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: 'Exceeding file size limit',
        desc: 'File  ' + file.name + ' is too large, no more than 2M.'
      })
    },
    clearFiles () {
      // console.log('清除');
      this.$refs['upload'].clearFiles()
      this.updateFileList()
    },
    updateFileList (flag) {
      // flag 是否从外部更新进来的
      if (flag) {
        setTimeout(() => {
          this.uploadList = this.$refs['upload'].fileList
        }, 0)
      } else {
        this.uploadList = this.$refs['upload'].fileList
      }
    },
    init (val) {
      console.log(val)
      if (val) {
        const result = []
        result.push({
          url: val.url,
          name: val.name
        })
        this.defaultList = result
        this.updateFileList(true)
        console.log(this.uploadList)
      } else {
        this.clearFiles()
      }
    },
    // 在Upload组件的钩子before-upload中获取到生成的参数信息
    beforeUpload (file) {
      if (this.uploadList.length > 0) {
        this.$Message.error('请删除旧文件再进行上传！')
        return false
      }
      return oss(file.name).then(res => {
        this.uploadHost = res.host
        this.uploadData = res
      })
    }
  },
  mounted () {
    // 必须这样初始化一下，否则上传第一张图片时会没有进度条
    this.uploadList = this.$refs['upload'].fileList
    this.init(this.value)
  }
}
</script>

<style lang="less">
.demo-upload-list {
  display: inline-block;
  width: 120px;
  height: 120px;
  text-align: center;
  line-height: 120px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
