<template>
  <div
    :class="{
      [`is-${cols}col`]: cols >= 1
    }"
    :disabled="disabled"
    class="ibps-checker"
  >
    <div
      v-for="option in options"
      :key="option[valueKey]"
      class="ibps-checker-col"
    >
      <div
        :class="{
          'checker':checker,
          'is-radio':type === 'radio',
          'is-selected': value.indexOf(option[valueKey]) !== -1,
          'is-disabled': option.disabled || disabled,
          'is-ellipsis':ellipsis,
          [`align--${align}`]: align
        }"
        class="ibps-checker-item"
        @click="select(option)"
      >
        <slot
          :option="option"
          :select="select"
          name="content"
        >
          {{ option[labelKey] }}
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'checker',
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    type: { // radio 或者checkbox
      type: String,
      default: 'checkbox'
    },
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    valueKey: {
      type: String,
      default: 'value'
    },
    labelKey: {
      type: String,
      default: 'label'
    },
    ellipsis: {
      type: Boolean,
      default: true
    },
    radioRequired: Boolean,
    max: {
      type: [String, Number]
    },
    maxToast: Boolean,
    maxMessage: {
      type: String,
      default: () => {
        return `超过选择最大个数：{max}`
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    cols: {
      type: Number,
      default: 0
    },
    align: {
      type: String,
      default: 'center'
    },
    checker: {
      type: Boolean,
      default: true
    }

  },
  computed: {
    checkboxGroup() {
      return this.value
    }
  },
  methods: {
    // MARK: events handler
    $_onInput(values) {
      this.$emit('input', values)
    },
    // MARK: public methods
    select(item) { // { value, disabled }
      const disabled = item.disabled
      const value = item[this.valueKey]
      if (disabled) { return }
      const checkedValue = this.checkboxGroup.slice()
      let res = []
      const index = checkedValue.indexOf(value)
      if (this.type === 'radio') {
        const index = checkedValue.indexOf(value)
        if (index === -1 || (this.radioRequired && index === 0)) {
          res = [value]
        } else {
          res = []
        }
      } else {
        if (index !== -1) {
          checkedValue.splice(index, 1)
        } else {
          if (this.max && checkedValue.length >= this.max) {
            if (this.maxToast) {
              this.$toast(this.$utils.format(this.maxMessage, {
                max: this.max
              }))
            }

            return
          }
          checkedValue.push(value)
        }
        res = checkedValue
      }
      this.$_onInput(res)
    }
  }
}
</script>
