<template>
  <div class="sjp-upload">
    <div class="sjp-upload__box" v-for="(item,index) of imageList" :key="index">
      <img :src="item" class="sjp-upload__pic"  alt="">
      <span class="sjp-delete-img" @click="deleteImg(index)">x</span>
    </div>
      <Upload
          ref="upload"
          v-show="imageList.length < 5"
          class="sjp-upload__box"
          :show-upload-list="false"
          :default-file-list="defaultList"
          :on-success="handleSuccess"
          :format="['jpg','jpeg','png','gif']"
          :max-size="2048"
          :on-format-error="handleFormatError"
          :on-exceeded-size="handleMaxSize"
          :before-upload="handleBeforeUpload"
          multiple
          type="drag"
          :action="url + 'overlord_prize/common/upload_pic'"
          style="display: inline-block;width:58px;">
          <div style="width: 100px;height:100px;line-height: 100px;">
            <Icon type="ios-cloud-upload-outline" size="30" />
          </div>
      </Upload>
  </div>
</template>

<script>

export default {
  name: 'upload',
  components: {  },
  props:['imageList'],
  data() {
    return {
      url: process.env.VUE_APP_API,
      defaultList:[],
    }
  },
  created() {
   
  },
  methods:{
      deleteImg(idx){
        this.imageList.splice(idx,1)
      },
      handleSuccess(res){
        this.imageList.push(res.data)
      },
      handleFormatError(){

      },
      handleMaxSize(){

      },
      handleBeforeUpload(){
        
      }
  },
  mounted(){
   
  }
}
</script>

<style lang="less" scoped>
  .sjp-upload{
    margin-top: 10px;
    .sjp-upload__box{
      width: 100px !important;
      height: 100px;
      position: relative;
      display: inline-block;
      margin-right: 10px;
    }
    .sjp-upload__pic{
      width: 100px;
      height: 100px;
      object-fit: cover;
    }
    .sjp-delete-img{
      position: absolute;
      top: -9px;
      right: 1px;
      cursor: pointer;
      font-size: 20px;
      color: red;
    }
  }
 
</style>
