<template>
  <div class="kole-layoutsw">
    <div
      v-for="o in options"
      :key="o.value"
      class="kole-layoutsw-opt"
      :class="{ 'is-active': value === o.value }"
      @click="$emit('input', 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>
export default {
  name: 'KoleLayoutSwitcher',
  props: {
    value: { type: String, default: 'side' },
    options: {
      type: Array,
      default: () => [
        { value: 'side', label: '侧边布局' },
        { value: 'top', label: '顶部布局' },
        { value: 'mixed', label: '混合布局' }
      ]
    }
  }
};
</script>

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