<!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-add">
                        <div class="form-group">
                            <label class="col-sm-2 control-label is-required">申请部门名称</label>
                            <div class="col-sm-4">
                                <input type="text" disabled class="form-control" th:value="${applyDeptName}">
                            </div>
                            <label class="col-sm-2 control-label is-required">申请人</label>
                            <div class="col-sm-4">
                                <input type="text" disabled class="form-control" th:value="${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" name="tel" class="form-control" maxlength="11" required>
                            </div>
                            <label class="col-sm-2 control-label is-required">调用者IP</label>
                            <div class="col-sm-4">
                                <input type="input" name="ip" class="form-control" maxlength="15" 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" onchange="changeShareType()" checked/>市共享</label>
                                <label><input name="shareType" type="radio" value="share_type_4" onchange="changeShareType()"/>省共享</label>
                                <!--<select class='form-control' id="shareType" name='shareType' onchange="changeShareType()">
                                    <option value="share_type_1">市共享</option>
                                    <option value="share_type_4">省共享</option>
                                </select>-->
                            </div>
                            <label class="col-sm-2 control-label is-required">接口提供部门</label>
                            <div class="col-sm-4">
                                <div class="input-group">
                                    <input name="provideDeptName" onclick="selectDeptTree()" id="treeName" type="text" placeholder="请选择提供部门" class="form-control" required>
                                    <input name="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" name="frequency" maxlength="10" 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" id="duration" name="duration" placeholder="从 - 至" 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" 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-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
        <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;

    $(function() {
        /** 范围选择日期框 **/
        layui.use('laydate', function(){
            let laydate = layui.laydate;
            laydate.render({
                elem: '#duration',
                range: true
            });
        });
    });

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

    /**获取部门接口弹窗**/
    function selectInterface() {
        let deptId = $("#treeId").val();
        if(deptId == "" || deptId == null){
            $.modal.alertError('请先选择接口提供部门');
        }else{
            let url = prefix + '/interfaceinfo/selectInterfaceByDeptId/' + deptId + '/share_type_1/share_type_4';
            $.modal.open("请选择接口", url, ($(window).width() - 50),($(window).height() - 50), interfaceCallback);
        }
    }

    /**取得子页面选择的接口ids**/
    function interfaceCallback(index, layero) {
        let rows = layero.find("iframe")[0].contentWindow.$.table.selectFirstColumns();
        renderInterfaceHtml(rows.join());
        layer.close(index);
    }

    /**根据数据渲染接口手风琴**/
    function renderInterfaceHtml(ids) {
        $.post(prefix + "/interfaceinfo/selectInterfaceByIds",{
            ids:ids
        },function(res){
            let html =
                '<div class="panel panel-default">' +
                '	<div class="panel-heading">' +
                '		<h5 class="panel-title">' +
                '			<span>#rownum#、 </span>' +
                '			<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" class="form-control" disabled value="#interfaceAddress#">' +
                '					</div>' +
                '				</div>' +
                '				<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="/apply/record/uploadFrame" width="100%" height="412px" frameborder="0" seamless></iframe>' +
                '				    </div>' +
                '				</div>' +
                '			</form>' +
                '		</div>' +
                '	</div>' +
                '</div>';
            if(res.length > 0){
                $("#accordion").html("");
                num = 0;
                for(let i=0;i<res.length;i++){
                    let docm = html.replace(/#interfaceName#/g,res[i].interfaceName);
                    docm = docm.replace(/#rownum#/g, i + 1);
                    docm = docm.replace(/#interfaceAddress#/g,res[i].interfaceAddress);
                    docm = docm.replace(/#id#/g,res[i].id);
                    docm = docm.replace(/#formId#/g,"sub-form"+num);
                    docm = docm.replace(/#file_upload#/g,"file_upload"+num);
                    $("#accordion").append(docm);
                    num += 1;
                }
            }
        });
    }

    /**选择部门树**/
    function selectDeptTree() {
        // let shareType = $("#shareType").val();
        let shareType = $("input[name='shareType']:checked").val();
        var treeId = $("#treeId").val();
        var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
        // var url = ctx + "system/dept/selectDeptTree/" + deptId;
        var url = ctx + "system/dept/selectDeptTreeByShareType/" + deptId + "/" + shareType;
        var options = {
            title: '选择部门',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero){
        //清空下方已选择的接口列表
        $("#accordion").html("");
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        // if ($.tree.notAllowParents(tree)) {
        if (true) {//不能选择根节点
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }
    }

    //切换接口来源
    function changeShareType(){
        $("#treeId").val("");
        $("#treeName").val("");
        // let shareType = $("#shareType").val();
        let shareType = $("input[name='shareType']:checked").val();
        let data;
        if(shareType == "share_type_1"){//市共享 4步
            data = {
                data: ['开始', '政数局审批', deptName+'审批', '完成'],
                index: 0 //0是第一步（0~3）
            };
        }if(shareType == "share_type_4"){//省共享 3步
            data = {
                data: ['开始', '政数局审批', '完成'],
                index: 0 //0是第一步（0~3）
            };
        }
        let dom = $('#luStep');
        dom.html("");
        dom.stepInit(data);
        //清空下方已选择的接口列表
        $("#accordion").html("");
    }

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


    /**表单提交方法**/
    function submitHandler() {
        let subData = [];
        let formData = $("#form-record-add").serializeArray();
        for (let i = 0; i < num; i++) {
            let data = $("#sub-form"+i).serializeArray();
            let elem = {};
            elem.name = "file";
            elem.value = $("#file_upload"+i).contents().find("input[name='_file']").val();
            data.push(elem);
            subData.push(data);
        }
        if ($.validate.form()) {
            let accordion = $("#accordion").html();
            if(accordion.length < 255){//1334
                $.modal.alertWarning("请先选择接口应用模块！");
               return false;
            }else {
                let sub = {"name":"subData","value":JSON.stringify(subData)};
                formData.push(sub);
                $.operate.saveTab(apply_prefix + "/add", formData);
            }
        }
    }

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