<template>
  <view class="ml-switch" :class="[isChecked ? 'is--on' : 'is--off', {'is--disabled': disabled,'is--animat': hasAnimat}]">
    <view class="ml-switch--button" @tap="clickEvent">
      <view class="ml-switch--label ml-switch--label-on">{{ onShowLabel }}</view>
      <view class="ml-switch--label ml-switch--label-off">{{ offShowLabel }}</view>
      <view class="ml-switch--icon"></view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MlSwitch',
  options: {
    virtualHost: true
  },
  props: {
    modelValue: [String, Number, Boolean],
    width: String,
    openLabel: String,
    closeLabel: String,
    openValue: {
      type: [String, Number, Boolean],
      default: true
    },
    closeValue: {
      type: [String, Number, Boolean],
      default: false
    },
    disabled: Boolean,
    className: String
  },
  data () {
    return {
      hasAnimat: false,
      activeTimeout: null as any
    }
  },
  computed: {
    isChecked () {
      return this.modelValue === this.openValue
    },
    onShowLabel () {
      return this.openLabel || ''
    },
    offShowLabel () {
      return this.closeLabel || ''
    }
  },
  methods: {
    clickEvent (evnt: any) {
      if (!this.disabled) {
        clearTimeout(this.activeTimeout)
        const value = this.isChecked ? this.closeValue : this.openValue
        this.hasAnimat = true
        this.$emit('update:modelValue', value)
        this.$emit('change', { value })
        // 自动更新校验状态
        this.activeTimeout = setTimeout(() => {
          this.hasAnimat = false
        }, 400)
      }
    }
  }
})
</script>

<style lang="scss">
.ml-switch {
  display: inline-block;
  color: $ml-font-color;
  vertical-align: middle;
  padding: 12rpx;
  user-select: none;
  text-align: center;
  &.is--animat {
    .ml-switch--button {
      transition: border-color .3s, background-color .3s;
    }
    .ml-switch--icon {
      transition: all 0.3s;
    }
  }
  &.is--on {
    .ml-switch--button {
      padding-right: 40rpx;
      background-color: $ml-theme-primary-color;
    }
    .ml-switch--icon {
      left: 100%;
      transform: translateX(-40rpx);
    }
  }
  &.is--off {
    .ml-switch--button {
      padding-left: 42rpx;
      background-color: rgba(0,0,0,0.35);
    }
    .ml-switch--icon {
      left: 6rpx;
      transform: translateX(0);
    }
  }
  &.is--on .ml-switch--label-off,
  &.is--off .ml-switch--label-on {
    height: 0;
    visibility: hidden;
    overflow: hidden;
  }
  &.is--on,
  &.is--off {
    .ml-switch--label {
      opacity: 1;
    }
  }
  &:not(.is--disabled) {
    .ml-switch--button {
      cursor: pointer;
      &:focus {
        box-shadow: 0 0 8rpx 0 #246BFD;
      }
    }
  }
  &.is--disabled {
    .ml-switch--button {
      cursor: no-drop;
    }
    &.is--on {
      .ml-switch--button {
        background-color: lighten(#246BFD, 20%);
      }
    }
    &.is--off {
      .ml-switch--button {
        background-color: rgba(0,0,0,0.15)
      }
    }
  }
  .ml-switch--button {
    display: block;
    position: relative;
    height: 46rpx;
    line-height: 46rpx;
    min-width: 80rpx;
    padding: 0 14rpx;
    border-radius: 46rpx;
    border: 0;
    outline: 0;
  }
  .ml-switch--label {
    opacity: 0;
    display: block;
    color: #fff;
    font-size: 22rpx;
  }
  .ml-switch--icon {
    position: absolute;
    top: 7rpx;
    left: 0;
    width: 34rpx;
    height: 34rpx;
    border-radius: 50%;
    background-color: #fff;
  }
  .ml-switch--label-icon {
    margin-right: 10rpx;
  }
}
</style>
