<template>
  <div>
    <u-upload :fileList="fileList" name="4" width="55" :height="'60px'" uploadIcon="plus" @afterRead="afterRead" @delete="deletePic"
              multiple :maxCount="maxCount"></u-upload>
  </div>
</template>

<script>
export default {
  name: "index",
  props:{
    maxCount:{
      type:Number,
      default:1
    }
  },
  data(){
    return {
      fileList:[]

    }
  },
  methods:{
    //新增图片
    async afterRead(event){
      console.log('打印event', event);
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      // 上传案例，根据这个来修改
      let file = event.file;
      let lists = [].concat(event.file);
      console.log('打印this[`fileList${event.name}`]',this[`fileList${event.name}`]);
      // let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.$api.fileApi.uploadFile(file[i].url);
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: file[0].url,
          fileObj: JSON.stringify(result)
        }))
        fileListLen++
      }
      console.log('打印this.fileList', this.fileList);
    },
    //删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },

  }
}
</script>

<style scoped>

</style>