<template>
    <table class="node-table" style="border-collapse:collapse;">
        <!-- 母节点层，母节点在一层的中心 -->
        <tr>
            <td class="layer-1" :colspan="data.children?data.children.length * 2:1">
                <div class="card" @click="onClick(data)" :class="currentClass(data)">
                    <div class="card-header">
                        <DefaultTitle :render="titleRender" :data="data"></DefaultTitle>
                    </div>
                    <div class="card-content">
                        <DefaultContent :render="contentRender" :data="data"></DefaultContent>
                    </div>
                    <div class="card-footer" v-if="data.children && data.children.length > 1">
                        <div class="btn" @click.stop="show=!show">
                            <Icon :type="show?'ios-arrow-up':'ios-arrow-down'" size="18" />
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <!-- 第一纵线层，划分成两个平分单元格 -->
        <tr v-if="data.children.length > 0" v-show="show">
            <td class="layer-2" :colspan="data.children.length * 2">
                <div style="width:calc(50% - 1px);height:16px;border-right:1px solid black"></div>
            </td>
        </tr>
        <!-- 第二纵线层，按子节点 * 2划分 -->
        <tr v-if="data.children.length > 0" v-show="show">
            <td class="layer-2" :colspan="data.children.length * 2" v-if="data.children.length === 1">
                <div style="width:calc(50% - 1px);height:10px;border-right:1px solid black"></div>
            </td>
            <template v-for="(childNode,index) in data.children" v-if="data.children.length > 1">
                <td class="layer-3" :style="childNodeLineStyle(childNode,0)"></td>
                <td class="layer-3" :style="childNodeLineStyle(childNode,1)"></td>
            </template>

        </tr>
        <!-- 子节点层，按子节点划分-->
        <tr v-if="data.children.length > 0" v-show="show">
            <td colspan="2" v-for="(childNode,index) in data.children" :key="index" valign="top">
                <Node :multiple="multiple" :data="childNode" :current="current" @on-click="onClick" :titleRender="titleRender" :contentRender="contentRender"></Node>
            </td>
        </tr>
    </table>
</template>
<script>
import DefaultTitle from "./default.title";
import DefaultContent from "./default.content";
export default {
    name: "org-chart-node",
    components: { DefaultTitle, DefaultContent },
    data() {
        return {
            show: true
        };
    },
    props: {
        multiple: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        data: {
            type: Object,
            default: () => {
                return {};
            }
        },
        current: {},
        titleRender: {
            type: Function
        },
        contentRender: {
            type: Function
        }
    },
    beforeCreate: function() {
        //让组件能够调用自身
        let Node = require("./node.vue");
        this.$options.components.Node = Node.default;
    },
    methods: {
        //连线的样式
        childNodeLineStyle(childNode, index) {
            let style = {};
            if (index === 0) {
                style["border-right"] = "1px solid black";
            }
            let childIndex = this.data.children.indexOf(childNode);
            if (this.data.children.length === 1) {
            } else if (childIndex === 0 && index === 1) {
                style["border-top"] = "1px solid black";
            } else if (
                childIndex === this.data.children.length - 1 &&
                index === 0
            ) {
                style["border-top"] = "1px solid black";
            } else if (
                childIndex !== 0 &&
                childIndex !== this.data.children.length - 1
            ) {
                style["border-top"] = "1px solid black";
            }
            return style;
        },
        onClick(data) {
            this.$emit("on-click", data);
        },
        currentClass(data) {
            if (this.multiple ) {
                if (this.current && this.current.indexOf(data) > -1) {
                    return "active";
                }
            } else {
                if (data === this.current) {
                    return "active";
                }
            }
        }
    }
};
</script>
<style lang="less" scoped>
.node-table {
    td {
        text-align: center;
        padding: 0 16px;
    }
    .layer-3 {
        padding: 8px;
    }
}
.card {
    @cardBorderRadius: 8px;
    display: inline-block;
    position: relative;
    // width: 200px;
    // height: 320px;
    margin-bottom: -5px; //为什么需要加这个我也搞不清楚，强行调整的
    background: white;
    border: 1px solid grey;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    &:hover,
    &.active {
        border-color: #2d8cf0;
        transform-origin: center center;
        transform: scale(1.2);
    }
    &-header {
        border-top-left-radius: @cardBorderRadius;
        border-top-right-radius: @cardBorderRadius;
        text-align: center;
        //padding: 8px;
    }
    &-content {
        display: flex;
        justify-content: center;
        align-items: center;
        //padding: 8px;
    }
    &-footer {
        padding: 4px;
        .btn {
            border-radius: 4px;
            border: 1px solid white;
            &:hover {
                border: 1px outset lightgray;
            }
        }
    }
}
</style>

