<template>
  <div class="upload">
    <h2 style="margin-bottom:20px;font-size:14px;color:#333333;">
      {{$lang('上传')}}
    </h2>
    <div class="upload-list">
      <div v-for="item of fileList"
           :key="item.uid"
           class="img-item">
        <a-avatar :size="38"
                  :src="item.url"
                  shape="square" />
        <span>{{item.name}}</span>
        <a-icon type="delete"
                @click="handleRemove(item)" />
      </div>

      <a-upload name="file"
                style="width:100%;display:block;"
                listType="picture"
                :accept="accept"
                :file-list="[]"
                :multiple="true"
                :before-upload="beforeUpload"
                @change="fileChange">
        <p-button style="width:215px;"
                  type="dashed">
          <a-icon type="plus" />添加
        </p-button>
      </a-upload>
    </div>

    <p-button type="primary"
              class="btn"
              :loading="confirmLoading"
              @click="handleOk">上传</p-button>

  </div>
</template>

<script>
import { uploadItem } from "./api";

function getFileURL(file) {
  let getUrl = null;
  if (window.createObjectURL !== undefined) { // basic
    getUrl = window.createObjectURL(file);
  } else if (window.URL !== undefined) { // mozilla(firefox)
    getUrl = window.URL.createObjectURL(file);
  } else if (window.webkitURL !== undefined) { // webkit or chrome
    getUrl = window.webkitURL.createObjectURL(file);
  }
  return getUrl;
}

export default {

  props: {
    uploadId: {
      type: String,
      default: ''
    },
    accept: {
      type: String,
      default: '.jpg,.png,.pdf'
    },
    fileNum: {
      type: Number,
    }
  },

  data() {
    return {
      fileList: [],
      confirmLoading: false,
    };
  },

  methods: {

    beforeUpload(file) {
      file.url = getFileURL(file);
      this.fileList = [...this.fileList, file];
      // console.log(this.fileList)
      return false;
    },

    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },

    handleOk() {
      if (this.fileList.length === 0) {
        this.error = '请选择上传文件';
        return;
      }
      const enterpriseId = this.$store.state.user.info.enterpriseId;
      let uploadList = [];
      this.fileList.forEach(file => {
        let formData = new FormData();
        formData.append('file', file)
        formData.file = file

        // formData.append('bizId', this.uploadId)
        // formData.append('bizType', 0)
        // formData.append('enterpriseid', enterpriseId)

        uploadList.push(uploadItem(formData));
      });
      this.confirmLoading = true;
      Promise.all(uploadList).then(res => {
        this.fileList = [];
        let succeslist = []
        res.forEach(item => {
          if (item.success) {
            succeslist.push(item.data)
          }
        })
        this.$message.success('图片上传成功'+succeslist.length+'条,失败'+(res.length - succeslist.length)+'条！')
        this.uploadEnd(succeslist);
        // console.log('resListresList',succeslist)

      });
    },

    uploadEnd(resList) {
      this.confirmLoading = false;
      let errItem = resList.find(tt => !tt.success);
      if (errItem) {
        this.error = errItem.message;
      }
      this.$emit('uploadEnd',resList);
    },

    fileChange() {
      this.error = '';
    },

  }

}
</script>

<style scoped>
.upload {
  position: relative;
  height: 100%;
}
.upload-list {
  height: calc(100% - 80px);
  padding-right: 10px;
  overflow-y: auto;
}
.btn {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.img-item {
  padding: 4px;
  margin-bottom: 8px;
  border: 1px solid #e5e5e5;
  background: #fff;
  overflow: hidden;
}
.img-item span {
  padding-left: 10px;
  color: #333;
}
.img-item i {
  margin-top: 12px;
  float: right;
  font-size: 16px;
  color: #666;
  cursor: pointer;
}
</style>