<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
  <div class="flex w-full p-10px" :class="`complex-list__${type}`">
    <CustomGallery :class="`complex-list__gallery_${type}`" :type="complexTypeMap[type][0]" :gallery-config="galleryConfig" />
    <CustomList :class="`complex-list__list_${type}`" :type="complexTypeMap[type][1]" :list-config="listConfig" />
  </div>
</template>
<script lang="ts" setup>
  import CustomList from './CustomList.vue';
  import CustomGallery from './CustomGallery.vue';

  withDefaults(
    defineProps<{
      listConfig: {
        value: string;
        color: string;
        label: string;
        prop: string;
        info: string;
      }[];
      galleryConfig: {
        value: string;
        color: string;
        label: string;
        prop: string;
      }[];
      /** A B */
      type: string;
    }>(),
    {
      listConfig: () => [],
      galleryConfig: () => [],
      type: 'A',
    }
  );

  const complexTypeMap = {
    A: ['B', 'A'],
    B: ['C', 'A'],
  };

  //   defineEmits(['click']);
</script>
<style lang="less" scoped>
  @import '@/design/theme.less';
</style>
