<template>
  <div v-if="list">
     <!-- :src="$http.FileURL + 'upload/' + endUrl" -->
    <img v-for="(endUrl, index) in (imgList)" :key="index" :src="baseUrl+endUrl"  class="avatar-list-item" @click="deleteImg(index)">
    <el-upload
      v-if="imgList ? imgList.length<extent : 1"
      :with-credentials="true"
      :data="{module}"
      :show-file-list="false"
      :on-success="handleAvatarSuccess1"
      :before-upload="beforeAvatarUpload"
      :headers="myHeaders"
      :action="baseUrl + upload"
      class="avatar-uploader">
      <i class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
    <div v-else class="img-tips">最多上传{{extent}}张照片</div>
  </div>
  <div v-else>
    <img v-if="imgUrl" :src="$http.FileURL + '/upload/' + imgUrl" class="avatar" @click="deleteImg()">
    <el-upload
      :with-credentials="true"
      :data="{module}"
      :show-file-list="false"
      :on-success="handleAvatarSuccess2"
      :before-upload="beforeAvatarUpload"
      :headers="myHeaders"
      :action="baseUrl + upload"
      class="avatar-uploader">
      <i v-if="!imgUrl" class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/env.js'
import { upload  } from '@/api/system/index'
import Cookies from 'js-cookie'
export default {
  name: 'UploadImg',
  // 根据携带prop值 带有imgUrl上传单张图片 带有imgList上传多张图片
  props: {
    list: {
      type: Boolean,
      default: false
    },
    imgList: {
      type: Array,
      default: function() {
        return []
      }
    },
    imgUrl: {
      type: String,
      default: ''
    },
    module: {
      type: String,
      default: 'default_image'
    },
    changeImg: {
      type: Boolean,
      default: false
    },
    extent: {
      type: Number,
      default: 10
    }
  },
  // watch: {
  //   changeImg(oldValue, newValue) {
  //     this.deleteArr.map(value => {
  //       this.$http.deleteUpload({file: value}) 
  //       .then((res) => {
  //       })
  //       .catch(() => {
  //       });
  //     })
  //   }
  // },
  data() {
    return {
      deleteArr: [],
      myHeaders: {
        'X-CSRFToken': Cookies.get('csrftoken')
      },
      baseUrl,
      upload,
    }
  },
  methods: {
    // 上传多张图片
    handleAvatarSuccess1(res, file) {
      this.imgList ? this.imgList : this.imgList=[]
      this.imgList.push(res.data)
    },
    // 上传单张图片
    handleAvatarSuccess2(res, file) {
      this.$emit('change', res.data)
    },
    // 上传图片控制
    beforeAvatarUpload(file) {
      const isLt50M = file.size / 1024 / 1024 < 50
      if (!isLt50M) {
        this.$message.error('上传图片大小不能超过 50MB!')
        return false
      }
      return isLt50M
    },
    deleteImg(index) {
      this.$confirm('提示', `是否删除该照片?`, () => {
        if (this.list) {
          this.deleteArr.push(this.imgList[index])
          this.imgList.splice(index, 1)
        } else {
          this.deleteArr.push(this.imgUrl)
          this.$emit('change', '')
        }
      })
    }
  }
}
</script>

<style scoped>
.avatar{
  max-height: 200px;
  max-width: 400px;
}
.avatar:hover{
  filter: blur(5px);
}
.avatar-list-item{
  max-height: 200px;
  max-width: 400px;
  margin-right: 20px;
}
.avatar-list-item:hover{
  filter: blur(5px);
}
.img-tips {
  color: red;
  padding-left: 10px;
}
</style>
