<template>
  <div>
    <div class="kole-densw">
      <button
        v-for="o in options"
        :key="o.value"
        class="kole-densw-opt"
        :class="{ 'is-active': value === o.value }"
        @click="$emit('input', o.value)"
      >{{ o.label }}</button>
    </div>
    <div class="kole-densw-demo" :class="value">
      <div v-for="(r, i) in rows" :key="i" class="kole-densw-row"><span>{{ r.name }}</span><span class="muted">{{ r.count }}</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KoleDensitySwitcher',
  props: {
    value: { type: String, default: 'default' },
    options: {
      type: Array,
      default: () => [
        { value: 'loose', label: '宽松' },
        { value: 'default', label: '默认' },
        { value: 'compact', label: '紧凑' }
      ]
    },
    rows: {
      type: Array,
      default: () => [
        { name: '用户管理', count: '128 项' },
        { name: '角色管理', count: '12 项' },
        { name: '菜单管理', count: '36 项' }
      ]
    }
  }
};
</script>

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