<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>机构管理</title>
	<meta name="decorator" content="default"/>
	<%@include file="/webpage/include/treeview.jsp" %>
	<style type="text/css">
		.ztree {overflow:auto;margin:0;_margin-top:10px;padding:10px 0 0 10px;}
	</style>
	<script type="text/javascript">
		function refresh(){//刷新
			
			window.location="${ctx}/sys/office/";
		}
	</script>
	<style>
		body{
			height:100%;
		}

		.check-container{

		}
		.check-container,
		.check-container .left-panel-container,
		.check-container .middle-panel,
		.check-container .right-panel-container,
		.check-container .left-panel-container .left-panel,
		.check-container .right-panel-container .right-panel{
			height:100%;
		}

		.check-container .left-panel-container .left-panel{
			width:250px;
			border-right: solid 2px #f1f1f1;
		}
		.check-container .left-panel-container .left-panel.closed{
			display: none;
		}
		.left-close{
			text-align: center;
			height:40px;
			line-height: 40px;
			width:35px;
			position: absolute;
			top:8px;
			left:215px;
		}
		.left-close.closed{
			left:0px;
		}
		.left-panel ul{
			padding: 8px 8px 0 8px;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		.left-panel ul li{

		}
		.left-panel ul li a{
			height:40px;
			line-height: 40px;
			padding-top: 0px;
			padding-bottom: 0px;
		}
		.check-container a.right-close:hover,
		.check-container a.left-close:hover{
			color: #0c0c0c;
		}

		.check-container .right-panel-container .right-panel{
			width:400px;
			border-left: solid 2px #f1f1f1;
		}
		.check-container .right-panel-container .right-panel.closed{
			display: none;
		}
		.right-close{
			text-align: center;
			height:40px;
			line-height: 40px;
			width:35px;
			position: absolute;
			top:8px;
			right:0px;
		}
		.right-close.closed{

		}
		.right-panel .title{
			height:40px;
			line-height: 40px;
			padding-top: 8px;
			padding-left: 8px;
			border-bottom: solid 1px #333333;
		}

		.check-tabs{
			margin-top: 8px;
			height:40px;
			line-height: 40px;
			border-bottom: solid 1px #333333;
		}
		.check-tabs .content-title{
			margin-left: 35px;
			float:left;
		}

		.ztreeBox {
			height:calc(100% - 50px - 34px);
			width:250px;
		}

		.ztreeContainer{
			max-height: 100%;
		}
		.ztreeBox .ztreeContainer .ztree{
			min-width: calc( 250px - 34px);
		}


		.check-tabs .tab-container{
			position: relative;
			width:calc(100% - 105px);
			float: right;
			overflow: hidden;
		}
		.check-tabs .tab-container .roll-nav{
			height:40px;
			line-height: 40px;
			width:40px;
			color: #999;
			text-align: center;
			position: absolute;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		.check-tabs .tab-container .roll-left{
			left: 0px;
		}
		.check-tabs .tab-container .roll-right{
			right: 0px;
			top: 0px;
		}
		.check-page-tabs-content{
			float: left;
		}
		.check-contents{
			height:calc(100% - 52px);
			width:100%;
		}
	</style>

</head>
<body style="height:100%;">
	<div class="check-container">
		<div class="left-panel-container fl">
			<div class="left-panel">
				<ul class="nav nav-tabs">
					<li class="active"><a href="javascript:void(0)">项目报告</a></li>
					<li><a href="/jeeplus/a/sys/officetest/list2">项目资料</a></li>
				</ul>
				<div class="ztreeBox">
					<div class="ztreeContainer">
						<div id="ztree" class="ztree leftBox-content">

						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="middle-panel fl">
			<div class="check-tabs">
					<span class="content-title">相关内容：</span>
			<div class="tab-container">
				<button class="roll-nav roll-left content_tabLeft"><i class="fa fa-backward"></i>
				</button>
				<nav class="page-tabs check_menuTabs">
					<div class="check-page-tabs-content">
						<%--<a href="javascript:;" class="active check_menuTab" data-id="${ctx}/home">首页</a>--%>
					</div>
				</nav>
				<button class="roll-nav roll-right content_tabRight"><i class="fa fa-forward"></i>
				</button>
			</div>
			</div>
			<div id="check-contents" class="check-contents">
			</div>
		</div>
		<div class="right-panel-container fr">
			<div class="right-panel">
				<div class="title">质量复核内容</div>
				<div style="margin-top: 16px;">
					<div class="layui-item layui-col-xs12 form-table-container" >
						<table id="contentTable" class="table table-bordered table-condensed can-edit no-bottom-margin">
							<thead>
							<tr>
								<th width="50px">序号</th>
								<th width="300px">符合内容及评分标准</th>
								<th width="50px">操作</th>
							</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
		<a class="left-close"><i class="glyphicon glyphicon-chevron-left"></i></a>
		<a class="right-close"><i class="glyphicon glyphicon-chevron-right"></i></a>
	</div>
	<script>
    $(function () {
   	 	$('.check_menuTabs').on('click', '.check_menuTab', activeCheckTab);
        $('.check_menuTabs').on('click', '.check_menuTab i', closeCheckTab);
        // 左移按扭
        $('.content_tabLeft').on('click', scrollCheckTabLeft);

        // 右移按扭
        $('.content_tabRight').on('click', scrollCheckTabRight);
    });
    function calCheckSumWidth(elements) {
        var width = 0;
        $(elements).each(function () {
            width += $(this).outerWidth(true);
        });
        return width;
    }
    function activeCheckTab() {
        if (!$(this).hasClass('active')) {
            var currentId = $(this).data('id');
            // 显示tab对应的内容区
            $('.check-contents .check_iframe').each(function () {
                if ($(this).data('id') == currentId) {
                    $(this).show().siblings('.check_iframe').hide();
                    return false;
                }
            });

            $(this).addClass('active').siblings('.check_menuTab').removeClass('active');
            scrollToCheckTab(this);
        }
    }
    //滚动到指定选项卡
    function scrollToCheckTab(element) {
        var marginLeftVal = calCheckSumWidth($(element).prevAll()), marginRightVal = calCheckSumWidth($(element).nextAll());
        // 可视区域非tab宽度
        var tabOuterWidth = calCheckSumWidth($(".tab-container").children().not(".check_menuTabs"));
        //可视区域tab宽度
        var visibleWidth = $(".tab-container").outerWidth(true) - tabOuterWidth;
        //实际滚动宽度
        var scrollVal = 0;
        if ($(".check-page-tabs-content").outerWidth() < visibleWidth) {
            scrollVal = 0;
        } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
            if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
                scrollVal = marginLeftVal;
                var tabElement = element;
                while ((scrollVal - $(tabElement).outerWidth()) > ($(".check-page-tabs-content").outerWidth() - visibleWidth)) {
                    scrollVal -= $(tabElement).prev().outerWidth();
                    tabElement = $(tabElement).prev();
                }
            }
        } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
            scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
        }
        $('.check-page-tabs-content').animate({
            marginLeft: 0 - scrollVal + 'px'
        }, "fast");
    }
    //查看左侧隐藏的选项卡
    function scrollCheckTabLeft() {
        var marginLeftVal = Math.abs(parseInt($('.check-page-tabs-content').css('margin-left')));
        // 可视区域非tab宽度
        var tabOuterWidth = calCheckSumWidth($(".tab-container").children().not(".check_menuTabs"));
        //可视区域tab宽度
        var visibleWidth = $(".tab-container").outerWidth(true) - tabOuterWidth;
        //实际滚动宽度
        var scrollVal = 0;
        if ($(".check-page-tabs-content").width() < visibleWidth) {
            return false;
        } else {
            var tabElement = $(".check_menuTab:first");
            var offsetVal = 0;
            while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) {//找到离当前tab最近的元素
                offsetVal += $(tabElement).outerWidth(true);
                tabElement = $(tabElement).next();
            }
            offsetVal = 0;
            if (calCheckSumWidth($(tabElement).prevAll()) > visibleWidth) {
                while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
                    offsetVal += $(tabElement).outerWidth(true);
                    tabElement = $(tabElement).prev();
                }
                scrollVal = calCheckSumWidth($(tabElement).prevAll());
            }
        }
        $('.check-page-tabs-content').animate({
            marginLeft: 0 - scrollVal + 'px'
        }, "fast");
    }

    //查看右侧隐藏的选项卡
    function scrollCheckTabRight() {
        var marginLeftVal = Math.abs(parseInt($('.check-page-tabs-content').css('margin-left')));
        // 可视区域非tab宽度
        var tabOuterWidth = calCheckSumWidth($(".tab-container").children().not(".check_menuTabs"));
        //可视区域tab宽度
        var visibleWidth = $(".tab-container").outerWidth(true) - tabOuterWidth;
        //实际滚动宽度
        var scrollVal = 0;
        if ($(".check-page-tabs-content").width() < visibleWidth) {
            return false;
        } else {
            var tabElement = $(".check_menuTab:first");
            var offsetVal = 0;
            while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) {//找到离当前tab最近的元素
                offsetVal += $(tabElement).outerWidth(true);
                tabElement = $(tabElement).next();
            }
            offsetVal = 0;
            while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
                offsetVal += $(tabElement).outerWidth(true);
                tabElement = $(tabElement).next();
            }
            scrollVal = calCheckSumWidth($(tabElement).prevAll());
            if (scrollVal > 0) {
                $('.check-page-tabs-content').animate({
                    marginLeft: 0 - scrollVal + 'px'
                }, "fast");
            }
        }
    }
    function closeCheckTab() {
        var closeTabId = $(this).parents('.check_menuTab').data('id');
        var currentWidth = $(this).parents('.check_menuTab').width();

        // 当前元素处于活动状态
        if ($(this).parents('.check_menuTab').hasClass('active')) {

            // 当前元素后面有同辈元素，使后面的一个元素处于活动状态
            if ($(this).parents('.check_menuTab').next('.check_menuTab').size()) {

                var activeId = $(this).parents('.check_menuTab').next('.check_menuTab:eq(0)').data('id');
                $(this).parents('.check_menuTab').next('.check_menuTab:eq(0)').addClass('active');

                $('.check-contents .check_iframe').each(function () {
                    if ($(this).data('id') == activeId) {
                        $(this).show().siblings('.check_iframe').hide();
                        return false;
                    }
                });

                var marginLeftVal = parseInt($('.check-page-tabs-content').css('margin-left'));
                if (marginLeftVal < 0) {
                    $('.check-page-tabs-content').animate({
                        marginLeft: (marginLeftVal + currentWidth) + 'px'
                    }, "fast");
                }

                //  移除当前选项卡
                $(this).parents('.check_menuTab').remove();

                // 移除tab对应的内容区
                $('.check-contents .check_iframe').each(function () {
                    if ($(this).data('id') == closeTabId) {
                        $(this).remove();
                        return false;
                    }
                });

                changeLeftNavActive(activeId);
            }

            // 当前元素后面没有同辈元素，使当前元素的上一个元素处于活动状态
            if ($(this).parents('.check_menuTab').prev('.check_menuTab').size()) {
                var activeId = $(this).parents('.check_menuTab').prev('.check_menuTab:last').data('id');
                $(this).parents('.check_menuTab').prev('.check_menuTab:last').addClass('active');
                $('.check-contents .check_iframe').each(function () {
                    if ($(this).data('id') == activeId) {
                        $(this).show().siblings('.check_iframe').hide();
                        return false;
                    }
                });

                //  移除当前选项卡
                $(this).parents('.check_menuTab').remove();

                // 移除tab对应的内容区
                $('.check-contents .check_iframe').each(function () {
                    if ($(this).data('id') == closeTabId) {
                        $(this).remove();
                        return false;
                    }
                });
                changeLeftNavActive(activeId);
            }
        }
        // 当前元素不处于活动状态
        else {
            //  移除当前选项卡
            $(this).parents('.check_menuTab').remove();

            // 移除相应tab对应的内容区
            $('.check-contents .check_iframe').each(function () {
                if ($(this).data('id') == closeTabId) {
                    $(this).remove();
                    return false;
                }
            });
            scrollToCheckTab($('.check_menuTab.active'));
        }
        return false;
    }
	function openContent(url,name)
	{
		var flag = true;
        // 选项卡菜单已存在
        $('.check_menuTab').each(function () {
            if ($(this).data('id') == url) {
                if (!$(this).hasClass('active')) {
                    $(this).addClass('active').siblings('.check_menuTab').removeClass('active');
                    scrollToCheckTab(this);
                    // 显示tab对应的内容区
                    $('#check-contents .check_iframe').each(function () {
                        if ($(this).data('id') == dataUrl) {
                            $(this).show().siblings('.check_iframe').hide();
                            return false;
                        }
                    });
                }
                flag = false;
                return false;
            }
        });

		if(flag)
		{
            var str = '<a href="javascript:;" class="active check_menuTab" data-id="' + url + '">' + name + ' <i class="fa fa-times-circle"></i></a>';
            $('.check_menuTab').removeClass('active');

            // 添加选项卡对应的iframe
            var str1 = '<iframe class="check_iframe"  width="100%" height="100%" src="' + url + '" frameborder="0" data-id="' + url + '" seamless></iframe>';
            $('#check-contents').find('iframe.check_iframe').hide();
            $('#check-contents').append(str1);

            // //显示loading提示
            var loading = layer.load();

            $('.check-contents iframe:visible').load(function () {
                //iframe加载完成后隐藏loading提示
                layer.close(loading);
                resizeWindow();
            });
            // 添加选项卡
            $('.check_menuTabs .check-page-tabs-content').append(str);
            scrollToCheckTab($('.check_menuTab.active'));
		}
		return false;
	}
</script>
	<script>
        function addDiyDom(treeId, treeNode) {
            var spaceWidth = 15;
            var switchObj = $("#" + treeNode.tId + "_switch"),
                icoObj = $("#" + treeNode.tId + "_ico");
            switchObj.remove();
            icoObj.before(switchObj);

            if (treeNode.level > 0) {
                var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
                switchObj.before(spaceStr);
            }
        }

        var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},
            callback:{onClick:function(event, treeId, treeNode){
                    var id = treeNode.id == '0' ? '' :treeNode.id;
                    var url = "${ctx}/sys/user/list?office.id="+id+"&office.name="+treeNode.name;

                    openContent(url, treeNode.name);
                    <%--var id = treeNode.id == '0' ? '' :treeNode.id;--%>
                    <%--$('#userContent').attr("src","${ctx}/sys/user/list?office.id="+id+"&office.name="+treeNode.name);--%>
                }
            }
            ,view:{
                showLine: false,
                showIcon: false,
                addDiyDom: addDiyDom
            }
        };

        function refreshTree(){
            $.getJSON("${ctx}/sys/office/treeData",function(data){
                $.fn.zTree.init($("#ztree"), setting, data).expandAll(true);
            });
        }
        refreshTree();
	</script>
	<script>
		function resizeWindow()
		{

            // $(".ztreeBox").css('height',(document.body.scrollHeight - 50 -34) +"px");
            // $(".ztreeBox").css('width',"250px");
            // $(".ztreeContainer").css('max-height',(document.body.scrollHeight - 50 -34) +"px");
            // $(".ztreeBox .ztreeContainer .ztree").css('min-width',( 250 -34) +"px");

            $(".middle-panel").addClass("hide");
            var wa=document.body.scrollWidth;

			var wl = $(".left-panel-container").width();
			var wr = $(".right-panel-container").width();
			$(".middle-panel").css('width',(wa - wl - wr) +'px');//这里的div，选择你的那个div
            $(".middle-panel").removeClass("hide");
		}

		resizeWindow();
	$(window).resize(function(){
		resizeWindow();
	});
    </script>
	<script>
        $(".left-close").click(function(){
            if($('.left-panel').is(':visible'))
            {
                $(this).children(":first").attr("class","glyphicon glyphicon-chevron-right");
            }
            else
            {
                $(this).children(":first").attr("class","glyphicon glyphicon-chevron-left");
            }
            $(this).toggleClass("closed");
            $(".left-panel").toggleClass("closed");
            resizeWindow()
        })
        $(".right-close").click(function(){
            if($('.right-panel').is(':visible'))
            {
                $(this).children(":first").attr("class","glyphicon glyphicon-chevron-left");
            }
            else
            {
                $(this).children(":first").attr("class","glyphicon glyphicon-chevron-right");
            }
            $(this).toggleClass("closed");
            $(".right-panel").toggleClass("closed");
            resizeWindow()
        })

	</script>
</body>
</html>