<template>
  <div class="weui_cell weui_cell_switch">
    <div class="weui_cell_hd weui_cell_primary">
      <label class="weui_label" :style="labelStyle">{{{data.name}}}</label>
      <inline-desc v-if="inlineDesc">{{inlineDesc}}</inline-desc>
    </div>
    <div class="weui_cell_ft">
      <input class="weui_switch" type="checkbox" :disabled="disabled" v-model="data.state"/>
    </div>
  </div>
</template>

<script>
import InlineDesc from 'vux/dist/components/inline-desc'

export default {
  components: {
    InlineDesc
  },
  computed: {
    labelStyle: function () {
      let isHTML = /<\/?[^>]*>/.test(this.title)
      let width = Math.min(isHTML ? 5 : (this.title.length + 1), 14) + 'em'
      return {
        width
      }
    }
  },
  props: {
    data: {},
    disabled: {
      type: Boolean,
      default: false
    },
    inlineDesc: {
      type: String
    }
  },
  ready: function () {},
  watch: {
    'data.state': function (newState) {
      this.$dispatch('on-change', this.data)
    }
  }
}
</script>

<style>
.weui_cell_switch .weui_cell_ft {
  font-size: 0;
}
</style>
