<script lang="ts" setup>
  import { Tabs, List } from 'ant-design-vue';
  import VisualWidgetSelect from './VisualWidgetSelect.vue';
  import TextComponent from '../../components/TextComponent/TextComponent.vue';
  import { textComponentConfig } from '../../components/TextComponent/config';
  const props = defineProps<{
    value: string;
  }>();
  const emit = defineEmits(['update:value']);

  const handleCheck = (checked: string) => {
    emit('update:value', checked);
  };
</script>

<template>
  <section>
    <Tabs>
      <Tabs.TabPane key="1" tab="文本组件">
        <List
          :grid="{ gutter: 10, column: 3, xs: 3, sm: 3, md: 3, lg: 3, xl: 3, xxl: 3 }"
          :data-source="textComponentConfig"
        >
          <template #renderItem="{ item }">
            <List.Item>
              <VisualWidgetSelect
                :checked-id="props.value"
                :control-id="item.id"
                @change="handleCheck"
              >
                <TextComponent :layout="item" :value="item.value" />
              </VisualWidgetSelect>
            </List.Item>
          </template>
        </List>
      </Tabs.TabPane>
      <Tabs.TabPane key="2" tab="仪表组件">
        <div>仪表组件</div>
      </Tabs.TabPane>
    </Tabs>
  </section>
</template>