<template>
    <div class="popupSelect-container">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column v-for="column,columnIndex in columns" :key="columnIndex"
                :prop="column.__vModel__" :label="column.__config__.label">
                <template slot-scope="scope">
                    <el-input
                        v-if="['custom-input','custom-number','custom-textarea'].includes(column.__config__.jnpfKey)"
                        v-model="scope.row[column.__vModel__]" disabled
                        :placeholder="'请输入'+column.__config__.label"></el-input>

                    <el-select
                        v-if="['custom-select','custom-selectMany'].includes(column.__config__.jnpfKey)"
                        v-model="scope.row[column.__vModel__]"
                        :placeholder="'请选择'+column.__config__.label" disabled>

                    </el-select>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
export default {
    name: 'CustomTable',
    props: {
        columns: {
            type: Array,
            required: true,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            tableData: [{}]
        }
    },
    watch: {

    },
    computed: {

    },
    created() {
        console.log(this.tableData)
        console.log(this.columns)

        this.columns.forEach((item, index) => {
            console.log(item)
            // let obj = {
            //     type: this.getTableColumnType(item.__config__.jnpfKey),
            //     label: item.__config__.label,
            //     prop: item.__vModel__
            // }
            this.tableData[0][item.__vModel__] = item.__config__.defaultValue
        })

        this.tableData = [
            {
                name: '张三',
            }
        ]
    },
    methods: {
        getTableColumnType(type) {
            let mappingList = [
                {
                    jnpfKey: 'custom-input',
                    columnType: 'input',
                    type: 'normal'
                },
                {
                    jnpfKey: 'custom-textArea',
                    columnType: 'input',
                    type: 'normal'
                },
                {
                    jnpfKey: 'custom-number',
                    columnType: 'input',
                    type: 'number'
                },
                {
                    jnpfKey: 'custom-selectMany',
                    columnType: 'select'
                },
                {
                    jnpfKey: 'custom-select',
                    columnType: 'select'
                }
            ]
        }

    }

}
</script>
<style lang="scss" scoped>
.fr {
    float: right;
}
</style>