<template>
  <div>
    <md-field-item :title="title" v-if="showLabel">
      <div class="switch-parent" :class="align">
        <div
          class="md-switch"
          :class="[
        disabled ? 'disabled' : '',
        value ? 'active' : '']"
          @click="$_onChange($event)">
        </div>
      </div>
    </md-field-item>
    <div
      v-else
      class="md-switch"
      :class="[
        disabled ? 'disabled' : '',
        value ? 'active' : '']"
      @click="$_onChange($event)">
    </div>
  </div>
</template>

<script>
  import FieldItem from '../field-item'
export default {
  name: 'md-switch',
  components: {
    [FieldItem.name]: FieldItem
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    title: {//新增标题属性
      type: String,
      default: '开关',
    },
    showLabel: {//新增是否显示标题属性
      type: Boolean,
      default: true,
    },
    align: {//新增文字是否居中属性
      type: String,
      default: 'left',
    }
  },

  data() {
    return {}
  },

  methods: {
    // MARK: events handler, 如 $_onButtonClick
    $_onChange(event) {
      if (this.disabled) {
        return
      }
      this.$emit('input', !this.value)
      this.$emit('change', event)
    },
  },
}

</script>


<style lang="stylus">
  .switch-parent
    display flex
  &.left
    justify-content flex-start
  &.center
    justify-content center
  &.right
    justify-content flex-end


  .md-switch
    box-sizing border-box
    position relative
    width 40px
    height 24px
    border-radius 24px
    background-color switch-fill-inverse
    &.disabled
      opacity switch-item-color-disabled
    &::before, &::after
      content ""
      position absolute
      transition transform .3s
    &::before
      top 0
      left 0
      width 40px
      height 24px
      border-radius 12px
      background-color switch-fill-inverse
    &::after
      top 2px
      left 2px
      width 20px
      height 20px
      background-color switch-handle-color
      border-radius 50%
    &.active
      background-color switch-fill
    &.active::before
        transform scale(0)
    &.active::after
        transform translateX(16px)
</style>
