<template>
  <view :class="className" :style="style" class="cu-form-group">
    <view class="title" style="flex-shrink: 0;">{{ title }}</view>
    <switch
      @change="change"
      :checked="value"
      :disabled="disabled"
      :class="[value ? 'checked' : '', icon ? 'switch-' + icon : '', color ? color : '', radius ? 'radius' : '']"
    ></switch>
  </view>
</template>

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

  props: {
    title: {},
    color: {},
    icon: {},
    radius: {},
    disabled: {},
    value: {}
  },

  methods: {
    change(e) {
      this.$emit('change', e.detail.value)
      this.$emit('input', e.detail.value)
    }
  }
}
</script>
