<template>
	<div class="w100p">
        <el-tree-select v-if="renderTree && list.length > 0"
            :data="list"
            :model-value="value"
            :show-all-levels="showAllLevels"
            :node-key="valueKey"
            :render-after-expand="true"
            :default-expand-all="defaultExpandAll"
            :check-on-click-node="true"
            :check-strictly="checkStrictly"
            :highlight-current="true"
            :props="propsSync"
            @change="onChange"
            :placeholder="placeholder"
            :disabled="disabled"
            filterable
            clearable></el-tree-select>
		<el-select v-else :placeholder="placeholder"></el-select>
    </div>
</template>

<script>
    export default {
		name: "st-tree-select",
		emits:["change","update:modelValue"],
		props:{
			modelValue : [String,Number],
			list:{
				type : Array ,
				default(){
					return [] ;
				}
			},
			labelKey:{
				type : String ,
				default(){
					return "label" ;
				}
			},
			valueKey:{
				type : String ,
				default(){
					return "value" ;
				}
			},
			childrenKey:{
				type : String ,
				default(){
					return "children" ;
				}
			},
            expandTrigger:{
                type : String ,
                default(){
                    return "hover" ;
                }
            },
			defaultExpandAll:{
				type : Boolean,
				default : true
			},
            showAllLevels:{
                type : Boolean,
                default : true
            },
            checkStrictly:{
			    type : Boolean,
                default : true
            },
			disabled: Boolean,
			placeholder : {
				type : String ,
				default : "全部"
			}
		},
		data() {
			return {
				value : this.modelValue ,
				renderTree : false
			}
		},
		computed:{
			propsSync(){
				return {
				    value: this.valueKey,
                    label: this.labelKey ,
                    children : this.childrenKey ,
                    expandTrigger : this.expandTrigger ,
                    checkStrictly: this.checkStrictly
				};
			}
		},
		watch:{
			modelValue:{
				handler(){
					this.value = this.modelValue;
				},
				immediate :true
			}
		},
	    mounted() {
			this.$nextTick(()=>{
				setTimeout(()=>{
					this.renderTree = true ;
				},500);
			})
		},
		methods: {

			onChange(value){
				this.value = value ;
				this.$emit("update:modelValue" , value);
				this.$emit("change" , {value});
			}
		}
	}
</script>