<template>
  <el-upload
    class="upload-demo"
    :action="actionUrl"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :auto-upload="autoUpload"
    :multiple="multiple"
    :data="extraData"
    :limit="limit"
    :on-change="onChange"
    :http-request="httpRequest"
    :show-file-list="showFileList"
    :file-list="fileList"
    :with-credentials="true"
    list-type="picture">
    <cms-button size="small" type="primary">{{$t('common.tipMessage.selectFile')}}</cms-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
  export default {
    name: "CmsImageUpload",
    props: {
      callback: Function,
      limit: {
        type: Number,
        default: () => {
          return 20
        }
      },
      extraData: {
        type: Object,
        default: () => {
          return {}
        }
      },
      defaultList: {
        type: Array,
        default: () => {
          return []
        }
      },
      showFileList: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      multiple: {
        type: Boolean,
        default: () => {
          return true
        }
      },
      autoUpload: {
        type: Boolean,
        default: () => {
          return true
        }
      }
    },
    data() {
      return {
        actionUrl: '',
        fileList: [/*{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }*/ ],
      }
    },
    watch: {
      defaultList: {
        handler(val) {
          this.fileList = val;
        },
        immediate: true,
        deep: true
      }
    },
    created() {
      if (this.autoUpload) {
        this.actionUrl = "/api/base/system/attach/upload-file.json";
      }
    },
    methods: {
      onChange(file, fileList) {
      },
      httpRequest({ file, data }) {
        let fd = new FormData();
        console.log(this.fileList, '==========================');
        fd.append('file', file);
        if (!this.multiple && this.fileList.length >= 1) {
          this.$message.error('只能上传一张图片, 请先删除再上传');
          return false;
        }
        if (data) {
          for (const key in data) {
            fd.append(key, data[key]);
          }
        }
        this.$http.common.uploadFile(fd).then(({ data }) => {
          for (let i = 0; i < data.length; i++) {
            this.fileList.push(data[i]);
            if (this.callback) this.callback(this.fileList);
          }
        });
        return false;
      },
      handleRemove(file, fileList) {
        fileList = this.fileList;
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i].name === file.name) {
            fileList.splice(i)
          }
        }
        this.fileList = fileList;
      },
      handlePreview(file) {
        console.log(file, '=======================');
      },
    }
  }
</script>

<style scoped>

</style>
