<template>
  <div class="bx-switch-box">
    <input
      type="checkbox"
      class="bx-switch"
      :style="style"
      v-model="selected"
      >
    <span
      class="bx-switch-circle"
      @click="onClick"
      />
  </div>
</template>
<script>
import { create } from '../utils'
import Emitter from '../mixins/emitter'

export default create({
  name: 'switch',
  mixins: [Emitter],
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    activeColor: {
      type: String,
      default: '#508cee',
    },
  },
  data() {
    return {}
  },
  computed: {
    style() {
      const style = {}
      if (this.activeColor && this.selected) {
        style.backgroundColor = this.activeColor
      } else {
        style.backgroundColor = '#fff'
      }
      return style
    },
    selected: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
  },
  methods: {
    onClick() {
      this.selected = !this.selected
    },
  },
  watch: {
    selected() {
      this.$emit('change', this.selected)
      this.dispatch('bxs-form-item', 'form.item.validate')
    },
  },
})
</script>
<style>
@import './index.css';
</style>
