<template>
  <div class="kole-checkcard-grid" :style="{ gridTemplateColumns: 'repeat(' + cols + ', 1fr)' }">
    <div class="kole-checkcard" v-for="(o, i) in options" :key="i"
         :class="{ 'is-selected': value.indexOf(o.value) >= 0 }" @click="toggle(o.value)">
      <div class="kole-checkcard-icon" v-if="o.icon">{{ o.icon }}</div>
      <div class="kole-checkcard-body">
        <div class="kole-checkcard-title">{{ o.label }}</div>
        <div class="kole-checkcard-desc" v-if="o.desc">{{ o.desc }}</div>
      </div>
      <div class="kole-checkcard-mark"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KoleCheckboxCard',
  props: {
    options: { type: Array, default: function () { return []; } },
    value: { type: Array, default: function () { return []; } },
    cols: { type: Number, default: 3 }
  },
  methods: {
    toggle: function (v) {
      var arr = this.value.slice();
      var idx = arr.indexOf(v);
      if (idx >= 0) arr.splice(idx, 1); else arr.push(v);
      this.$emit('input', arr);
    }
  }
};
</script>

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