<template>
    <template v-if="type === 'select'">
        <el-select :placeholder="placeholder" v-model="optionValues" @change="onchange" :clearable="clearable">
            <el-option v-for="item in dictValue" :value="item.value" :label="item.label"></el-option>
        </el-select>
    </template>
    <template v-else-if="type === 'checkbox'">
        <el-checkbox-group v-model="optionValues">
            <el-checkbox v-for="item in dictValue" :value="item.value" :label="item.label" :disabled="item.value == disabledItem" />
        </el-checkbox-group>
    </template>
    <template v-else-if="type === 'radio'">
        <el-radio-group v-model="optionValues">
            <el-radio v-for="item in dictValue" :value="item.value"  :label="item.label" ></el-radio>
        </el-radio-group>
    </template>
    <template v-else-if="type === 'custom'">
        <slot :data="dictValue"></slot>
    </template>
</template>

<script setup name="SelectUser" lang="ts">
import { propTypes } from '@/utils/propTypes';
import {storeToRefs} from "pinia";
import {useDictStore} from "@/store/modules/dict";
const emits = defineEmits(['update:value', 'onchange'])

const optionValues = defineModel<string|number| Array<string | number>>({required: true })



const useDict = useDictStore()
const { dict } = storeToRefs(useDict)


const defaultValue = ref()

const props = defineProps({

    placeholder: {
        type: String,
        default: '请选择'
    },
    dictCode: {
        type: String,
        default: ''
    },
    type: {
        type: String,
        default: 'select',
    },
    clearable: {
        type: Boolean,
        default: true
    },
    selectedFirst: {
        type: Boolean,
        default: false
    },
    disabledItem: {
        type: String
    }
})
// watch(() => props.value, (val) => {
//     defaultValue.value = val
// })

const dictValue = computed(() => {
    let datas = useDict.getDict(props.dictCode)
    if(props.selectedFirst && datas) {
        let values = props.type == 'checkbox' ? [datas[0]?.value] : datas[0]?.value
        optionValues.value = values
    }
    return datas
})


const onchange = (val: string) => {
    let dict = dictValue.value?.find((item) => item.value == val)
    emits('onchange', dict)
}


onMounted(async () => {
    if(props.dictCode) {
        let dict = useDict.getDict(props.dictCode)
    }
})
</script>

<style scoped>

</style>
