<template>
  <div class="h-checkbox" :disabled="disabled" :class="{'h-checkbox-disabled': disabled}">
    <template v-if="!isSingle">
    <label v-for="option of arr" @click="setvalue(option)" :key="option[key]" :class="{'h-checkbox-checked': isInclude(option)}"><span :checked="isInclude(option)" :disabled="disabled" class="h-checkbox-native"></span><span class="h-checkbox-text">{{option[title]}}</span></label>
    </template>
    <label v-else @click="setvalue()" :class="{'h-checkbox-checked': isChecked, 'h-checkbox-indeterminate': !isChecked&&indeterminate}"><span :checked="isChecked" :indeterminate="!isChecked&&indeterminate" :disabled="disabled" class="h-checkbox-native"></span><span v-if="$slots.default" class="h-checkbox-text"><slot></slot></span></label>
  </div>
</template>
<script>
import config from '../../utils/config';
import utils from '../../utils/utils';

export default {
  name: 'hCheckbox',
  model: {
    prop: 'checkStatus',
    event: 'input'
  },
  props: {
    dict: String,
    datas: [Object, Array],
    disabled: {
      type: Boolean,
      default: false
    },
    value: [Object, Number, String],
    checked: {
      type: Boolean,
      default: false
    },
    checkStatus: [Array, Boolean],
    indeterminate: {
      type: Boolean,
      default: false
    },
    keyName: {
      type: String,
      default: () => config.getOption('dict', 'keyName')
    },
    titleName: {
      type: String,
      default: () => config.getOption('dict', 'titleName')
    }
  },
  data() {
    return {
      isChecked: null,
      key: this.keyName,
      title: this.titleName,
    };
  },
  mounted() {
    this.updateChecked();
  },
  watch: {
    checked() {
      this.updateChecked();
    },
    checkStatus() {
      this.updateChecked();
    }
  },
  methods: {
    updateChecked() {
      if (this.isSingle) {
        if (!utils.isNull(this.value)) {
          this.isChecked = this.checkList.indexOf(this.value) != -1;
        } else if (utils.isBoolean(this.checkStatus) || utils.isBoolean(this.checked)) {
          this.isChecked = this.checkStatus || this.checked;
        } else {
          this.isChecked = false;
        }
      }
    },
    setvalue(option) {
      if (this.disabled) return;
      let value = null;
      if (this.isSingle) {
        if (!utils.isNull(this.value)) {
          value = utils.toggleValue(this.checkList, this.value);
        } else if (!utils.isNull(this.checkStatus)) {
          value = !this.isChecked;
        } else if (utils.isBoolean(this.checked)) {
          value = this.checked;
        } else {
          value = this.isChecked = !this.isChecked;
        }
      } else {
        value = utils.copy(this.checkStatus);
        let key = option[this.key];
        value = utils.toggleValue(value, key);
      }
      this.$emit('input', value);
      let event = document.createEvent("CustomEvent");
      event.initCustomEvent("setvalue", true, true, value);
      this.$el.dispatchEvent(event);
    },
    check(key) {
      let value = this.checkList.map(item => String(item));
      return value.indexOf(String(key));
    },
    isInclude(option) {
      let value = this.checkList.map(item => String(item));
      let index = value.indexOf(String(option[this.key]));
      return index > -1;
    }
  },
  computed: {
    checkList() {
      return this.checkStatus || []
    },
    isSingle() {
      return this.arr.length == 0;
    },
    arr() {
      if (!this.datas && !this.dict) {
        return [];
      }
      let datas = this.datas;
      if (this.dict) {
        datas = config.getDict(this.dict);
      }

      return utils.initOptions(datas, this);
    }
  }
};
</script>
