<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('用户列表')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: lustep-css" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <!--步骤条start-->
            <div class="ibox">
                <div class="ibox-title">
                    <div id="test" style="height: 40px; padding: 36px 0px;">
                        <div id="luStep"></div>
                    </div>
                </div>
            </div>
            <!--步骤条end-->
            <!--主表字段start-->
            <div class="ibox">
                <div class="ibox-content">
                    <form method="get" class="form-horizontal" id="form-record-edit">
                        <input type="hidden" name="id" th:value="${intRecord.id}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label is-required">申请部门名称</label>
                            <div class="col-sm-4">
                                <input type="text" readonly class="form-control" th:value="${intRecord.applyDeptName}">
                            </div>
                            <label class="col-sm-2 control-label is-required">申请人</label>
                            <div class="col-sm-4">
                                <input type="text" readonly class="form-control" th:value="${intRecord.applyUserName}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label is-required">联系方式</label>
                            <div class="col-sm-4">
                                <input type="text" readonly name="tel" class="form-control" maxlength="11" th:value="${intRecord.tel}" required>
                            </div>
                            <label class="col-sm-2 control-label is-required">调用者IP</label>
                            <div class="col-sm-4">
                                <input type="input" readonly name="ip" class="form-control" maxlength="15" th:value="${intRecord.ip}" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label is-required">接口提供部门</label>
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <input name="provideDeptName" readonly th:value="${intRecord.provideDeptName}" id="treeName" type="text" placeholder="请选择归属部门" class="form-control" required>
                                    <input name="provideDeptId" th:value="${intRecord.provideDeptId}" type="hidden" id="treeId"/>
                                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label is-required">每天调用频率</label>
                            <div class="col-sm-4">
                                <input type="input" class="form-control" readonly name="frequency" maxlength="10" th:value="${intRecord.frequency}" required>
                            </div>
                            <label class="col-sm-2 control-label is-required">使用时效</label>
                            <div class="col-sm-4">
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control" readonly id="duration" name="duration" placeholder="从 - 至" th:value="${intRecord.duration}" required>
                                </div>
                            </div>
                        </div>

                        <div class="form-group" style="display: none;" id="rejectDiv">
                            <!--政数局驳回部分-->
                            <label class="col-sm-2 control-label is-required" style="display: none;" name="approval">驳回原因</label>
                            <div class="col-sm-4" style="display: none;" name="approval">
                                <textarea class="form-control" readonly name="approvalContent">[[${intRecord.approvalContent}]]</textarea>
                            </div>
                            <!--政数局驳回部分-->
                            <!--接口提供部门驳回部分-->
                            <label class="col-sm-2 control-label is-required" style="display: none;" name="examine">驳回原因</label>
                            <div class="col-sm-4" style="display: none;" name="examine">
                                <textarea class="form-control" readonly name="examineContent">[[${intRecord.examineContent}]]</textarea>
                            </div>
                            <!--接口提供部门驳回部分-->
                            <!--通用部分-->
                            <label class="col-sm-2 control-label is-required">驳回依据</label>
                            <div class="col-sm-4">
                                <a class="btn btn-block btn-outline btn-primary" id="file">点此查看附件</a>
                            </div>
                            <!--通用部分-->
                        </div>
                    </form>
                </div>
            </div>
            <!--主表字段end-->
            <!--子表字段start-->
            <div class="ibox">
                <div class="ibox-content">
                    <div class="panel-group" id="accordion">
                    </div>
                </div>
            </div>
            <!--子表字段end-->
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
    </div>
</div>
</body>

<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: lustep-js" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<script th:inline="javascript">

    let prefix = ctx + "system";
    let datas = [[${@dict.getType('share_type')}]];
    let apply_prefix = ctx + "apply/record"
    let deptName = "提供部门";
    let num = 0;
    let interfaces = [[${intDetailedList}]];
    let status = [[${intRecord.status}]];
    let index = 0;
    let approval_file = [[${intRecord.approvalFile}]];
    let examine_file = [[${intRecord.examineFile}]];

    $(function() {
        /** 回显接口 **/
        renderInterface(interfaces);

        /**step步骤条**/
        switch(status){
            case "3" : index = 1; break;//政数局待审批
            case "5" :
                index = 1;
                if(approval_file == null){
                    $("#file").text("未查询到附件");
                }
                $("#file").attr("href",approval_file);
                $("#rejectDiv").show();
                $("label[name='approval']").show();
                $("div[name='approval']").show();
                break;//政数局驳回
            case "4" : index = 2; break;//提供部门待审批
            case "6" :
                index = 2;
                if(examine_file == null){
                    $("#file").text("未查询到附件");
                }
                $("#file").attr("href",examine_file);
                $("#rejectDiv").show();
                $("label[name='examine']").show();
                $("div[name='examine']").show();
                break;//申请驳回
            case "2" :
                index = 3;
                $("div[name='secretKey']").show();
                break;//	审核通过
        }

        let data = {
            data: ['开始', '政数局审批', deptName+'审批', '完成'],
            index: index //0是第一步（0~3）
        };
        let dom = $('#luStep');
        dom.stepInit(data);
    });

    /** 回显接口 **/
    function renderInterface(data){
        let html =
            '<div class="panel panel-default">' +
            '	<div class="panel-heading">' +
            '		<h5 class="panel-title">' +
            '			<a data-toggle="collapse" data-parent="#accordion" href="##id#" onclick="openOrClose(this)">#interfaceName#</a>' +
            '			<span class="panel_sj on" name="#id#"></span>' +
            '		</h5>' +
            '	</div>' +
            '	<div id="#id#" class="panel-collapse collapse">' +
            '		<div class="panel-body">' +
            '			<form class="form-horizontal" id="#formId#">' +
            '           <input type="hidden" name="intId" value="#id#">' +
            '				<div class="form-group">' +
            '					<label class="col-sm-2 control-label">接口地址</label>' +
            '					<div class="col-sm-10">' +
            '						<input type="text" readonly class="form-control" disabled value="#interfaceAddress#">' +
            '					</div>' +
            '				</div>' +
            '				<div class="form-group" style="display: none" name="secretKey">' +
            '					<label class="col-sm-2 control-label">秘钥</label>' +
            '					<div class="col-sm-4">' +
            '						<input type="text" readonly class="form-control" disabled value="#secretKey#">' +
            '					</div>' +
            '					<label class="col-sm-2 control-label">接口编码</label>' +
            '					<div class="col-sm-4">' +
            '						<input type="text" readonly class="form-control" disabled value="#code#">' +
            '					</div>' +
            '				</div>' +
            '				<div class="form-group">' +
            '					<label class="col-sm-2 control-label">接口用途</label>' +
            '					<div class="col-sm-10">' +
            '						<input type="text" readonly class="form-control" name="purpose" value="#purpose#">' +
            '					</div>' +
            '				</div>' +
            '				<div class="form-group">' +
            '                   <label class="col-sm-2 control-label">附件</label>' +
            '                   <div class="col-sm-10">' +
            '					    <iframe id="#file_upload#" src="/apply/record/uploadFrameDisabled/#subId#" width="100%" height="412px" frameborder="0" seamless></iframe>' +
            '				    </div>' +
            '				</div>' +
            '			</form>' +
            '		</div>' +
            '	</div>' +
            '</div>';
        for(let i=0;i<data.length;i++){
            let docm = html.replace(/#interfaceName#/g,data[i].interfaceName);
            docm = docm.replace(/#interfaceAddress#/g,data[i].interfaceAddress);
            docm = docm.replace(/#purpose#/g,data[i].purpose);
            docm = docm.replace(/#id#/g,data[i].intId);
            docm = docm.replace(/#subId#/g,data[i].subId);
            docm = docm.replace(/#secretKey#/g,data[i].secretKey);
            docm = docm.replace(/#code#/g,data[i].code);
            docm = docm.replace(/#formId#/g,"sub-form"+num);
            docm = docm.replace(/#file_upload#/g,"file_upload"+num);
            $("#accordion").append(docm);
            num += 1;
        }
    }

    /**手风琴右侧上下箭头样式变换控制**/
    function openOrClose(dom) {
        let name = $(dom).attr("href").substr(1);
        if($("span[name="+name+"]").hasClass("on")){
            $("span[name="+name+"]").removeClass("on");
        }else{
            $("span[name="+name+"]").eq(0).addClass("on");
        }
    }

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