<template>
  <div class="checkbox-control" :class="layoutClass">
    <!-- <template v-for="item in list"> -->
      <input type="checkbox" :value="item.value || item" v-model="selected" :id="uuid + $index">
      <label @click="manualSelect" class="checkbox" :for="uuid+ $index">{{isAlone ? '' : (item.label || item)}}</label>
    <!-- </template> -->
  </div>
</template>

<script>
  module.exports = {
    props: {
      list: {
        type: Array,
        required: true
      },
      layout: {
        type: Array,
        default: ''
      },
      selected: {
        type: Array,
        twoWay: true
      }
    },
    data: function () {
      return {
        isAlone: false
      };
    },
    computed: {
      layoutClass: function () {
        var clazz = [];
        for (var i = 0, len = this.layout.length; i < len; i++) {
          if (this.layout[i] === 'control') {
            continue;
          }
          if (this.layout[i] === 'alone') {
            this.isAlone = true;
          }
          clazz.push('checkbox-' + this.layout[i]);
        }
        return clazz;
      }
    },
    methods: {
      manualSelect: function () {
        var self = this;
        window.setTimeout(function () {
          self.$dispatch('manual-change');
        }, 50);
      }
    },
    data: function () {
      return {
        uuid: 'checkbox_' + Math.random().toString().substr(2).toString(32)
      };
    }
  };

</script>