<template>
  <div>
    <el-form-item label="文件上传：" required>
      <input id="btnFileUpload" type="file" name="file" v-if="isShowUploadFile"
             style="border: 1px solid #d8dce5;border-radius: 4px;padding: 5px 10px; width: 80%">
      <el-button type="primary" v-if="isShowUploadFile" @click="submitUpload(file)">上传</el-button>
      <el-progress :percentage="file.progress" v-if="!isShowUploadFile"></el-progress>
    </el-form-item>
  </div>
</template>

<script>
import {uploadFile} from '../../utils/tools.js';

export default {
    props: ['fileType'],
    data () {
        return {
            file: null,
            isShowUploadFile: true,
            uploadSuccess: false
        };
    },
    created () {
    },
    mounted () {
        let self = this;
        document.getElementById('btnFileUpload').addEventListener('change', function (event) {
            let files = event.target.files;
            let file = files[0];
            if (/[\u4e00-\u9fa5\s]/.test(file.name)) {
                self.$message({
                    message: '文件名不允许存在中文和空格',
                    type: 'error'
                });
            }

            if (file.name.length > 64) {
                self.$message({
                    message: '文件名称过长',
                    type: 'error'
                });
            }
            self.file = {
                file: file,
                name: file.name,
                isUploading: false,
                isCancel: false,
                isReady: false,
                isSuccess: false,
                progress: 0
            };
        });
    },
    methods: {
        submitUpload (file) {
            if (file == undefined || file == null) {
                return this.$message.error('请选择上传文件');
            }
            if (/[\u4e00-\u9fa5\s]/.test(file.name)) {
                return this.$message.error('文件名不允许存在中文和空格');
            }
            if (this.fileType == 'EXCEL') {
                if (file.file.type != 'application/vnd.ms-excel' && file.file.type != 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
                    return this.$message.error('请上传EXCEL表格');
                }
            }
            this.isShowUploadFile = false;
            this.$emit('show', this.isShowUploadFile);
            uploadFile(file, this.message);
        },
        message (item) {
            this.$message({
                message: '上传成功',
                type: 'success'
            });
            this.uploadSuccess = true;
        }
    }
};
</script>
