<style lang="less">
.component-switch {
  width: 80rpx;
  height: 48rpx;
  /* padding:0 4rpx; */
  background-color: #EBEBF2;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  border-radius: 40rpx;
  cursor: pointer;
  transition: background-color 0.3s;
}

.component-switch .checked-circle {
  position: absolute;
  top: 50%;
  left: 4rpx;
  z-index: 1;
  width: 40rpx;
  height: 40rpx;
  border-radius: 40rpx;
  transform: translate(0, -50%);
  background: #FFFFFF;
  box-shadow: 0px 5rpx 6rpx rgba(0, 0, 0, 0.15), 0px 5rpx 2rpx rgba(0, 0, 0, 0.06);
  transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
}

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

<template>
 <div class="component-switch" :class="{'checked': checked}" style="{{'background-color:'+(checked? activeColor||defaultActiveColor: inactiveColor||defaultInactiveColor)+';' }}"   v-on:click.stop="changChecked">
  <div class="checked-circle"></div>
</div>
</template>

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

wepy.component({
  data: {
    defaultInactiveColor: '#EBEBF2',
    defaultActiveColor: 'rgba(77, 148, 255, 0.8)'
  },
  props: {
    checked: Boolean,
    activeColor: String,
    inactiveColor: String
  },
  methods: {
    changChecked() {
      let checked = this.checked;
      this.$emit('component-switch-change', !checked); 
    }
  }
});
</script>