<template>
  <div class="weui_cell weui_cell_switch">
    <div class="weui_cell_hd weui_cell_primary">
      <label
        class="weui_label"
        :style="labelStyle"
      >
        {{ title }}
      </label>
      <inline-desc v-if="inlineDesc">
        {{ inlineDesc }}
      </inline-desc>
    </div>
    <div class="weui_cell_ft">
      <!-- <input class="weui_switch" type="checkbox" :disabled="disabled" :checked="value" @change="updateValue($event.target.checked)"/> -->
      <input
        v-model="currentValue"
        class="weui_switch"
        type="checkbox"
        :disabled="disabled"
      >
    </div>
  </div>
</template>

<script>
import InlineDesc from '../inline-desc'

export default {
  components: {
    InlineDesc
  },
  props: {
    title: {
      type: String,
      required: true
    },
    disabled: Boolean,
    value: {
      type: Boolean,
      default: false
    },
    inlineDesc: String
  },
  data () {
    return {
      currentValue: this.value
    }
  },
  computed: {
    labelStyle () {
      let isHTML = /<\/?[^>]*>/.test(this.title)
      let width = Math.min(isHTML ? 5 : (this.title.length + 1), 14) + 'em'
      return {
        width
      }
    }
  },
  // methods: {
  //   updateValue (value) {
  //     this.$emit('input', value)
  //     this.$emit('on-change', value)
  //   }
  // },
  watch: {
    currentValue (val) {
      this.$emit('input', val)
      this.$emit('on-change', val)
    },
    value (val) {
      this.currentValue = val
    }
  }
}
</script>
