<template>
    <Dialog title="导入" ref="modal">
        <component
            :is="componentName"
            @on-before-upload="beforeUpload"
            @on-change-index="changeIndex"
            @on-column-index="getColumnIndex"
            @on-success="onSuccess"
            @on-can-select-method="onCanSelectMethod"
            :file="file"
            :guid="guid"
            :parameters="parameters"
            :columnIndex="columnIndex"
            :data="data"
            :method="method"
            style="height:300px"
        ></component>
        <Footer
            slot="footer"
            v-model="index"
            :guid="guid"
            @on-cancel="cancel"
            @on-change-index="changeIndex"
            @on-change-method="changeMethod"
            :canSelectMethod="canSelectMethod"
            :currIndex="currIndex"
        ></Footer>
    </Dialog>
</template>
<script>
import Index from './components/upload-index'
import Main from './components/upload-main'
import Load from './components/upload-load'
import Footer from './components/footer'
import Dialog from './modal-pane.vue'
const M = {
    0: 'Index',
    1: 'Main',
    2: 'Load',
    3: 'Show'
}
export default {
    name: 'CommonImport',
    components: {
        Index,
        Main,
        Load,
        Footer,
        Dialog
    },
    data() {
        return {
            index: 0,
            file: null,
            data: [],
            currIndex: null,
            columnIndex: '',
            canSelectMethod: false,
            method: 'APPEND'
        }
    },

    props: {
        guid: String,
        parameters: {
            type: Object,
            default: () => {
                return {}
            }
        },
        rowData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },

    computed: {
        componentName() {
            return M[this.index]
        }
    },

    methods: {
        beforeUpload(file, data) {
            this.file = file
            this.data = data.slice(0, 10)
        },

        changeIndex(index) {
            this.currIndex = index
        },

        changeMethod(method) {
            this.method = method
        },

        getColumnIndex(val) {
            this.columnIndex = val
        },

        cancel() {
            this.$refs.modal.remove()
        },
        onCanSelectMethod(canSelectMethod) {
            this.canSelectMethod = canSelectMethod
        },
        onSuccess() {
            if (this.onOkCb) {
                this.onOkCb(this.guid)
            }
        }
    }
}
</script>
