<template>
    <div class="segment-descriptions">
        <el-descriptions :column="column" :border="border">
            <template #title>
                <slot name="title" :model="model"></slot>
            </template>
            <template #extra>
                <slot name="extra" :model="model"></slot>
            </template>
            <el-descriptions-item :label="schema.label" v-for="schema in visibleSchemas" :span="getSpan(schema)">
                <slot name="default" :model="model" :schema="schema">
                    <cell :schema="schema" :model="model"></cell>
                </slot>
            </el-descriptions-item>
        </el-descriptions>
        <div class="segment-descriptions_footer">
            <slot name="footer" :model="model"></slot>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import Cell from './parts/Cell.vue';
import { checkSchemaVisible } from './libs/form';
import { modelValueOf } from './libs/model';

const props = defineProps({
    size: {
        type: String,
    },
    schemas: {
        type: Array,
    },
    scenario: {
        type: String,
        default: 'view',
    },
    model: {
        type: Object
    },
    column: {
        type: Number,
        default: 2,
    },
    border: {
        type: Boolean,
        default: true
    }
})

const getSpan = (schema) => {
    if (['textarea'].indexOf(schema.format) > -1) {
        return props.column;
    } else {
        return 1;
    }
}

const visibleSchemas = computed(() => {
    let modelValue = modelValueOf(props.model);
    return props.schemas.filter(v => {
        if (Array.isArray(v.scenarios)) {
            if (v.scenarios.indexOf(props.scenario) > -1) {
                return checkSchemaVisible(v, modelValue);
            }
        }
        return false;
    })
})
</script>