<style lang="less">
.component-switch-main {
    width: 40rpx;
    height: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.component-switch {
    height: 12rpx;
    width: 40rpx;
    background: #FFE823;
    border-radius: 24rpx;
    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: 49.8%;
    left: -1px;
    width: 20rpx;
    height: 20rpx;
    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 #C4C4C4;
    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"
    >
        <div
            class="component-switch"
            style="{{'background-color:'+(checked? activeColor||defaultActiveColor: inactiveColor||defaultInactiveColor)+';' }}"
            :class="{'checked': checked,'disabled':disable}"
        >
            <div
                class="checked-circle"
                :class="{'circle-true': checked}"
            ></div>
        </div>
    </div>
</template>

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

wepy.component({
  data: {
    defaultInactiveColor: 'rgba(196, 196, 196, 0.2)',
    defaultActiveColor: 'rgba(255, 232, 35, 1)',
    disable: false
  },
  props: {
    eqTitle: String,
    checked: Boolean
  },
  methods: {
    changChecked() {
      this.$emit('component-switch-change');
    }

  }
});
</script>
