<template>
    <div>
        <div v-if="!file" class="import-file-wrap">
            <Upload action="" :before-upload="handleBeforeUpload" accept=".xls, .xlsx" :show-upload-list="false">
                <Icon type="ios-folder" color="#606060" style="cursor:pointer;" size="200"/>
            </Upload>
        </div>
        <div v-else class="table-wrap dark-iview-table">
            <Table :columns="tableColumn" :data="tableData" :loading="tableLoading" height="560" style="margin-top:15px; ">
                <template slot-scope="{ row,index }" slot="password">
                    <p>{{(row.password == '' || row.password == null)? '— —' : row.password.value+''}}</p>
                </template>
                <template slot-scope="{ row,index }" slot="status">
                    <p :class="(repeatAccounts.length == 0 || repeatAccounts.indexOf(row.account) == -1) ? 'account-success-tips':'account-error-tips'">{{(repeatAccounts.length == 0 || repeatAccounts.indexOf(row.account) == -1)?"":$t('system.compt.acRep') }}</p>
                    <p :class="(row.classroomCode == '' || row.classroomCode == null) ? 'account-warning-tips':''">{{(row.classroomCode == '' || row.classroomCode == null) ? $t('system.compt.classErr'):"" }}</p>
                    <p :class="row.seatRepeat? 'account-error-tips':''">{{row.seatRepeat ? $t('system.compt.setErr'):"" }}</p>
                </template>
            </Table>
        </div>
    </div>
</template>
<script>
    import excel from '@/utils/excel'
    export default {
        props: {
            headerKeys: {
                type: Array,
                default: () => {
                    return []
                }
            },
            headerTitles: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                file: undefined,
                tableLoading: false,
                showProgress: false,
                tableColumn: [],
                tableData:[]
            }
        },
        methods: {
            //初始化表头
            initColumn() {
                this.tableColumn = this.headerTitles.map((item,index) => {
                    return {
                        title: item,
                        key: this.headerKeys[index]
                    }
                })
            },
            //获取上传的文件
            handleBeforeUpload(file) {
                let fileExt = file.name.split('.').pop().toLocaleLowerCase()
                if (fileExt === 'xlsx' || fileExt === 'xls') {
                    this.readFile(file)
                    this.file = file
                } else {
                    this.$Notice.warning({
                        title: this.$t('stuAccount.importTips5'),
                        desc: this.$t('stuAccount.importTips6') + file.name + this.$t('stuAccount.importTips7')
                    })
                }
                return false
            },
            // 解析表格数据
            readFile(file) {
                this.tableLoading = true
                const reader = new FileReader()
                reader.readAsArrayBuffer(file)
                reader.onloadstart = e => {
                    this.showProgress = true
                }
                reader.onerror = e => {
                    this.$Message.error(this.$t('system.compt.fileReadErr'))
                }
                reader.onload = e => {
                    const data = e.target.result
                    const { header, results } = excel.read(data, 'array')
                    const tableColumn = header.map(item => { return { title: item, key: item } })
                    const columns = tableColumn.map(item => {
                        return item.key
                    })
                    let flag = true
                    let column = ''
                    //校验表格表头是否为预设表头
                    for (let item of this.headerKeys) {
                        if (columns.indexOf(item) == -1) {
                            column = item
                            flag = false
                            break
                        }
                    }
                    if (flag) {
                        // 处理表格导入数据类型
                        this.tableData = [...results]
                        this.tableLoading = false
                        this.$emit('getTableData', this.tableData)
                    } else {
                        this.$Message.error({
                            content: this.$t('system.compt.tbColErr1') + column + this.$t('system.compt.tbColErr2'),
                            duration: 4
                        })
                        this.tableLoading = false
                        this.file = undefined
                    }
                }
            },
        },
        created() {

        },
        mounted() {
            this.initColumn()
        }
    }
</script>
<style scoped>
    .import-file-wrap {
        width:100%;
        height:100%;
        text-align:center;
        padding:30px;
    }
</style>
<style>

</style>