<template>
    <el-cascader :options="list" :props="{ checkStrictly , value: valueKey , label : labelKey , children : this.childrenKey }" clearable="clearable" @change="onChange"></el-cascader>
</template>

<script>
    export default {
        name: "st-data-cascader",
        props:{
            api : {
                type : Function ,
                required : true
            },
            params:{
                type : Object ,
                default(){
                    return {} ;
                }
            },
            checkStrictly:{
                type : Boolean ,
                default :true
            },
            valueKey : {
                type : String ,
                default : "id"
            },
            labelKey : {
                type : String ,
                default : "label"
            },
            childrenKey : {
                type : String ,
                default : "children"
            },
            value : [Array]
        },
        data() {
            return {
                list : [] ,
                props: {
                    checkStrictly: true,
                    value: 'id',
                }
            }
        },
        async created() {
            if (this.api){
                this.list = await this.api(this.params);
            }
        },
        methods: {
            onChange(value){
                this.$emit("change" , value);
                this.$emit("input" , value);
            }
        }
    }
</script>