<template>
    <div class="customCell">
        <template v-if="isEdit">
            <div class="customCell-item">
                <a-input v-model:value="record[fieldName]" />
            </div>
            <div class="customCell-item">
                <a-input v-model:value="record.children[fieldName]" />
            </div>
        </template>
        <template v-else>
            <div class="customCell-item">
                {{ record[fieldName] || '--' }}
            </div>
            <div class="customCell-item" v-if="record.children">
                <div class="mt-5 ml0"
                    style=" width:16px;height:16px;border-left:2px solid rgb(200,200,200);border-bottom:2px solid rgb(200,200,200);float:left;margin-right:5px;"
                    v-if="showIcon">
                </div>
                <div>
                    {{ record.children[fieldName] || '--' }}
                </div>
            </div>
        </template>
    </div>
</template>

<script lang="ts" setup>
interface Props {
    record: any,
    fieldName: string,
    showIcon?: boolean,
    isEdit?: boolean,
};

const props = withDefaults(defineProps<Props>(), {
    showIcon: false,
    isEdit: false,
});
</script>

<style lang="scss" scoped>
.customCell {
    display: flex;
    flex-direction: column;
    justify-content: center;

    &-item {
        height: 40px;
        display: flex;
        align-items: center;
    }
}
</style>