<template>
  <button :class="_class">
    <input
      :class="_inputClass"
      type="checkbox"
      :disabled="disabled"
      v-model="checked"
      @click="this.onHandleClick"
    />
    <span :class="_textClass" v-if="checked"><Icon v-if="checkedIcon" :icon="checkedIcon"></Icon> {{ checkedVal }}</span>
    <span :class="_textClass" v-else><Icon v-if="unCheckedIcon" :icon="unCheckedIcon"></Icon> {{ unCheckedVal }}</span>
  </button>
</template>

<script>
  import Icon from '../icon';

  const name = 'hive-switch';

  export default {
    name,
    components: {
      Icon,
    },
    props: {
      /**
       * 初始是否选中
       */
      defaultChecked: {
        type: Boolean,
        default: false,
      },
      /**
       * 是否禁用
       */
      disabled: {
        type: Boolean,
        default: false,
      },
      /**
       * 当前是否选中
       */
      isChecked: Boolean,
      /**
       * 选中时的内容
       */
      checkedVal: String,
      /**
       * 未选中时的内容
       */
      unCheckedVal: String,
      /**
       * 选中时的Icon
       */
      checkedIcon: String,
      /**
       * 未选中时的Icon
       */
      unCheckedIcon: String,
      /**
       * 点击回调事件
       */
      onClick: Function,
      /**
       * Switch 值发生改变时回调事件
       */
      onChange: Function,
    },
    data() {
      return {
        checked: this.isChecked ? this.isChecked : this.defaultChecked,
      };
    },
    computed: {
      _class() {
        return [
          `${name}`,
          {
            'hive-switch--disabled': this.disabled,
            'hive-switch--ischecked': this.checked && !this.disabled,
            'hive-switch--unchecked': !this.checked && !this.disabled,
          },
        ];
      },
      _inputClass() {
        return [
          `${name}__checkinput`,
        ];
      },
      _textClass() {
        return [
          `${name}__text`,
        ];
      },
    },
    watch: {
      checked(newVal, oldVal) {
        this.$emit('onChange', newVal);
      },
    },

    methods: {
      onHandleClick() {
        this.$emit('onClick', event);
      },
    },
  };
</script>
