<script lang="ts" setup>
  import { Tabs, List } from 'ant-design-vue';
  import { ref } from 'vue';
  import VisualWidgetSelect from './VisualWidgetSelect.vue';
  import TextComponent from '../../components/TextComponent/TextComponent.vue';
  import { textComponentConfig } from '../../components/TextComponent/config';
  const checkedId = ref('1');

  const handleCheck = (checked: string) => {
    checkedId.value = checked;
  };
</script>

<template>
  <section>
    <Tabs>
      <Tabs.TabPane key="1" tab="文本组件">
        <List :grid="{ gutter: 10, column: 3 }" :data-source="textComponentConfig">
          <template #renderItem="{ item }">
            <List.Item>
              <VisualWidgetSelect
                :checked-id="checkedId"
                :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>