<template>
    <div class="upload-load">
        <Spin fix v-show="showSpin">
            <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
            <div>数据导入中...</div>
        </Spin>
        <div v-if="!showSpin && msg.length === 0" class="export-success">
            <span class="export-success-cell">导入成功</span>
        </div>
        <div v-else class="export-fail">
            <span v-for="(item, index) in msg" :key="index">{{item}}</span>
        </div>
    </div>
</template>
<script>
import Data from '../../../data/export-excel'
export default {
    name: 'UploadLoad',
    data() {
        return {
            showSpin: true,
            msg: []
        }
    },
    props: {
        file: {
            default: ''
        },
        columnIndex: String,
        guid: String,
        parameters: {
            type: Object,
            default: () => {
                return {}
            }
        },
        method: {
            type: String,
            default: 'APPEND'
        }
    },
    mounted() {
        console.log(this.method);
        
        let params = {
            tenantId: this.$tenantId,
            confGuid: this.guid,
            columnIndex: this.columnIndex,
            parameters: JSON.stringify(this.parameters),
            method: this.method
        }

        let formData = new FormData()
        formData.append('file', this.file)
        Data.importExcel(params, formData).then(res => {
            this.$emit('on-change-index', 2)
            this.msg = res
            this.showSpin = false
            if (!res.length) {
                this.$emit('on-success')
            }
        })
    }
}
</script>
<style lang="less" scoped>
.demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.upload-load {
    position: relative;
    height: 200px;

    .export-success {
        width: 100%;
        height: 100%;
        display: table;

        &-cell {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    }

    .export-fail {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: auto;

        &-cell {
            height: 30px;
            line-height: 30px;
        }
    }
}
</style>
