<template>
    <div class="custom-switch" @click="toggle">
        <div class="switch-track" :style="{
            width: width + 'px',
            height: height + 'px',
            borderRadius: (height / 2) + 'px',
            backgroundColor: trackColor
        }">
            <!-- 左侧文字 -->
            <div class="switch-text switch-text-left" :class="{ 'text-active': !modelValue }" :style="{
                fontSize: textFontSize + 'px',
                lineHeight: height + 'px',
                color: modelValue ? textColorOff : textColorOn,
                width: (width / 2) + 'px',
                textAlign: 'center'
            }">
                {{ inactiveText }}
            </div>
            <!-- 右侧文字 -->
            <div class="switch-text switch-text-right" :class="{ 'text-active': modelValue }" :style="{
                fontSize: textFontSize + 'px',
                lineHeight: height + 'px',
                color: modelValue ? textColorOn : textColorOff,
                width: (width / 2) + 'px',
                textAlign: 'center'
            }">
                {{ activeText }}
            </div>
            <!-- 滑块 -->
            <div class="switch-thumb" :class="{ 'thumb-active': modelValue }" :style="{
                backgroundColor: thumbColor,
                width: (width / 2) + 'px',
                height: height + 'px',
                borderRadius: (height / 2) + 'px',
                transform: modelValue ? `translateX(${width - (width / 2) - 1}px)` : 'translateX(1px)',
                top: '0',
                left: '0'
            }">
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    width: {
        type: Number,
        default: 80
    },
    height: {
        type: Number,
        default: 30
    },
    activeText: {
        type: String,
        default: '自'
    },
    inactiveText: {
        type: String,
        default: '手'
    },
    thumbColor: {
        type: String,
        default: '#6ab946'
    },
    trackColor: {
        type: String,
        default: '#d7ecf4'
    },
    textColorOn: {
        type: String,
        default: '#ffffff'
    },
    textColorOff: {
        type: String,
        default: '#3e7550'
    }
})

const emit = defineEmits(['update:modelValue'])

const toggle = () => {
    emit('update:modelValue', !props.modelValue)
}

// 计算文字大小
const textFontSize = computed(() => {
    return Math.floor(props.height * 0.45)
})
</script>

<style scoped>
.custom-switch {
    display: inline-block;
    cursor: pointer;
    user-select: none;
}

.switch-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.switch-text {
    font-weight: 500;
    z-index: 3;
    transition: all 0.3s ease;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 2px;
}

.switch-thumb {
    position: absolute;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    box-sizing: border-box;
}

/* 悬停效果 */
.custom-switch:hover .switch-thumb {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
</style>