<template>
  <div class="kole-layoutsw">
    <div
      v-for="o in options"
      :key="o.value"
      class="kole-layoutsw-opt"
      :class="{ 'is-active': modelValue === o.value }"
      @click="emit('update:modelValue', o.value)"
    >
      <div class="kole-layoutsw-mini">
        <div v-if="o.value !== 'side'" class="s-top"></div>
        <div class="s-body">
          <div v-if="o.value !== 'top'" class="s-side"></div>
          <div class="s-main"></div>
        </div>
      </div>
      <div class="kole-layoutsw-label">{{ o.label }}</div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  modelValue: { type: String, default: 'side' },
  options: {
    type: Array,
    default: () => [
      { value: 'side', label: '侧边布局' },
      { value: 'top', label: '顶部布局' },
      { value: 'mixed', label: '混合布局' }
    ]
  }
});
const emit = defineEmits(['update:modelValue']);
</script>

<style src="./LayoutSwitcher.css"></style>
