<template>
  <div>
    <el-upload
      :action="action"
      :headers="headers"
      :name="name"
      :show-file-list="true"
      :list-type="listType"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleOnRemove"
      :on-success="handleOnSuccess"
      :on-error="handleOnError"
      :on-exceed="handleExceed"
      :on-change="handleOnChange"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <el-dialog :visible.sync="dialogViewBigImgVisible" title="预览" width="720" :modal="false">
      <img width="100%" :src="dialogViewBigImgUrl">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'UploadImg',
  props: {
    value: {
      type: String,
      default: ''
    },
    headers: { // 上传文件请求头
      type: Object,
      default: function() {
        return {
          'Authorization': 'Bearer swagger-ui'
        }
      }
    },
    name: { // 上传文件参数（表单提交的参数）
      type: String,
      default: 'file'
    },
    listType: { // 文件列表的类型
      type: String,
      default: function() {
        return 'picture-card'
      }
    }
  },
  data() {
    return {
      action: `${this.HOME_URL}/common/upload`, // 上传图片

      /* 查看大图 */
      dialogViewBigImgUrl: '',
      dialogViewBigImgVisible: false,

      /* 上传图片相对地址 */
      imgList: []
    }
  },
  computed: {
    /* 初始化加载的图片列表 */
    fileList() {
      const _that = this
      _that.imgList = []
      if (this.value && this.value !== '' && this.value !== undefined) {
        const _fileList = []
        this.value.split(',').forEach((o, i) => {
          _fileList.push({
            name: i,
            url: this.HOME_URL + o
          })

          _that.imgList.push(o)
        })
        return _fileList
      } else {
        return []
      }
    }
  },
  methods: {
    /**
       * 点击文件列表中已上传的文件时的钩子
       * @param file
       */
    handlePictureCardPreview(file) {
      this.dialogViewBigImgUrl = file.url
      this.dialogViewBigImgVisible = true
    },
    /**
       * 文件列表移除文件时的钩子
       * @param file
       * @param fileList
       */
    handleOnRemove(file, fileList) {
      /* 过滤数组不想等的 */
      this.imgList = this.imgList.filter(o => {
        return file.url.indexOf(o) === -1
      })

      this.$emit('input', this.imgList.join(','))
    },
    /**
       * 文件上传成功时的钩子
       * @param response
       * @param file
       * @param fileList
       */
    handleOnSuccess(response, file, fileList) {
      if (response.code !== 200) {
        this.$message.error(`服务器返回异常：${response.message}`)
        return
      }

      response.data && this.imgList.push(response.data.path) // 原图URL
      this.$emit('input', this.imgList.join(','))
    },
    /**
       * 文件上传失败时的钩子
       * @param e
       * @param file
       * @param fileList
       */
    handleOnError(e, file, fileList) {
      this.$message.error(`服务器返回异常：${JSON.parse(e.message).message}`)
    },
    handleExceed(files, fileList) {
    },
    /**
       * 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
       * @param file
       * @param fileList
       */
    handleOnChange(file, fileList) {
    },
    /**
       * 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
       * @param file
       */
    handleBeforeUpload(file) {
    }
  }
}
</script>

<style scoped>
</style>
<style>
  .avatar-uploader {
    padding-top: 16px;
  }

  /*上传*/
  .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    background-color: rgba(232, 232, 232, 0.24);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    height: 120px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    font-weight: bold;
    color: #d9d9d9;
    width: 160px;
    height: 0px;
    line-height: 120px;
    text-align: center;
    margin-bottom: 5px;
  }

  .avatar {
    width: 260px;
    height: 180px;
    display: block;
  }
</style>
