<template>
  <div class="upload-voucher-dialog">
    <el-dialog :visible.sync="showUploadVoucherDialog" title="上传凭证" @close="onCancel">
      <el-form>
        <el-form-item label="结算发票">
          <el-upload
            action :http-request="uploadInvoice" multiple accept=".jpg, .png">
            <div class="upload-content">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">支持扩展名：.jpg .png...</div>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="结算凭证">
          <el-upload
            action :http-request="uploadVoucher" multiple accept=".jpg, .png">
            <div class="upload-content">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">支持扩展名：.jpg .png...</div>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCancel">取 消</el-button>
        <el-button type="primary" @click="confirmUpload">确认上传</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fileImageApi } from '@/api/systemSetting';
import { uploadInvoiceAndProofApi } from '@/api/distribution'

export default {
  props: ['showUploadVoucherDialog', 'settleId'],

  data() {
    return {
      settleInvoiceList: [],
      settleProofList: []
    };
  },

  methods: {
    uploadInvoice(params) {
      const formData = new FormData();
      const data = {
        model: 'user',
        pid: 0,
      };
      formData.append('multipart', param.file);
      this.uploadPic(formData, data, 'invoice');
    },

    uploadVoucher(param) {
      const formData = new FormData();
      const data = {
        model: 'user',
        pid: 0,
      };
      formData.append('multipart', param.file);
      this.uploadPic(formData, data, 'proof');
    },

    uploadPic(formData, data, type) {
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      fileImageApi(formData, data)
        .then((res) => {
          loading.close();
          console.info('res', res);
          let { extName, fileName, url } = res;
          type === 'proof' ? this.settleProofList.push({
            extName,
            fileName,
            url
          }) : this.settleInvoiceList.push({
            extName,
            fileName,
            url
          });
        })
        .catch((res) => {
          loading.close();
        });
    },

    onCancel() {
      this.$emit('closeUploadVoucherDialog')
    },

    confirmUpload() {
      let params = {
        settleId: this.settleId,
        settleInvoiceList: this.settleInvoiceList,
        settleProofList: this.settleProofList
      };

      uploadInvoiceAndProofApi(params).then(res => {
         this.$message.success('上传成功');
         this.onCancel();
      }).catch(() => {});
    }
  }
}
</script>

<style lang="scss">
.upload-voucher-dialog {
  .el-upload {
    text-align: left;
    margin-left: 10px;
  }
}
</style>