<template>
    <Node :multiple="multiple" :current="current" :data="data" @on-click="onClick" :titleRender="titleRender" :contentRender="contentRender"></Node>
</template>
<script>
/**
 * 组织结构图表
 * 纵向，树形
 * 高宽随内容变化
 * 属性：
 * data：数据 （ TreeNode:{title:string,content:string,chidldren:TreeNode[],...}）
 * multiple，current,v-model($emit(input),value):
 *     multiple:多选
 *     currnet:当前选中的数据。
 *     v-model可以设置默认值,如果不设置v-model这几个属性并没有用处;
 * titleRender：自由设置头部，必须为返回一个createElement函数实例，入参：h（createElement函数），data（节点数据）；事件注意有可能会需要阻止冒泡。
 * contentRender：同上，设置内容的
 * 点击事件onClick会触发两个事件，一个是设置v-model的input事件，一个是on-click事件
 */
import Node from "./node";
export default {
    name: "OrganizationChart",
    components: { Node },
    data() {
        return {
            current: null
        };
    },
    props: {
        value: {
            default: () => {
                return null;
            }
        },
        multiple: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        data: {
            type: Object,
            default: () => {
                return {};
            }
        },
        titleRender: {
            type: Function,
            default: (h, data) => {
                return h(
                    "h3",
                    {
                        class: {
                            default: true
                        }
                    },
                    data.title
                );
            }
        },
        contentRender: {
            type: Function,
            default: (h, data) => {
                return h(
                    "p",
                    {
                        class: {
                            default: true
                        }
                    },
                    data.content
                );
            }
        }
    },
    watch: {
        value() {
            this.current = this.value;
        }
    },
    mounted() {
        this.current = this.value;
    },
    methods: {
        //点击事件
        onClick(data) {
            if (this.multiple) {
                let index = this.value.indexOf(data);
                let tmp = [].concat(this.value);
                if (index > -1) {
                    tmp.splice(index, 1);
                } else {
                    tmp.push(data);
                }
                this.$emit("input", tmp);
            } else {
                this.$emit("input", data);
            }
            this.$emit("on-click", data);
        }
    }
};
</script>
