<template>
    <div class="go_tab_ctl" style="width: 100%;height:100%;">
        <div ref="tool_bar">
            <Row
                style="background-color: #F5F7F8;height:40px;line-height: 30px;padding-right: 15px;padding-top: 5px;"
            >
                <!--              resize按钮-->
                <div
                    class="pull-right resizeIcon icon_item"
                    @click="sizeChangeBtn('resize')"
                >
                    <i style="font-size: 20px;" class="icon goingicon go-resize"></i>
                </div>
                <!--              缩小按钮-->
                <div
                    class="pull-right smallIcon icon_item"
                    @click="sizeChangeBtn('small')"
                >
                    <i style="font-size: 20px;" class="icon goingicon go-suoxiao"></i>
                </div>
                <!--              大小label-->
                <div class="pull-right sizeLabel label_item">{{ sizeLabel }}</div>
                <!--              放大按钮-->
                <div
                    class="pull-right bigIcon icon_item"
                    @click="sizeChangeBtn('big')"
                >
                    <i style="font-size: 20px;" class="icon goingicon go-fangda1"></i>
                </div>
                <!--              expandItem-->
                <div
                    class="pull-right expandLabel"
                    style="margin-right: 6px;font-size: 13px;"
                >
                    鼠标可拖动查看架构图
                </div>
                <!--              层级显示drop-->
                <div class="pull-right showLevel" style="margin-right: 6px;">
                    <go-drop
                        v-model="showLevel"
                        @selDrop="selDrop"
                        :clearValue="false"
                        :search="false"
                        width="70"
                        :item="showLevelItem"
                    ></go-drop>
                </div>
            </Row>
        </div>
        <div style="overflow: auto;width: 100%;height: calc(100% - 40px);position: relative;">
            <div id="treeContainer" style="width: 100%;height: 100%;position: relative;background-color: #FFF">

            </div>
        </div>

    </div>
</template>

<script>
    import GoingSvgTree from '../../../jsCom/comCtl/goingSvgTree';
    import D3TreeMixins from '../../ctlMixins/D3TreeMixins';

    export default {
        name: "accountTreeSvg",
        mixins:[D3TreeMixins],
        data: function() {
            return {

            };
        },
        props: {
            data:{default:()=>{
                return null;
            },type:Object}
        },
        computed: {
            contentStyle() {

            }
        },
        methods: {
            initTreeCtl(){
                //如果对象已经存在 则需要销毁以前的对象 重新渲染
                if(this.svgCtlObj!=null){
                    this.svgCtlObj.destruction();
                }
                let  width = $("#treeContainer").width();
                let  height = $("#treeContainer").height();
                let d3=window.d3;
                this.svgCtlObj=new GoingSvgTree(d3,{containerId:'treeContainer',width,height,nodeClick:this.nodeClick,changeSizeLabel:this.changeSizeLabel,showLevel:(this.showLevel-1)},this.data);

            },
        },
        mounted() {

        },
        watch: {
            //如果数据发生变化 进行渲染
            data(newVal){
                if(typeof(newVal)==="object"){
                    this._initTreeCtlTimer();
                }
            }
        },
        components: {},
        beforeDestroy(){

        }
    };
</script>
<style>

</style>
