<template>
    <div class="p-[50px]">
    <d-radio-group direction="row" v-model="state.current" size="md" style="margin-bottom: 10px;">
        <d-radio-button v-for="item in state.buttons" :key="item.name" :value="item.name">{{ item.label }}</d-radio-button>
    </d-radio-group>
    <div class="mt-32">
        <renderer-preview v-if="state.current === 'preview'" :content="state.content"  />
        <renderer-form v-if="state.current === 'form'" :content="state.content"  />
        <renderer-md v-if="state.current === 'render'"  :content="state.markdown" :delay="false" />
    </div>
    </div>
</template>
<script setup lang="ts">
    import { reactive } from 'vue';
    import RendererPreview from './renderer-yaml/preview';
    import RendererForm from './renderer-yaml/form';
    import RendererMd from './renderer-yaml/components/renderer-md/index.vue';
    import { validateSchema } from  './renderer-yaml/helper';
    import { mockContent } from './renderer-yaml/mock/data';
    import toMarkdown from './renderer-yaml/helper/toMarkdown';
    interface State {
        content: string,
        markdown: string,
        current: string,
        buttons: Record<string, string>[]
    }
    defineOptions({ name: 'renderMdExample1'})
    const state:State = reactive({ 
        content: mockContent, 
        markdown: '',
        // preview form render
        current: 'form',
        buttons: [{ name: 'preview', label: '预览' }, { name: 'form', label: '提交' }, { name: 'render', label: '渲染'}]
    })
    state.markdown = toMarkdown(validateSchema(mockContent)?.body || []);
</script>