<template>
  <view :class="className" :style="style" class="cu-form-group">
    <view class="title">{{ title }}</view>
    <checkbox
      @change="change"
      :class="[isCheck ? 'checked' : '', color ? color : '', round ? 'round' : '']"
      :checked="isCheck"
      :value="checkboxValue"
      :disabled="disabled"
    ></checkbox>
  </view>
</template>

<script>
export default {
  name: 'l-checkbox',

  props: {
    title: {},
    disabled: {},
    round: {},
    color: {},
    checkboxValue: {},
    checked: {},
    value: { default: () => [] }
  },

  methods: {
    change(e) {
      let newVal = this.value
      const isCurrentCheck = e.detail.value

      if (isCurrentCheck) {
        newVal = [...this.value, this.checkboxValue]
      } else {
        newVal = this.value.filter(t => t !== this.checkboxValue)
      }

      this.$emit('input', newVal)
      this.$emit('change', newVal)
    }
  },

  computed: {
    isCheck() {
      return this.value.includes(this.checkboxValue)
    }
  }
}
</script>
