<template>
  <el-upload
    class="upload-demo"
    action="http://120.77.82.246:6789/api/postUpLoadFiles"
    :on-change="handleChange"
    :on-remove="handleRemove"
    :file-list="fileList"
    :auto-upload="false"
    :multiple="multiple"
    :list-type="listType"
  >
    <!-- :on-exceed="handleExceed"
    :before-remove="beforeRemove"
    :on-preview="handlePreview" -->
    <el-button size="small" type="default" plain style="background:#fff;border:1px solid #4081ff;color:#4081ff">上传附件</el-button>
  </el-upload>
</template>

<script>
import OSS from '@/utils/aliOSS'
import UUID from 'uuidjs'

export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    listType: {
      type: String,
      default: 'text'
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  watch: {
    value() {
      this.valueChange()
    }
  },
  mounted() {
    this.valueChange()
  },
  methods: {
    handleChange(file, fileList) {
      if (this.multiple) {
        console.log(fileList)
        fileList.forEach(item => {
          if (item.status === 'ready') {
            // const suffix = item.name.split('.')[1]
            const suffix = item.name.substr(item.name.lastIndexOf('.')+1)
            const fileName = UUID.generate() + '.' + suffix
            item.name = fileName
            OSS(item.raw, fileName).then(res => {
              
              this.$emit('input', 'http://storage.myntv.cn/'+res.name)
              item.url = 'http://storage.myntv.cn/'+res.name
              item.status = 'success'
              const list = fileList.filter(item => item.status === 'success').map(item => item.url)
              console.log(list);
              this.$emit('input', list)
            })
          }
        })
      } else {
        // const suffix = file.name.split('.')[0]
        const suffix = item.name.substr(item.name.lastIndexOf('.')+1)
        const fileName = UUID.generate() + '.' + suffix
        file.name = fileName
        this.fileList = [file]
        OSS(file.raw, fileName).then(res => {
          this.$emit('input', 'http://storage.myntv.cn/'+res.name)
        })
      }
    },
    handleRemove(file, fileList) {
      if (this.multiple) {
        const list = fileList.filter(item => item.status === 'success').map(item => item.url)
        this.$emit('input', list)
      } else {
        this.$emit('input', '')
        this.fileList = []
      }
    },
    valueChange() {
      var propValue = this.value
      if (typeof (propValue) === 'object') {
        this.fileList = propValue.map(item => {
          var nameArr = item.split('/')
          var name = nameArr[nameArr.length - 1]
          return {
            name,
            url: item
          }
        })
        return
      }
      if (propValue) {
        var nameArr = propValue.split('/')
        var name = nameArr[nameArr.length - 1]
        this.fileList = [{
          name: name,
          url: propValue
        }]
      } else {
        this.fileList = []
      }
    }
  }
}
</script>

<style scoped>

</style>
