<template>
  <div>
    <div v-for="(item,index) in options">
      <label class="checklabel" :class="classes" :for="`checkbox_${uuid}_${index}`" v-if="!ifDisabled(item)">
        <div v-if="!ifChecked(item)">
          <input type="checkbox" class="checkbox" :name="`checkbox_${uuid}_${index}`" :id="`checkbox_${uuid}_${index}`" @change.stop.prevent="onChange(index,$event)">
          <i class="zhidian-font zf-sure checkbox-icon"></i>
        </div>
        <div v-else>
          <input type="checkbox" class="checkbox" checked="checked" :name="`checkbox_${uuid}_${index}`" :id="`checkbox_${uuid}_${index}`" @change.stop.prevent="onChange(index,$event)">
          <i class="zhidian-font zf-sure checkbox-icon checked"></i>
        </div>
        <div class="checkboxContent">{{typeof item === 'object'?item.value:item }}</div>
      </label>
      <label class="checklabel" :class="classes" :for="`checkbox_${uuid}_${index}`" v-else>
        <div>
          <input type="checkbox" class="checkbox" :name="`checkbox_${uuid}_${index}`" :id="`checkbox_${uuid}_${index}`" disabled="disabled">
          <i class="zhidian-font zf-sure checkbox-icon disabled"></i>
        </div>
        <div class="checkboxContent">{{typeof item === 'object'?item.value:item}}</div>
      </label>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CheckList',
  props: {
    options: {
      type: Array,
      required: true
    },
    disableOptions: {
      type: Array,
      default: () => []
    },
    checked: {
      type: Array,
      default: () => []
    },
    reverse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    let classes = ''
    if (this.reverse) {
      classes = 'reverseContent'
    }
    return {
      classes: classes,
      uuid: Math.random().toString(36).substring(3, 8)
    }
  },
  methods: {
    onChange(index, e) {
      let i = e.currentTarget.nextElementSibling;
      if (i.classList.contains('checked')) {
        i.classList.remove('checked')
      } else {
        i.classList.add('checked')
      }
      this.$emit('on-change', {
        index: index,
        checked: e.currentTarget.checked,
        value: this.options[index]
      })
      this.$emit('onChange', {
        index: index,
        checked: e.currentTarget.checked,
        value: this.options[index]
      })
    },
    ifDisabled(val) {
      let isDisabled = false;
      if (typeof val === 'object') {
        this.disableOptions.forEach((I, i) => {
          if (I.name == val.name) {
            isDisabled = true
          }
        })
      } else {
        this.disableOptions.forEach((I, i) => {
          if (I == val) {
            isDisabled = true
          }
        })
      }
      return isDisabled
    },
    ifChecked(val) {
      let isChecked = false;
      if (typeof val === 'object') {
        this.checked.forEach((I, i) => {
          if (I.name == val.name) {
            isChecked = true
          }
        })
      } else {
        this.checked.forEach((I, i) => {
          if (I == val) {
            isChecked = true
          }
        })
      }

      return isChecked
    }
  }
}
</script>
