<template>
    <el-dialog :title="title" append-to-body :modelValue="openShow" width="70%" @close="closeDialog()">
        <avue-form
            :option="excelOption"
            v-model="excelForm"
            :upload-after="uploadAfter"
        ></avue-form>
        <el-button type="primary" v-if="!isDetail" text style="position: absolute;top: 80px;left: 460px;">读取文件</el-button>
        <el-table v-show="isRead && !isDetail" :data="tableData">
            <el-table-column
                type="index"
                width="50">
            </el-table-column>
            <el-table-column v-for="item in tableColumn" :key="item.prop" :label="item.label" :prop="item.prop" align="center"></el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
export default {
    props:{
        title:{
            type:String,
            default:''
        },
        showReport:{
            type:Boolean,
            default:false
        },
        isDetail:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            openShow: false,
            excelOption:{
                submitBtn: false,
                emptyBtn: false,
                column: [
                    {
                        label: '填报文件',
                        prop: 'excelFile',
                        type: 'upload',
                        drag: true,
                        loadText: '文件上传中，请稍等',
                        span: 24,
                        propsHttp: {
                            res: 'data',
                        },
                        accept: '.xls,.xlsx',
                        tip: '请上传 .xls,.xlsx 标准格式文件，文件最大5M',
                        action: '/blade-system/user/import-user',
                        rules: [
                            {
                                required: true,
                                message: '请上传文件',
                                trigger: 'blur',
                            },
                        ],
                    },
                ],
            },
            tableData:[],
            isRead:true,
            tableColumn:[
                {label: '员工工号',prop: 'cardNo'},
                {label: '姓名',prop: 'name'},
            ]
        }
    },
    created() {
        this.openShow = this.showReport
    },
    methods: {
        closeDialog(val) {
            this.openShow = false
            this.$emit('closeDialog',val)
        }
    }
}
</script>

<style>

</style>