<template>
    <div class="hc-new-switch" :class="[`size-${size ?? 'large'}`, round ? 'round' : '', isDisabled ? 'disabled' : '']">
        <template v-for="item in datas">
            <div class="switch-bg" :class="item?.key == keyVal?'dots':''" @click="switchClick(item)">
                <span>{{item?.name}}</span>
                <span class="ml-2" v-if="item.text">{{item?.text}}</span>
            </div>
        </template>
    </div>
</template>

<script setup>
import {ref,watch} from "vue";
const props = defineProps({
    datas: {
        type: Array,
        default: () => ([])
    },
    keys: {
        type: [String,Number],
        default: ''
    },
    size: { //large / default /small
        type: [String,Number],
        default: 'large'
    },
    round: {
        type: Boolean,
        default: true
    },
    disabled: {
        type: Boolean,
        default: false
    },
})

//监听
const keyVal = ref(props.keys)
const isDisabled = ref(props.disabled)

//监听
watch(() => [
    props.keys,
    props.disabled
], ([keys, disabled]) => {
    keyVal.value = keys;
    isDisabled.value = disabled;
})

//事件
const emit = defineEmits(['change'])
const switchClick = (item) => {
    if (!isDisabled.value) {
        if (item?.key == keyVal.value) return;
        emit('change', item)
    }
}
</script>

<style lang="scss" scoped>
.hc-new-switch {
    isolation: isolate;
    position: relative;
    overflow: hidden;
    height: 40px;
    font-size: 14px;
    background: #f1f5f8;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15) inset, -4px -4px 8px 0 #ffffff inset;
    .switch-bg {
        color: #838791;
        padding: 0 14px;
        border-radius: 4px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        &.dots {
            color: #ffffff;
            background: linear-gradient(90deg,var(--el-color-primary-light-5), var(--el-color-primary) 100%);
            box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -3px -2px 8px 0 #ffffff;
            transition: .1s;
        }
        &:not(.dots) {
            cursor: pointer;
        }
    }
    &.round {
        border-radius: 40px;
        .switch-bg {
            border-radius: 80px;
        }
    }
    &.size-default {
        height: 32px;
        font-size: 13px;
        .switch-bg {
            height: 25px;
        }
    }
    &.disabled {
        .switch-bg {
            opacity: 0.5;
            cursor: no-drop;
        }
    }
}
</style>
