<template>
  <div class="zui-checkbox" @click="onClick" :class="classRender" :style="styleRender">
    <div class="zui-checkbox__icon">
      <slot v-if="$slots.icon" :checked="checked" ></slot>
      <zui-icon v-else :class="iconClassRender" :style="iconStyleRender" :name="iconRender" :size="size" @click="onIconClick"></zui-icon>
    </div>
    <div v-if="$slots.default" class="zui-checkbox-label">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Checkbox',
  props: {
    value: Boolean,
    icon: {
      type: String,
      default: 'checkcircle'
    },
    iconChecked: {
      type: String,
      default: 'radiobuttonunchecked'
    },
    labelDisabled: Boolean,
    disabled: Boolean,
    color: String,
    size: String,
  },
  data: function() {
    return {
      checked: this.value
    }
  },
  watch: {
    value: function(val) {
      this.checked = val;
    },
  },
  computed: {
    iconRender: function() {
      return this.checked ? this.icon : this.iconChecked;
    },
    styleRender: function() {
      return { cursor: !this.labelDisabled ? 'pointer' : '' };
    },
    classRender: function() {
      return { disabled: this.disabled };
    },
    iconStyleRender: function() {
      return { color: this.color && this.checked && !this.disabled ? this.color : '' };
    },
    iconClassRender: function() {
      return { checked: this.checked && !this.disabled };
    }
  },
  methods: {
    toggle: function() {
      if (!this.disabled) {
        this.$emit('input', !this.checked);
      }
    },
    onClick: function() {
      if (!this.labelDisabled) {
        this.toggle();
      }
    },
    onIconClick: function() {
      this.toggle();
    }
  }
}
</script>

<style>
@import "./index.css";
</style>