<!--
 * @Author: micky
 * @Date: 2024-08-14 10:33:59
 * @LastEditors: micky
 * @LastEditTime: 2024-10-06 11:25:15
 * @FilePath: \chargingpile-uniapp\src\components\widgets\dict-select\dict-select.vue
-->
<template>
    <view class="flex items-center gap-[18rpx]">
        <view
            v-for="item in options"
            :key="item.value"
            class="dict-item text-base"
            :class="[active == item.value ? 'active' : '', disabled ? 'opacity-70' : '']"
            @click="handleChange(item.value)"
        >
            {{ item.label }}
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
interface Item {
    label: string
    value: string | number
}

const props = defineProps({
    options: {
        type: Array<Item>,
        default: []
    },
    modelValue: {
        type: [String, Number]
    },
    disabled: {
        type: Boolean,
        default: false
    }
})
const emits = defineEmits(['update:modelValue', 'change'])

const active = ref<number | string>(props.options[0]?.value || '')

const handleChange = (val: string | number) => {
    if (props.disabled) return
    active.value = val
    emits('update:modelValue', val)
    emits('change', val)
}

watch(
    () => props.modelValue,
    val => {
        val && (active.value = val)
    }
)
</script>
<style scoped lang="scss">
.dict-item {
    @apply py-1 px-[18rpx] border border-[#DFDFDF] rounded-md;
    &.active {
        @apply border-primary text-primary;
    }
}
</style>
