<template>
  <div class="vux-x-switch weui-cell weui-cell_switch">
    <div class="weui-cell__bd">
      <label class="weui-label" :style="labelStyle" v-html="title"></label>
    </div>
    <div class="weui-cell__ft">
      <input class="weui-switch" type="checkbox" :disabled="disabled" v-model="currentValue"/>
    </div>
  </div>
</template>
<script>

export default {
  name:'mu-switch',
  computed: {
    labelStyle () {
      let isHTML = /<\/?[^>]*>/.test(this.title)
      let width = Math.min(isHTML ? 5 : (this.title.length + 1), 14) + 'em'
      return {
        display: 'block',
        width
      }
    }
  },
  props: {
    title: {
      type: String,
      required: true
    },
    disabled: Boolean,
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      currentValue: this.value
    }
  },
  watch: {
    currentValue (val) {
      this.$emit('input', val)
      this.$emit('on-change', val)
    },
    value (val) {
      this.currentValue = val
    }
  }
}
</script>
<style lang="less">
.weui-cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.weui-cell__bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.weui-label {
    display: block;
    width: 105px;
    word-wrap: break-word;
    word-break: break-all;
}
.weui-cell__ft {
    text-align: right;
    color: #999;
}
.weui-cell_switch{
  padding-top: 6px;
  padding-bottom: 6px;
}
.weui-switch{
    appearance: none;
}
.weui-switch,
.weui-switch-cp__box{
    position: relative;
    width: 52px;
    height: 32px;
    border: 1px solid #DFDFDF;
    outline: 0;
    border-radius: 16px;
    box-sizing: border-box;
    background-color: #DFDFDF;
    -webkit-transition: background-color 0.1s, border 0.1s;
    transition: background-color 0.1s, border 0.1s;

    &:before{
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 30px;
      border-radius: 15px;
      background-color: #FDFDFD;
      -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
      transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
      transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
      transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
    }
    &:after{
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      border-radius: 15px;

    background-color: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
      -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
      transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
      transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
      transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
    }
}
.weui-switch:checked,
.weui-switch-cp__input:checked ~ .weui-switch-cp__box{
    /** vux **/
    border-color: #4cd964;
    background-color: #4cd964;
    /** end vux **/
    &:before {
        transform: scale(0);
    }
    &:after {
        transform: translateX(20px);
    }
}

// 兼容IE Edge的版本
.weui-switch-cp__input{
    position: absolute;
    left: -9999px;
}
.weui-switch-cp__box{
    display: block;
}
  .weui-cell_switch .weui-cell__ft {
    font-size: 0;
  }
  input.weui-switch[disabled] {
    opacity: 0.6;
  }
  .vux-x-switch.weui-cell_switch {
    padding-top: 6px;
    padding-bottom: 6px;
  }
</style>