<template>
  <div class="QdmUpload">
    <div v-if="uploadType === 'img'">
      <span v-show="titleShow" class="colSpan" :style="'width:' + colSpan + 'px;text-align:' + align + ';'"><i v-if="must">*</i>{{ name }}</span>
      <div v-if="!single" :style="'padding-left:' + (colSpan + 8) + 'px;'">
      	<div
      	v-for="(item, index) in imgArr"
      	:key="index"
      	class="imgUpload"
      	v-show="item.fullFilePath"
      	:style="'width:' + width + 'px;height:' + height + 'px;line-height:' + height + 'px;'">
	        <el-image :src="item.fullFilePath" :preview-src-list="imgList" :style="'width:' + width + 'px;height:' + height + 'px;'"></el-image>
          <span v-if="deletestatus" class="deleteSpan" @click="deleteImg(index)"><i class="el-icon-circle-close"></i></span>
	      </div>
	      <span v-if="!imgShow" class="addspan" :style="'width:' + width + 'px;height:' + height + 'px;line-height:' + height + 'px;'">
	      	<span>+</span>
	      	<input class="importInput" type="file" :ref="fileRef" @change="importGoodsUrlFn">
	      </span>
      </div>
      <div v-else class="imgUpload" :style="'width:' + width + 'px;height:' + height + 'px;line-height:' + height + 'px;'">
        <span v-if="imgUrl === '' && !imgShow">+</span>
        <img :src="imgUrl" v-else />
        <input v-if="!imgShow" class="importInput" type="file" :ref="fileRef" @change="importGoodsUrlFn">
        <span v-if="imgUrl !== '' && deletestatus" class="deleteSpan" @click="deleteImg"><i class="el-icon-circle-close"></i></span>
      </div> 
    </div>
    <div v-else>
      <el-button
      :style="'height:' + btnHeight + 'px;background:' + background + ';color:' + color + ';border-color:' + background + ';'">
        <input class="importInput" type="file" :ref="fileRef" @change="importGoodsUrlFn">
        <i v-if="icon !== ''" class="iconfont" :class="icon"></i>
        {{ text }}
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "QdmUpload",
  props: {
    titleShow: {
      type: Boolean,
      default: false
    },
    colSpan: {
      type: Number,
      default: 60
    },
    align: {
    	type: String,
      default: 'right'
    },
    name: {
      type: String,
      default: ''
    },
    imgUrl: {
      type: String,
      default: ''
    },
    single: {
    	type: Boolean,
      default: false
    },
    maxLength: {
    	type: Number,
      default: 5
    },
    imgArr: {
    	type: Array,
      default: () => {
        return []
      }
    },
    imgType: {
    	type: Boolean,
      default: false
    },
    fileRef: {
    	type: String,
      default: 'fileRefs'
    },
    width: {
      type: Number,
      default: 120
    },
    height: {
      type: Number,
      default: 120
    },
    uploadType: {
      type: String,
      default: 'img'
    },
    text: {
      type: String,
      default: '导入'
    },
    background: {
      type: String,
      default: '#409EFF'
    },
    color: {
      type: String,
      default: '#fff'
    },
    btnHeight: {
    	type: Number,
    	default: 30
    },
    must: {
      type: Boolean,
      default: false
    },
    imgShow: {
    	type: Boolean,
      default: false
    },
    icon: {
    	type: String,
      default: ''
    },
    deletestatus: {
    	type: Boolean,
      default: true
    },
    size: {
    	type: Number,
    	default: 50
    }
  },
  data() {
    return {
      imgList: []
    }
  },
  methods: {
    importGoodsUrlFn() {
    	if(this.imgArr) {
    		if(this.imgArr.length >= this.maxLength) return this.$message.warning('最多只能上传' + this.maxLength + '个文件')
    	}
    	let file = this.$refs[this.fileRef].files
    	let fileValue = this.$refs[this.fileRef].value
    	if(this.imgType) {
    		let AllImgExt = ".jpg|.jpeg|.gif|.bmp|.png|"
    		let extName = fileValue.substring(fileValue.lastIndexOf(".")).toLowerCase()
    		if(AllImgExt.indexOf(extName + "|") == -1) {
    			this.$refs[this.fileRef].value = ''
    			return this.$message.warning('只能上传图片')
    		}
    	}
    	if(Math.round(file[0].size / 1024) > Number(this.size) * 1024) {
    		return this.$message.warning('上传文件不能大于' + this.size + 'MB')
    	}
      let formData = new FormData()
      formData.append('file', file[0])
      this.$emit('importReturn', formData, this.fileRef)
      this.$nextTick(() => {
        this.$refs[this.fileRef].value = ''
      })
    },
    deleteImg(i) {
      if(this.maxLength) {
        this.$emit('deleteReturn', i, this.fileRef)
      } else {
        this.$emit('deleteReturn', '', this.fileRef)
      }
    }
  },
  watch: {
    imgArr(data) {
      this.imgList = []
      if(data) {
      	data.forEach(item => {
	        this.imgList.push(item.fullFilePath)
	      })
      }
    }
  }
}
</script>
<style lang="less">
.QdmUpload {
  .colSpan {
    float: left;
    display: block;
    height: 30px;
    line-height: 30px;
    padding-right: 8px;
    font-size: 12px;
    >i {
      color: #F5222D;
      margin-right: 5px;
      padding-left: 3px;
    }
  }
  .addspan {
  	border: 1px dotted #D9D9D9;
  	text-align: center;
    border-radius: 4px;
    display: block;
    cursor: pointer;
    color: #D9D9D9;
    font-size: 32px;
    float: left;
    position: relative;
    .importInput {
      width: 100%;
      height: 100%;
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9;
      opacity: 0;
      border: 1px dotted #D9D9D9;
      border-radius: 4px;
    }
  }
  .imgUpload {
    border: 1px dotted #D9D9D9;
    cursor: pointer;
    color: #D9D9D9;
    font-size: 32px;
    text-align: center;
    border-radius: 4px;
    position: relative;
    float: left;
    margin-right: 10px;
    margin-bottom: 8px;
    &::after {
      content: '';
      height: 0;
      line-height: 0;
      display: block;
      visibility: hidden;
      clear: both;
    }
    .importInput {
      width: 100%;
      height: 100%;
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9;
      opacity: 0;
      border: 1px dotted #D9D9D9;
      border-radius: 4px;
    }
    >img {
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
    .deleteSpan {
      position: absolute;
      right: -10px;
      top: -8px;
      line-height: 1;
      text-align: center;
      font-size: 18px;
      color: rgb(255, 73, 73);
      cursor: pointer;
      >i {
        font-weight: bold;
      }
    }
  }
  .el-button {
    position: relative;
    line-height: 6px;
    float: left;
    margin-right: 12px;
    font-size: 12px;
    padding: 12px 15px;
    i {
			font-size: 15px;
			float: left;
			margin-right: 3px;
		}
    &::after {
      content: '';
      height: 0;
      line-height: 0;
      display: block;
      visibility: hidden;
      clear: both;
    }
    .importInput {
      width: 100%;
      height: 100%;
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9;
      opacity: 0;
      border: 1px dotted #D9D9D9;
    }
  }
}
</style>