<template>
    <a-modal :title="title" :width="350" :visible="visible" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
        <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
            <a-button>
                <a-icon type="upload" /> 上传文件
            </a-button>
        </a-upload>
    </a-modal>
</template>
  
<script>
import { deleteAction, downFile, downFilePost, postAction } from '@/api/manage'
export default {
    name: 'ImportFile',
    data() {
        return {
            title: '导入模板',
            visible: false,
            fileList: [],
            importUrl: "/record/importTemplate"
        }
    },
    methods: {
        init(){
            this.visible=true
        },
        handleRemove(file) {
            const index = this.fileList.indexOf(file)
            const newFileList = this.fileList.slice()
            newFileList.splice(index, 1)
            this.fileList = newFileList
        },
        beforeUpload(file) {
            this.fileList = [...this.fileList, file]
            return false
        },
        // 确定
        handleOk() {
            let that = this
            if (this.fileList.length == 0) {
                that.$message.warn('请添加要导入的文件')
                return;
            }
            const { fileList } = this
            const formData = new FormData()
            fileList.forEach((file) => {
                formData.append('files', file)
            })
            formData.append('time', this.time)
            postAction(this.importUrl, formData)
                .then((res) => {
                    if (res.code === '200') {
                        that.$message.info('导入成功')
                        that.$emit('ok')
                        that.handleCancel()
                    }
                })
        },
        // 关闭
        handleCancel() {
            this.close()
        },
        close() {
            this.$emit('ok')
            this.fileList = []
            this.visible = false
        }
    }
}
</script>
<style scoped>
@import '../../../assets/less/word-old.css';
</style>
  