<template>
  <view class="ml-checkbox-button" :class="[className || '', {'is-disabled': disabled}]">
    <view class="ml-checkbox-button-item" v-for="(item, index) in optionList" :class="{'is-disabled': disabled, 'is-active': value && value.includes(item.value)}" :key="index" @tap="changeEvent(item)">{{ item.label }}</view>
  </view>
</template>

<script>
export default {
  name: 'MlCheckboxButton',
  options: {
    virtualHost: true
  },
  props: {
    value: Array,
    isAll: Boolean,
    options: Array,
    disabled: Boolean,
    className: String
  },
  computed: {
    optionList () {
      return this.options || []
    }
  },
  methods: {
    changeEvent (option) {
      if (this.disabled) {
        return
      }
      const checked = !this.value || !this.value.includes(option.value)
      const value = this.value ? this.value.filter(val => val !== option.value) : []
      if (checked) {
        value.push(option.value)
      }
      this.$emit('input', value)
      this.$emit('change', { value, option })
    }
  }
}
</script>

<style lang="scss">
.ml-checkbox-button {
  display: flex;
  flex-wrap: wrap;
}
.ml-checkbox-button-item {
  border: 1px solid #e5e5e5;
  padding: 0 32rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: $ml-border-radius;
  margin: 10rpx 20rpx 10rpx 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  // #ifdef H5
  cursor: pointer;
  // #endif
  &:last-child {
    margin-left: 0;
  }
  &.is-active {
    color: #ffffff;
    background-color: $ml-theme-primary-color;
  }
  &.is-disabled {
    color: rgba(0,0,0,0.25);
  }
}
</style>
