<template>
  <div>
    <el-upload
      ref="upload"
      :list-type="listType"
      :action="action"
      :headers="headers"
      :show-file-list="false"
      :on-success="uploadImageSuccess"
      :on-remove="handleImageRemove"
      :before-upload="beforeUpload"
      :on-error="uploadError"
      :multiple="multiple"
      :accept="accept"
    >
      <div v-loading="loadImgLoading" class="avatar" :style="{width:domWidth,height:domHeight,display: 'block'}">
        <img v-if="dialogImageUrl" :src="dialogImageUrl" :style="{width:domWidth,height:domHeight,display: 'block'}" @error="reloadImage" @load="loadSucess">
        <i v-else class="el-icon-plus avatar-uploader-icon" :style="{width:domWidth,height:domHeight,lineHeight:domHeight}" />
      </div>
      <button v-if="trigger" ref="trigger" slot="trigger" size="small" type="primary">选取文件</button>
    </el-upload>
  </div>
</template>

<script>
import { string } from 'clipboard'
import { mapGetters } from 'vuex'
export default {
  name: 'UploadImage',
  props: {
    domIndex: {
      type: Number,
      default: 0
    },
    domWidth: {
      type: string,
      default: '148px'
    },
    domHeight: {
      type: string,
      default: '148px'
    },
    dialogImageUrl: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 1
    },
    accept: {
      type: String,
      default: '.jpg,.png,.gif'
    },
    listType: {
      type: String,
      default: 'picture-card'
    },
    imageList: {
      type: Array,
      default: () => []
    },
    uuid: {
      type: Number,
      default: 0
    },
    beforeUpload: {
      type: Function,
      default: () => true
    },
    trigger: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loadImgLoading: false
    }
  },
  computed: {
    ...mapGetters(['token']),
    chooseState() {
      return this.imageList.length < this.limit
    },
    action() {
      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
    },
    headers() {
      return {
        'token': this.$store.getters.token
      }
    }
  },
  methods: {
    // 上传成功
    uploadImageSuccess(response, file, fileList) {
      this.dialogImageUrl = response.data
      const data = { data: response.data, index: this.domIndex }
      this.$emit('success', { data, file, fileList })
    },
    // 删除
    handleImageRemove(file, fileList) {
      this.dialogImageUrl = ''
      const data = { index: this.domIndex }
      this.$emit('remove', { data, file, fileList })
    },
    // 上传失败
    uploadError(err, file, fileList) {
      this.$emit('error', { err, file, fileList })
    },
    handleClick() {
      this.$refs.trigger.click()
    },
    reloadImage() {
      this.loadImgLoading = true
      setTimeout(() => {
        this.dialogImageUrl = this.dialogImageUrl.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
      }, 1000 * 2)
    },
    loadSucess() {
      this.loadImgLoading = false
    }
  }
}
</script>
<style lang="scss">
  .el-upload--picture-card{
    width: 100% !important;
    height: 100% !important;
  }
</style>
