<template>
  <div class="" style="display: flex; align-items: start" v-if="!disabled">
    <el-upload
      class="upload-demo mr10 mb15"
      action
      :headers="myHeaders"
      :show-file-list="true"
      :limit="10"
      :before-upload="beforeUpload"
      multiple
      :on-change="handleChange"
      :on-remove="handleRemove"
      :file-list="fileList"
      fileType="jpg,png'"
      :auto-upload="false"
      :disabled="disabled"
    >
      <el-button class="btn"><i class="el-icon-paperclip"></i>上传附件</el-button>
    </el-upload>
    <el-button type="primary" style="margin-bottom: 15px" @click="upload">确定上传</el-button>
  </div>
  <div v-else style="margin-left: 15px;">
    <a v-for="im in fileList" style="display: block;color:#1890FF ;" :href="im.fileUrl"  :download="im.fileName">
      <span> {{ im.fileName }}</span>
    </a>
  </div>
</template>
<script>
import { fileFileApi } from '@/api/systemSetting';
import { getToken } from '@/utils/auth';
export default {
  name: 'UploadFile',
  props: {
    file: Array,
    disabled: Boolean,
  },
  data() {
    return {
      myHeaders: { 'X-Token': getToken() },
      fileType: ['png', 'jpg'],
      fileList: [],
    };
  },

  watch: {
    file: {
      handler(v) {
        console.log(v);
        if (Array.isArray(v)) {
          this.fileList = v;
        } else {
          this.fileList = [];
        }
      },
      deep: true,
    },
  },

  methods: {
    //上传文件之前
    beforeUpload(file) {
      if (file.type != '' || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, '').toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 2; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$message('上传文件大小不能超过 2MB!');
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error('上传文件格式不正确!');
          return false;
        }
      }
    },
    handleRemove(file, fileList) {
      this.$emit('input', this.fileList);

      this.fileList = fileList;
    },
    handleChange(v, fl) {
      this.fileList = fl;
    },
    upload() {
      console.log(this.fileList);

      this.fileList.forEach((v, index) => {
        this.handleUploadForm(v, index);
      });
    },
    handleUploadForm(param, ix) {
      const formData = new FormData();
      const data = {
        model: this.$route.path.split('/')[1],
        pid: 7,
      };
      formData.append('multipart', param.raw);
      const loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      fileFileApi(formData, data)
        .then((res) => {
          console.log(res);
          loading.close();
          this.$set(this.fileList[ix], 'status', true);
          this.$set(this.fileList[ix], 'url','crmebimage'+ res.url.split('crmebimage')[1]);

          this.$message.success('上传成功');
        })
        .catch((res) => {
          this.$message.error('上传失败');

          loading.close();
        });
    },
  },
};
</script>

<style scoped>
.flex-column {
  display: flex;
  flex-direction: column;
}
.column {
  display: flex;
  flex-direction: column;
  line-height: 16px;
}
.file-type {
  font-size: 12px;
  padding-top: 2px;
}
</style>
