<template>
    <el-select :modelValue="modelValue" :class="{'op0':loading}" class="select" clearable="clearable" :placeholder="placeholder" width="100" @change="onChange">
        <el-option v-for="option in list" :key="option[valueKey]" :label="option[labelKey]" :value="option[valueKey]"></el-option>
    </el-select>
</template>

<script>
    export default {
        name: "st-data-select",
        emits:["load","update:modelValue","change"],
        props:{
            modelValue : [String,Number],
            placeholder : {
                type : String ,
                default : "全部"
            } ,
            labelKey : String ,
            valueKey : String ,
            params:{
                type : Object ,
                default(){
                    return {} ;
                }
            },
            api : {
                type : Function ,
                required : true
            }
        },
        data() {
            return {
                list : [] ,
                loading : true
            }
        },
        async created() {
            this.list = await this.api(this.params);
            this.loading = false ;
            this.$emit("load" , this.list ) ;
        },
        methods: {
            onChange(value){
                this.$emit("change" , value );
                this.$emit("update:modelValue" , value );
            }
        }
    }
</script>