<style lang="less">
.component-switch-main {
    // width: 96rpx;
    // height: 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.component-switch {
    background:  #37C3C4;
    border-radius: 12px;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
    &.disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }
}

.component-switch .checked-circle {
    position: absolute;
    top: 50%;
    left: -1px;
    transform: translate(0, -50%);
    transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(196, 196, 196, 1);
    box-sizing: border-box;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.03);

    &.circle-true {
        left: 1px;
    }
}

.component-switch.checked .checked-circle {
    transform: translate(100%, -50%);
}
</style>

<template>
    <div
        class="component-switch-main"
        v-on:click.stop="changChecked"
    >
        <div
            class="component-switch"
            style="{{'background-color:'+(checked? defaultActiveColor: defaultInactiveColor)+';'+'width:'+width+'rpx;height:'+ height+'rpx;'}}"
            :class="{'checked': checked,'disabled':disable}"
        >
            <div
                class="checked-circle"
                :class="{'circle-true': checked}"
                style="{{ 'width:'+height+'rpx;height:'+ height+'rpx;' }}"
            ></div>
        </div>
    </div>
</template>

<script>
import wepy from '@wepy/core'

wepy.component({
  data: {
    defaultInactiveColor: 'rgba(196, 196, 196, 0.2)',
    defaultActiveColor: '#37C3C4',
    disable: false
  },
  props: {
    height: {
      type: Number,
      default: 48
    }, // 按钮的宽高
    width: {
      type: Number,
      default: 96
    }, // 圆圈宽高
    checked: Boolean,
    eqTitle: String
  },
  computed: {
    confirmText() {
      const text = this.checked ? '关闭' : '开启'
      return text
    }
  },
  watch: {
    checked() {
      this.disable = false
    }
  },
  methods: {
    changChecked() {
      this.vibrateShort()
      this.$emit('component-switch-change', !this.checked)
    },
    vibrateShort() {
      if (wx.canIUse('vibrateShort')) {
        wx.vibrateShort()
      } else {
        wx.vibrateLong()
      }
    }

  }
})
</script>
