<template>
    <div style="display:inline-block;margin-left:10px;">
        <el-button type="primary" plain round @click="handleChange()">excel批量导入</el-button>
        <input
            type="file"
            id="upload_file"
            name="upload_file"
            @change="change()"
            style="display:none;"
            ref="upload_file"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
        />
    </div>
</template>

<script>
import { excelImport } from '@/apps/mobile/api/SensitiveWordLibrary/index';
export default {
    data() {
        return {
            fileTemp: null,
        };
    },
    methods: {
        handleChange() {
            this.$refs.upload_file.dispatchEvent(new MouseEvent('click'));
        },
        change() {
            let input = document.getElementById('upload_file');
            console.log(input.files);
            this.fileTemp = input.files[0];
            if (this.fileTemp) {
                if (
                    this.fileTemp.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
                    this.fileTemp.type === 'application/vnd.ms-excel'
                ) {
                    this.importFile(this.fileTemp);
                } else {
                    this.$message.warning('文件格式错误，请导入Excel文件');
                }
            }
        },
        importFile(file) {
            let formData = new FormData();
            formData.append('file', file);
            excelImport(formData)
                .then(res => {
                    if (res.statusCode === '1') {
                        this.$message.success('导入成功');
                        this.$emit('queryListData');
                    } else {
                        this.$message.warning(res.message);
                    } 
                })
                .catch();
        },
    },
};
</script>


<style lang="stylus" scoped></style>