<template>
    <view class="treetable">
        <view style="display:table-caption !important;text-align:center !important;" >
            <view class="kuang" @click.native.stop="selectedClick(treedata)">{{treedata.name}}{{treedata.userCount}}人</view>
            <br/>
 

            <span style="border-left:1px solid;height:10upx;"></span>
        </view>
        <view v-if="treedata.children && treedata.children.length > 1">
            <view v-for=" index of treedata.children.length" :key="index">
                <view class
 
="treetable">
                    <view>
                        <view v-for="index2 of 2" :key="index2">
                            <view v-if="((index+1)*2-(index2+1)%2 -1) == 0">
                                <text style="visibility: hidden;">
                                    1
                                
 
</text>
                            </view>
                            <!-- [注意]index+1  是v-for 的 of  in與Vue和Uniapp是不是一樣？遍歷下標是從0還是1開始 -->
                            <view v-else-if="((index+1)*2-(index2+1)%2 -1) == 1" :style="lefttoplinestyle">
                                <text style="visibility: hidden;">
                                    1
                                </text>
                            </view>
                            <view v-else-if="((index+1)*2-(index2+1)%2 -1) == treedata.children.length * 2 - 2" :style="righttoplinestyle">
                                <text style="visibility: hidden;">
                                    1
                                </text>
                            </view>
                            <view v-else-if="((index+1)*2-(index2+1)%2 -1) == treedata.children.length * 2 - 1">
                                <text style="visibility: hidden;">
                                    1
                                </text>
                            </view>
                            <view v-else-if="((index+1)*2-(index2+1)%2 -1) % 2 == 1" :style="lefttoplinestyle">
                                <text style="visibility: hidden;">
                                    1
                                </text>
                            </view>
                            <view v-else-if="((index+1)*2-(index2+1)%2 -1) % 2 == 0" :style="toplinestyle">
                                <text style="visibility: hidden;">
                                    1
                                </text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view>
            <view v-for=" (children,index) in treedata.children" :key="index" style="vertical-align:top;text-align: center;">
                <view v-if="!children.children || children.children.length == 0" class="kuang" @click.native.stop="selectedClick(children)">
                    {{children.name}}{{children.userCount}}人
                </view>
                <borgTree ref="btree" v-else :treedata="children" @clickNode="selectedClick"></borgTree>
            </view>

        </view>
    </view>
</template>
<script>
    import borgTree from '@/components/gld-tree/borg-tree-div.vue';
    export default {
        components: {
            borgTree
        },
        name: "grp",
        props: {
            treedata: Object,
        },
        data() {
            return {
                lefttoplinestyle: "border-top:1px solid;border-left:1px solid;",
                toplinestyle: "border-top:1px solid;",
                righttoplinestyle: "border-top:1px solid;border-right:1px solid;"
            }
        },
        created() {

        },
        methods: {
            selectedClick(node) {
                this.$emit("clickNode", node)
            }
        }
    };
</script>
<style>
    .kuang {
        border-radius: 5px !important;
        word-wrap: break-word;
        display: inline-block !important;
        padding: 10upx !important;
        font-size: 28upx !important;
        border: 1px solid #333333 !important;
        margin: 0upx 8upx !important;
        width: 1em;
        /* min-width: 200upx !important; */
    }

    .treetable {
        width: 100% ;
        display: table;
    }

    .treetable > view {
        display: table-row ;

    }

    .treetable > view > view {
        display: table-cell ;
        vertical-align: middle ;
        text-align: center ;
    }
</style>

<!-- 使用方式 
引入
import borgTree from "@/assets/org-tree/borg-tree";
註冊
export default {
  components: {borgTree}
}
使用
<borgTree :treedata="mytree" @clickNode="clickNode"/>

資料結構
mytree:{
        name:"專案部",
        children:[
          {
            name:"經理1",
            children:[
              { name:"組11212"},
              { name:"組1123"},
              { name:"組1231"}
            ]
          }
        ]
    }

-->