<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: 'modal-import',
    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: ''
        };
    },
    methods: {
        uploadSuccess(result) {
            this.$emit('import', result);
        },
        uploadError(err) {
            this.$emit('upload-error', err);
        },
        uploadChange(files) {
            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;
        }
    },
    computed: {
        name() {
            return this.fileName || '未选择任何文件';
        },
        importParams() {
            let ps = {};

            _.map(this.transParams, (v, k) => {
                if (typeof v === 'object') {
                    ps[k] = JSON.stringify(v);
                } else {
                    ps[k] = v;
                }
            });
            return ps;
        }
    }
};
</script>