<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
    modelValue: boolean;
    disabled?: boolean;
}>();
const emits = defineEmits(['update:modelValue', 'onChange']);

const switchValue = computed({
    get: () => props.modelValue,
    set: value => emits('update:modelValue', value),
});

function handleChange() {
    if (props?.disabled) return;
    switchValue.value = !switchValue.value;
    emits('onChange', switchValue.value);
}
</script>

<template>
    <view
        class="mfx-switch"
        :class="{ disabled }"
        :style="{ background: `${switchValue ? '#64EEEE' : '#EAEEF2'}` }"
        @click.stop="handleChange"
    >
        <view
            class="mfx-switch-circle"
            :style="{
                transform: `translateX(${switchValue ? 66 : 14}rpx)`,
                background: `${switchValue ? '#1a1a1a' : '#ffffff'}`,
            }"
        ></view>
    </view>
</template>

<style lang="scss" scoped>
.mfx-switch {
    width: 108rpx;
    height: 56rpx;
    background: #eaeef2;
    border-radius: 28rpx;
    display: flex;
    align-items: center;
    position: relative;

    &.disabled {
        opacity: 0.5;
    }

    &-circle {
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
        background: #ffffff;
        position: absolute;
        transform: translateX(14rpx);
        transition: transform 0.4s ease;
    }
}
</style>
