<template>
  <div class="treePageTemplate" :style="{width: currentConfig.width}">
        <!-- 左侧树结构 -->
        <div class="tree-page" :style="{padding: currentConfig.padding}">
            <!-- <div class="tree-title" v-show="currentConfig.title.text || currentConfig.title.icon">
                <span v-if="currentConfig.title.text">{{ currentConfig.title.text}}</span>
                <i v-if="currentConfig.title.icon" :class="currentConfig.title.icon"></i>
            </div> -->
            <mu-tree :config="currentConfig" v-model="treeData" :extension="extensionTree"></mu-tree>
        </div>
        <!-- 左侧树结构 -->
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator';

interface TreeConfig {
    name?: string
    width?: string
    padding?: string
    nodeKey: string
    sourceConfigs?: any
    icon?: string
    accordion?: boolean,
    defaultExpandAll?: boolean
    defaultExpandedKeys?: any
    highlightCurrent?: boolean
    currentNodeKey?: string | number,
    props?: any
    showCheckbox?: boolean
    expandOnClickNode?: boolean
    checkOnClickNode?: boolean,
    defaultCheckedkeys?: any
    checkChange?: Function
    operation?: any,
    lazy?: boolean,
    loadNode?: Function,
    filterable?: boolean,
    filterPlaceholder?: string,
    draggable?: boolean,
    allowDrop?: Function,
    allowDrag?: Function,
    nodeDragStart?: Function,
    nodeDragEnter?: Function,
    nodeDragLeave?: Function,
    nodeDragOver?: Function,
    nodeDragEnd?: Function,
    nodeDrop?: Function,
    nodeExpand?: Function,
    nodeCollapse?: Function,
    isCurrentChange?: Function,
    nodeClick?: Function,
    currentChange?: Function,
    getOperation?: Function,
    getContextMenu?: Function    
}

@Component({
    name: 'muTreePageTemplate'
})

export default class extends Vue { 
    @Prop({ default: () => [] }) private treeData: any;
    @Prop({ default: () => {} }) private treeConfig!: TreeConfig;
    private handleSource: any = undefined;
    private handleEdit: any = undefined;
    private defaultConfig: any = {
        width: "200px"
    };

    // 合并默认数据
    get currentConfig() {
      const result = this.treeConfig;
      Object.keys(this.defaultConfig).forEach((key: string) => {
        if (this.treeConfig[key] === undefined) result[key] = this.defaultConfig[key];
      });
      return result;
    }


    extensionTree(tree: any, value: any) {
        this.handleSource = value.onHandleData;
        this.handleEdit = value.onShowEdit;
    }
}
</script>

<style lang="scss">
    .treePageTemplate {
        .tree-page{
            .tree-title {
                margin-bottom: 20px;
                overflow: hidden;
                span {
                    font-size: 16px;
                    color: #333;
                    float: left;
                }
                i {
                    float: right;
                    font-size: 16px;
                    color: #1989fa;
                }
            }          
        }
        .treeFilter {
            // .el-input__prefix, .el-input__suffix {
            //     top: 9px;
            // }
        }
    }
</style>