<template>
    <div class="upload-main">
        <table class="import-table">
            <SelectGroup :columns="columns" @on-get-data="getData"></SelectGroup>
            <tbody>
                <tr
                    :key="index"
                    v-for="(item, index) in data"
                >
                    <td
                        :key="index +'-'+ ind"
                        v-for="(ele, ind) in columns"
                    >{{item[ele.field]}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
import SelectGroup from './select-group'
import Data from '../../../data/export-excel'
export default {
    name: 'UploadMain',
    components: {
        SelectGroup
    },
    data() {
        return {
            columns: [],
            columnIndex: ''
        }
    },

    props: {
        data: Array,
        guid: String
    },
    
    computed: {
        excelColumns() {
            let data = this.data.reduce((pre, curr) => {
                return Object.assign({}, pre, curr)
            }, {})
            let dataColumns = Object.keys(data).map(item => {
                return {
                    field: item
                }
            })
            if (this.columns.length > dataColumns.length) {
                let num = this.columns.length - dataColumns.length
                for (let i = 0; i < num; i++) {
                    dataColumns.push({
                        field: ''
                    })
                }
            }
            return dataColumns
        }
    },

    watch: {
        columnIndex(val) {
            if (val) {
                this.$emit('on-column-index', val)
                this.$emit('on-change-index', 1)
            } else {
                this.$emit('on-change-index', 0)
            }
        }
    },

    mounted() {
        this.loadConfData()
    },

    methods: {
        handleColumns(data) {
            let columns = data.map(item => {
                let obj = Object.assign({}, item)
                obj.width = 100
                obj.title = obj.caption
                obj.key = obj.field
                obj.field = obj.caption
                obj.isResize = true
                obj.titleAlign = 'center'
                return obj
            })
            
            if (this.excelColumns.length > columns.length) {
                let num = this.excelColumns.length - columns.length
                for (let i = 0; i < num; i++) {
                    columns.push({
                        key: ''
                    })
                }
            }
            this.columns = columns
        },

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

        loadConfData() {
            let guid = this.guid
            Data.loadConfData(guid).then(res => {
                this.$emit('on-can-select-method', res.canSelectMethod)
                this.handleColumns(res.columns)
            })
        }
    }
}
</script>
<style lang="less" scoped>
.upload-main {
    width: 100%;
    overflow: auto;
    max-height: 330px;

    .import-table {
        border-collapse: collapse;
        width: 100%;
        overflow: auto;

        td {
            width: 120px;
            border: 1px solid #ccc;
            height: 34px;
            padding: 2px 5px;
        }

        /deep/th {
            width: 120px;
            border: 1px solid #ccc;
            padding: 5px;
        }
        /deep/th .ivu-select {
            margin: 0 !important;
        }
    }
}
</style>
