<%@ page contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@ page language="java" import=" com.seeyon.apps.m3.skin.enums.M3StartPageCustomEnum" %>
<!DOCTYPE html>
<html class="h100b">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <%@ include file="/WEB-INF/jsp/common/common.jsp" %>
        <title>模板二维码生成</title>
        <style>
            body {
                background: #f1f1f1;
            }

            #center {
                overflow: hidden;
                zoom: 1;
                height: 100%;
            }

            #sidebar-l {
                float: left;
                width: 250px;
                margin-top: 20px;
                height: calc(100% - 40px);
                overflow: hidden;
                border: 1px solid #DCDBD9;
                background: #fff;
                margin-right: 20px;
            }

            
            #sidebar-c {
                float: left;
                width: 250px;
                margin-top: 20px;
                height: calc(100% - 40px);
                overflow: hidden;
                border: 1px solid #DCDBD9;
                background: #fff;
                margin-right: 20px;
            }
            
            #sidebar-r {
                margin-left: 538px;
                height: calc(100% - 40px);
                margin-top: 20px;
                overflow: auto;
                border: 1px solid #DCDBD9;
                background: #fff;
            }
            .bizDiv,.formTemDiv{
                padding-left: 15px;
                font-size: 16px;
                height: 40px;
                line-height: 40px;
                margin-bottom: 0;
                margin-right: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                cursor: pointer;
            }

            .formlist_content{
                height: 100%;
                overflow: auto;
            }

            .formlist_content .current{
                background-color: #2490f8;
            }


            .formlist_title{
                font-size: 16px;
                height: 40px;
                line-height: 40px;
                margin-bottom: 0;
                margin-right: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                background: #f1f1f1;
                padding-left:15px;
            }
            .qr_title{
                font-size: 16px;
                height: 40px;
                line-height: 40px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                background: #f1f1f1;
                padding-left: 15px;
            }
            .qr_content{
                margin-top: 50px;
                text-align:center;
            }
            .qr_address{
                width: 80%;
                padding: 15px;
                margin-top: 30px;
            }
        </style>
</head>

<body class="h100b">

    <div id="center">
        <div id="sidebar-l">
            <div class="formlist_title">
                应用包
            </div>
            <div class="formlist_content">
                <c:if test="${fn:length(bizList)>0}">
                    <c:forEach items="${bizList}" var="biz">
                        <div class="bizDiv" bizId="${biz.id}">${ctp:toHTML(biz.name)}</div>
                    </c:forEach>
                </c:if>
            </div>
        </div>
        <div id="sidebar-c">
            <div class="formlist_title">
                应用模板
            </div>
            <div class="formlist_content">
                
            </div>
        </div>
        <div id="sidebar-r">
            <div id="qrcode">
                <div class="qr_title">
                    模板二维码
                </div>
                <div class="qr_content">
                
                </div>
                <div style="text-align: center;">
                    <textarea class="qr_address" readonly></textarea>
                </div>
        </div>
        
    </div>
    <script type="text/javascript"
        src="${staticPath}/main/common/js/jquery.qrcode.min.js${ctp:resSuffix()}"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            bindEvent();
            defaultInit();
        });

        function bindEvent(){
            //应用包绑定点击事件
            $('#sidebar-l .bizDiv').bind('click',function(e) {
                var _dom = $(e.target);
                var _bizId = _dom[0].getAttribute("bizId");
                $(".formlist_content .bizDiv").removeClass("current");
                _dom.addClass("current");
                if(_bizId){
                    var param = {
                        type : "formApp",
                        bizConfigId : _bizId
                    };
                    callBackendMethod("qrCodeFormManager","listFormApp", param,{
                        success : function(ret){
                            if(ret && ret.length > 0){
                                renderFormAppDom(ret);
                            }
                        },
                        error : function(request, settings, e){
                            $.alert(e);
                        }
                    });
                }
            })
        }

        function defaultInit(){
            var defaultDom = $("#sidebar-l .bizDiv");
            if(defaultDom && defaultDom.size() > 0){
                $(defaultDom[0]).trigger("click");
            }

        }


        function renderFormAppDom(ret){
            $("#sidebar-c .formlist_content").empty();
            ret.forEach(function(e){
                var formTemDom = $("<div class='formTemDiv' onclick='qrCodeFormInfo(this,"+JSON.stringify(e)+")'>"+ e.name +"</div>");
                $("#sidebar-c .formlist_content").append(formTemDom);
            });

            $($("#sidebar-c .formTemDiv")[0]).trigger("click");
        }

        function qrCodeFormInfo(dom , ret){
            $(".formlist_content .formTemDiv").removeClass("current");
            $(dom).addClass("current");
            var _map = {
                templateId : ret.id,
                sourceType : ret.sourceType
            }
            if(ret.sourceType == 2){
                _map = {
                    sourceType : ret.sourceType,
                    formType: 'main',
                    type: 'new',
                    title: ret.name,
                    rightId: "-1",
                    moduleId: ret.id,
                    formTemplateId: ret.id,
                    moduleType: '42',
                    operateType: '0'
                }
            }
            callBackendMethod("qrCodeFormManager","qrCodeFormUrl", _map,{
                success : function(ret){
                    if(ret && ret.fillUrl){
                        renderQrCode(ret.fillUrl);
                    }
                },
                error : function(request, settings, e){
                    $.alert(e);
                }
            });
        }

        function renderQrCode(temFormUrl){
            $("#qrcode .qr_content").empty();
            $("#qrcode .qr_address").empty();
            $("#qrcode .qr_content").qrcode({
                render: "canvas",
                width:"300",
                height:"300",
                text: temFormUrl
            });
            $("#qrcode .qr_address").html(temFormUrl);
            $.each($(".qr_address"),function(i,n){
                $(n).css("height",n.scrollHeight + 2 + "px");
            })
        }

    </script>
</body>

</html>