<template>
  <Modal v-model="model" class-name="vertical-center-modal">
    <p slot="header">
      {{ title }}
    </p>
    <Form label-position="left" :label-width="80">
      <Form-item label="上传文件：">
        <upload-xlsx
          ref="upload"
          :data="importParams"
          :action="action"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :on-change="uploadChange"
        >
          <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
        </upload-xlsx>
        <span>{{ name }}</span>
      </Form-item>
      <slot name="remark"> </slot>
    </Form>
    <slot name="report"></slot>

    <div slot="footer" style="text-align: center">
      <Button type="primary" size="large" :disabled="disableSave" :loading="modelLoading" @click="upload">保存</Button>
      <Button type="primary" size="large" @click="close">取消</Button>
    </div>
  </Modal>
</template>

<script>
import _ from 'lodash';

export default {
  name: 'ModalImport',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    action: {
      type: String,
      default: '/import',
    },
    title: {
      type: String,
      default: '导入',
    },
    transParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      model: this.value,
      modelLoading: false,
      disableSave: true,
      fileName: '',
    };
  },
  computed: {
    name() {
      return this.fileName || '未选择任何文件';
    },
    importParams() {
      const ps = {};

      _.map(this.transParams, (v, k) => {
        if (typeof v === 'object') {
          ps[k] = JSON.stringify(v);
        } else {
          ps[k] = v;
        }
      });
      return ps;
    },
  },
  methods: {
    uploadSuccess(result) {
      this.$emit('import', result);
    },
    uploadError(err) {
      this.$emit('upload-error', err);
    },
    uploadChange(files) {
      if (files.length > 0) {
        //导入取消无name
        this.fileName = files[0].name;
        this.disableSave = false;
      }
    },
    upload() {
      this.modelLoading = true;
      this.$refs.upload.upload();
    },
    close() {
      this.model = false;
      this.disableSave = true;
      this.fileName = '';
      this.$refs.upload.clear();
      this.modelLoading = false;
    },
    show() {
      this.model = true;
    },
  },
};
</script>