<template>
    <el-table-column v-bind="props">
        <template #append="scoped">
            <slot name="append" v-bind="scoped"></slot>
        </template>
        <template #default="scoped">
            <slot v-bind="scoped">
                <template v-if="!isEdit || !scoped.row?.isEdit">
                    {{ defaultRenderCell(scoped) }}
                </template>
                <template v-else>
                    <component :is="comp" v-bind="inputProps" :scoped="scoped"
                        v-model="scoped.row[scoped.column.property || scoped.column.prop]">
                        <template v-if="inputChild?.length">
                            <component v-for="(child, index) in inputChild" :key="index" :is="child"></component>
                        </template>
                    </component>
                </template>
            </slot>
        </template>
        <template #filterIcon="scoped">
            <slot name="filterIcon" v-bind="scoped"></slot>
        </template>
    </el-table-column>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import type { EditTableColumnProps } from './type';
import { defaultRenderCell } from 'element-plus/es/components/table/src/config'
import { getComp } from './registerComp';

const props = withDefaults(defineProps<Partial<EditTableColumnProps>>(), {
    inputName: 'input',
    inputProps: () => ({}),
    isEdit: true
})

const comp = computed(() => getComp(props.inputName))

</script>
