<template>
    <el-select ref="selectTree" :title="title" v-model="myValue" :clearable="clearable" :disabled="disabled"
               @clear="clear"  :value-key="treeProps.value" :multiple="showCheckbox" @visible-change="visibleChange"
               :placeholder="placeholder" @remove-tag="removeTag" :size="size" :popperAppendToBody="popperAppendToBody">
        <el-option v-for="(item,index) in options" v-show="index==0" disabled  style="padding:0px 5px" :value="item[treeProps.value]"
                   :key="item[treeProps.value]" :label="item[treeProps.label]">
            <el-input v-if="filterable&&index==0" :size="size" prefix-icon="el-icon-search"
                      clearable :placeholder="$t('tree.filter_text')" v-model="filterText"></el-input>
        </el-option>
        <el-tree ref="tree" :data="treeData" :node-key="treeProps.value" :show-checkbox="showCheckbox"
                 :checkStrictly="checkStrictly" :default-checked-keys="defaultCheckedKeys"
                 :highlight-current="highlightCurrent" :filter-node-method="filterNode"
                 @check-change="checkChange" :id="id"
                 :props="treeProps"  @node-click="handleNodeClick" :current-node-key="currentNodeKey"
                 class="filter-tree"  :style="{width:'100%',height: height}"
                 :expand-on-click-node="expandOnClickNode" :default-expand-all="defaultExpandAll" />
    </el-select>
</template>
<script>
    export default {
        name:"SelectTree",
        props:{
            value:{
                required: true
            },options:{
                type:Array,
                default(){
                    return [];
                }
            },size:{
                type:String,
                default:"mini"
            },id:{
                type:String,
                default:""
            },placeholder:{
                type:String,
                default:""
            },title:{
                type:String,
                default:""
            },autoScrollToView:{//是否仅获取叶子的选中
                type:Boolean,
                default:true
            },leafOnly:{//是否仅获取叶子的选中
                type:Boolean,
                default:true
            },checkStrictly:{//是否非严格父子级联模式
                type:Boolean,
                default:true
            },popperAppendToBody:{
                type:Boolean,
                default:false
            },filterable:{
                type:Boolean,
                default:true
            },disabled:{
                type:Boolean,
                default:false
            },highlightCurrent:{
                type:Boolean,
                default:true
            },showCheckbox:{
                type:Boolean,
                default:false
            },expandOnClickNode:{
                type:Boolean,
                default:false
            },defaultExpandAll:{
                type:Boolean,
                default:true
            },clearable:{
                type:Boolean,
                default:true
            },props:{
                type:Object,
                default(){
                    return {children: 'children',label: 'name',value:"id"};
                }
            },height:{
                type:String,
                default:"180px"
            },idIsOnlyNumber:{
                type:Boolean,
                default:true
            }
        },data() {
            return {
                filterText:"",
                defaultCheckedKeys:[],
                currentNodeKey:"",
                myValue: "",
                treeData:[],
                treeProps:this.getProps(this.props)
            }
        },watch:{
            props(val){
                this.treeProps=this.getProps(val);
            },filterText(val) {
                this.$refs.tree.filter(val)
            },value: {
                handler(val) {
                    if (this.showCheckbox) {//多选
                        if(typeof val=="string"){
                            val=[val];
                        }
                        this.myValue=val||[];
                        this.defaultCheckedKeys=this.myValue;
                    } else {
                        this.myValue=val;
                        this.currentNodeKey=this.myValue;
                    }
                },immediate:true
            },myValue: {
                handler(val) {
                    this.$emit('input', val);
                }
            },options:{
                handler(val) {
                    this.treeData = this.$core.transform2TreeData(val, 0);
                }//,immediate:true
            }
        },methods: {
            getProps(op){
                return Object.assign({children: 'children',label: 'name',value:"id"},op);
            },filterNode(value, data) {
                if (!value) return true
                return data[this.treeProps.label].indexOf(value) !== -1
            },handleNodeClick(node){
                if(!this.showCheckbox) {
                    if(this.leafOnly&&node.children&&node.children.length>0)
                        return;
                    this.myValue=node[this.treeProps.value];
                    this.$refs.selectTree.blur();
                }
            },checkChange(){
                let selectedArray = this.$refs.tree.getCheckedNodes(this.leafOnly);
                let selectValueArray = selectedArray.filter((node) => {
                    if (this.idIsOnlyNumber) {
                        if(typeof this.$core.adapterData(node[this.treeProps.value])=="number")
                            return true;
                    } else {
                        return true;
                    }
                }).map(item=>item[this.treeProps.value]);
                //this.myValue=selectValueArray;
            },clear(){
                this.myValue=this.showCheckbox?[]:null;
            },removeTag(e){
                this.myValue=this.myValue.filter((item)=>item!=e);
            },visibleChange(e){
                if(this.autoScrollToView&&this.treeData.length>0) {
                    let that = this;
                    setTimeout(() => {
                        let dom = that.$refs.tree.$el.getElementsByClassName("is-current")[0];//找到第一个选中的元素进行定位
                        if (dom)
                            dom.scrollIntoView({behavior: 'instant', block: 'nearest', inline: "start"});
                    }, 200)
                }
            }
        }
    }
</script>
<style>
    .filter-tree{
        height: calc(100% - 38px);
    }
    .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{
        display: none;
    }
</style>
