<%@ 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">
        var validateForm;
        function doSubmit(obj){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
            if(validateForm.form()){
                if (${not empty msg && msg == 'true'}){
                    parent.layer.msg("请先确认质量符合内容!", {icon: 2});
                    return false;
				}
                if (${not empty number && number == 'true'}){
                    parent.layer.msg("请先输入报告编号!", {icon: 2});
                    return false;
                }
                if(obj == 1){
                    $("#flag").val("yes");
                }else{
                    $("#flag").val("no");
                }
                $("#inputForm").submit();
                return true;
            }

            return false;
        }
        $(document).ready(function() {
            validateForm = $("#inputForm").validate({
                submitHandler: function(form){
                    loading('正在提交，请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function(error, element) {
                    $("#messageBox").text("输入有误，请先更正。");
                    if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });

        function refresh(){//刷新

            window.location="${ctx}/projectcontentinfo/projectcontentinfo/reportView?project.id=${projectId}&id=${projectcontentinfo.id}";
		}
	</script>
</head>
<body style="height:100%;">
	<div class="check-container">
		<div class="left-panel">
			<div class="layui-tab tabDiv">
				<ul class="layui-tab-title">
					<li><a href="${ctx}/projectcontentinfo/projectcontentinfo/report?project.id=${projectId}&id=${projectcontentinfo.id}">项目报告</a></li>
					<li class="active"><a href="javascript:void(0)">项目资料</a></li>
				</ul>
			</div>
			<div class="ztreeBox">
				<div class="ztreeContainer">
					<div id="ztree" class="ztree leftBox-content">

					</div>
				</div>
			</div>
		</div>
		<div class="middle-panel">
			<div class="middle-panel-inner">
				<div class="middle-panel-content close-right">
					<div class="check-tabs">
						<span class="content-title">相关内容：</span>
						<form:form id="inputForm" modelAttribute="projectcontentinfo" action="${ctx}/projectcontentinfo/projectcontentinfo/reportAudit" method="post" class="form-horizontal">
							<form:hidden path="id"/>
							<form:hidden path="home"/>
							<form:hidden path="parentIds"/>
							<form:hidden path="edit"/>
							<form:hidden path="projectReportData.id"/>
							<form:hidden path="projectReportData.createBy.id"/>
							<form:hidden path="projectReportData.act.taskId"/>
							<form:hidden path="projectReportData.act.taskName"/>
							<form:hidden path="projectReportData.act.taskDefKey"/>
							<form:hidden path="projectReportData.act.procInsId"/>
							<form:hidden path="projectReportData.act.procDefId"/>
							<form:hidden id="flag" path="projectReportData.act.flag"/>
							<sys:message content="${message}"/>
						</form:form>
						<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>
							<div class="roll-right-container">
								<button class="roll-nav roll-right content_tabRight"><i class="fa fa-forward"></i>
								</button>
							</div>
						</div>
					</div>
					<div id="check-contents" class="check-contents">
					</div>
				</div>
			</div>
		</div>
		<%--<div class="right-panel-container fr">--%>
			<%--<div class="right-panel">--%>
				<%--<div class="title">质量复核内容</div>--%>
				<%--<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;
                    }
                });
            }
			else 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;
                    }
                });
            }
        }
        // 当前元素不处于活动状态
        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') == url) {
                            $(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);
            });
            // 添加选项卡
            $('.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}/projectcontentinfo/projectcontentinfo/list?id="+id+"&parentIds="+treeNode.pIds+"&change=change";
					if(treeNode.level != 4){
						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}/projectcontentinfo/projectcontentinfo/treeData?projectId=${projectId}&id=${projectcontentinfo.id}",function(data){
                $.fn.zTree.init($("#ztree"), setting, data).expandAll(true);
            });
        }
        refreshTree();
	</script>
	<script>
        $(".left-close").click(function(){
            if($('.left-panel').is(':visible'))
            {
                $(this).children(":first").attr("class","glyphicon glyphicon-chevron-right");
                $(".middle-panel").addClass("close-left");
            }
            else
            {
                $(this).children(":first").attr("class","glyphicon glyphicon-chevron-left");
                $(".middle-panel").removeClass("close-left");
            }
            $(this).toggleClass("closed");
            $(".left-panel").toggleClass("closed");
        })

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