<!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="${DataRecord.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="${DataRecord.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="${DataRecord.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="${DataRecord.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="${DataRecord.ip}" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label is-required">数据应用来源</label>
                            <div class="col-sm-4">
                                <label><input name="shareType" type="radio" value="share_type_1" th:field="${DataRecord.shareType}" disabled style="cursor: auto;"/>市共享</label>
                                <label><input name="shareType" type="radio" value="share_type_4" th:field="${DataRecord.shareType}" disabled style="cursor: auto;"/>省共享</label>
                                <!--<input type="input" readonly name="shareType" class="form-control" maxlength="15" th:value="${DataRecord.shareType}" required>-->
                            </div>
                            <label class="col-sm-2 control-label is-required">接口提供部门</label>
                            <div class="col-sm-4">
                                <div class="input-group">
                                    <input name="provideDeptName" readonly th:value="${DataRecord.provideDeptName}" id="treeName" type="text" placeholder="请选择提供部门" class="form-control" required>
                                    <input name="provideDeptId" th:value="${DataRecord.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="${DataRecord.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="${DataRecord.duration}" required>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--主表字段end-->
            <!--子表字段start-->
            <div class="ibox">
                <div class="ibox-title">
                    <button type="button" class="btn btn-w-m btn-success" onclick="selectInterface()">点击此处选择数据应用模块</button>
                </div>
                <div class="ibox-content">
                    <div class="panel-group panel_top clearfix" id="accordion">

                    </div>
                </div>


                <div id="rte" class="panel-collapse collapse" style="display: block">
                    <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" class="form-control" name="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="/applyData/record/uploadFrame" width="100%" height="412px" frameborder="0" seamless></iframe>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            <!--子表字段end-->
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="ok()"><i class="fa fa-check"></i>申请通过</button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="reject()"><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">
    $(document).ready(function(){
        init();
    })
    function init() {
        // let shareType = $("#shareType").val();
        let shareType = $("input[name='shareType']:checked").val();
        let data;
        if(shareType == "share_type_1"){//市共享 4步
            data = {
                data: ['开始', '政数局审批', deptName+'审批', '完成'],
                index: 2 //0是第一步（0~3）
            };
        }if(shareType == "share_type_4"){//省共享 3步
            data = {
                data: ['开始', '政数局审批', '完成'],
                index: 2 //0是第一步（0~3）
            };
        }
        let dom = $('#luStep');
        dom.html("");
        dom.stepInit(data);
    }

    let prefix = ctx + "system";
    let datas = [[${@dict.getType('share_type')}]];
    let apply_prefix = ctx + "applyData/record"
    let deptName = "提供部门";
    let num = 0;
    let interfaces = [[${DataDetailedList}]];

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

    /** 回显接口 **/
    function renderInterface(data){
        let html =
            '<div class="panel_list">' +
            '	<div class="panel_idv">' +
            '		<h5 >' +
            '			<span>#rownum#、 </span>' +
            '			<a data-toggle="collapse" data-parent="#accordion" href="##id#" onclick="openOrClose(this)">#interfaceName#</a>' +
            '		</h5>' +
            '	</div>' +

            '</div>';
        for(let i=0;i<data.length;i++){
            let docm = html.replace(/#interfaceName#/g,data[i].interfaceName);
            docm = docm.replace(/#rownum#/g, i + 1);
            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(/#formId#/g,"sub-form"+num);
            docm = docm.replace(/#file_upload#/g,"file_upload"+num);
            $("#accordion").append(docm);
            num += 1;
        }
        let fileUpload =
            '    <div class="panel-body">\n' +
            '        <form class="form-horizontal" id="sub-form0">\n' +
            '            <input type="hidden" name="intId" value="' + data[0].intId + '">\n' +
            '            <div class="form-group">\n' +
            '                <label class="col-sm-2 control-label">申请用途</label>\n' +
            '                <div class="col-sm-10">\n' +
            '                    <input type="text" readonly class="form-control" name="purpose" value="' + data[0].purpose + '">\n' +
            '                </div>\n' +
            '            </div>\n' +
            '            <div class="form-group">\n' +
            '                <label class="col-sm-2 control-label">附件</label>\n' +
            '                <div class="col-sm-10">\n' +
            '                   <iframe id="file_upload0" src="/applyData/record/uploadFrameDisabled/' + data[0].subId + '" width="100%" height="412px" frameborder="0" seamless></iframe>\n' +
            '                </div>\n' +
            '            </div>\n' +
            '        </form>\n' +
            '    </div>';
        $("#rte").html(fileUpload);
    }

    /**手风琴右侧上下箭头样式变换控制**/
    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");
        }
    }

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

    function ok() {
        let id = $("input[name='id']").val();
        $.modal.confirm("确认审批通过吗?", function() {
            let url = ctx + "applyData/record/updateStatus";
            $.operate.post(url,{ "id": id, "status": "2" },function(res){
                $.operate.successTabCallback(res);
            });
        });
    }

    function reject() {
        let id = $("input[name='id']").val();
        $.modal.confirm("确认审批驳回吗?", function() {
            let url = ctx + "applyData/record/rejectDialog/" + id;
            $.modal.open("请填写驳回原因", url, '700', '540');
        });
    }

    function callBack(res){
        $.operate.successTabCallback(res);
    }

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