<template>
    <picker :range="options" range-key="name" @change="selectChange" :disabled="false">
        <slot></slot>
    </picker>
</template>
<script setup lang="ts">
import { ref, watch, computed } from 'vue';

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    modelValue: {
        type: Array,
        default: () => [],
    },

    title: {
        type: String,
        default: '系统提示',
    },
    showTitle: {
        type: Boolean,
        default: true,
    },
    tabs: {
        type: Array,
        default: () => [],
    },
});
const options = computed(() => {
    return props.tabs.map((item: any) => {
        return {
            name: item.label,
            value: item.value,
        };
    });
});
const showModel = ref(props.show);
const emit = defineEmits(['close', 'confirm', 'open', 'update:show', 'update:modelValue', 'change']);
const checkeds = ref({});
const close = () => {
    showModel.value = false;
    // 如果有初始值，恢复初始值
    checkeds.value = { ...initialCheckeds.value };
    emit('update:show', false);
    emit('close');
};

// 未选择之前的
const initialCheckeds = ref({});
const selectChange = (item: any) => {
    const selectedValues = options.value[item.detail.value].value;
    emit('update:modelValue', selectedValues);
    emit('change', selectedValues);
    close();
};
watch(
    () => props.modelValue,
    (newVal) => {},
    { immediate: true }
);
</script>
<style lang="scss" scoped></style>
