<script setup lang="ts">
import { useLayout } from '../composables/useLayout';
import SwitcherDropdown from './SwitcherDropdown.vue';

const { layouts, currentLayoutId, setLayout } = useLayout();
</script>

<template>
  <!-- 只有注册了多个布局时才显示 -->
  <SwitcherDropdown
    v-if="layouts.length > 1"
    v-model="currentLayoutId"
    :options="layouts"
    title="切换布局"
    @update:model-value="setLayout"
  >
    <!-- 默认图标：布局/网格 -->
    <template #icon>
      <slot name="icon">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
          <path d="M3 3h8v8H3V3zm0 10h8v8H3v-8zm10-10h8v8h-8V3zm0 10h8v8h-8v-8z" />
        </svg>
      </slot>
    </template>
    <!-- 透传 option 插槽 -->
    <template v-if="$slots['option']" #option="slotProps">
      <slot name="option" v-bind="slotProps" />
    </template>
  </SwitcherDropdown>
</template>