<!-- 页面内容 -->
<%- page %>
<div class="row animated fadeInUp">
    <div class="col-sm-12">
        <div class="panel blank-panel">
            <div class="panel-heading">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#flow_do" data-toggle="tab">处理流程</a>
                    </li>
                    <li class="">
                        <a href="#flow_info" data-toggle="tab">流程信息</a>
                    </li>
                    <li class="">
                        <a href="#flow_list" data-toggle="tab">处理记录</a>
                    </li>
                </ul>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane active" id="flow_do">
                        <div class="form-horizontal">
                            <!-- 操作备注 -->
                            <% if(Flow.actions !== 0) { %>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">处理意见：</label>
                                <div class="col-sm-10">
                                    <textarea id="flow_comment" class="form-control"></textarea>
                                </div>
                            </div>
                            <% } %>
                            <!-- 操作列表 -->
                            <div class="form-group">
                                <div class="col-sm-12 text-center" id="flow_ops">
                                    <% if(Flow.actions !== 0) { %>
                                    <script type="text/javascript">
                                        <!--
                                        var flow_action_scripts = {};
                                        //-->
                                    </script>
                                    <% for(var i = 0 ; i < Flow.actions.length; i++ ) { %>
                                    <% if(Flow.actions[i].action_type === 0) { %>
                                    <!-- deal -->
                                    <button class="btn btn-info" type="button" id="<%- Flow.actions[i].action_id %>"
                                            action_type="<%- Flow.actions[i].action_type %>">
                                        <%- Flow.actions[i].action_name %>
                                    </button>
                                    <script type="text/javascript">
                                        <!--
                                        flow_action_scripts["<%- Flow.actions[i].action_id %>"] = <%- Flow.actions[i].script %>;
                                        //-->
                                    </script>
                                    <% }
                                    else if (Flow.actions[i].action_type === 1) { %>
                                    <!-- SAVE -->
                                    <button class="btn btn-default" type="button" id="<%- Flow.actions[i].action_id %>"
                                            action_type="<%- Flow.actions[i].action_type %>">
                                        <%- Flow.actions[i].action_name %>
                                    </button>
                                    <script type="text/javascript">
                                        <!--
                                        flow_action_scripts["<%- Flow.actions[i].action_id %>"] = <%- Flow.actions[i].script %>;
                                        //-->
                                    </script>
                                    <% }
                                    else if (Flow.actions[i].action_type === 2) { %>
                                    <!-- DEL -->
                                    <button class="btn btn-default" type="button" id="<%- Flow.actions[i].action_id %>"
                                            action_type="<%- Flow.actions[i].action_type %>">
                                        <%- Flow.actions[i].action_name %>
                                    </button>
                                    <script type="text/javascript">
                                        <!--
                                        flow_action_scripts["<%- Flow.actions[i].action_id %>"] = function (next,comment) {
                                            top.swal({
                                                title: "您确定要删除流程吗?",
                                                text: "删除后无法还原，请谨慎操作!",
                                                type: "warning",
                                                showCancelButton: true,
                                                confirmButtonText: "确定删除",
                                                cancelButtonText: "取消",
                                                closeOnConfirm: false,
                                                showLoaderOnConfirm: true //如果点击确定后，执行一个ajax操作，那么这个设置为true
                                            }, function () {
                                                next();
                                            });
                                        };
                                        //-->
                                    </script>
                                    <% }
                                    else if (Flow.actions[i].action_type === 9) { %>
                                    <!-- goback -->
                                    <button class="btn btn-default" type="button" id="<%- Flow.actions[i].action_id %>"
                                            action_type="<%- Flow.actions[i].action_type %>">
                                        <%- Flow.actions[i].action_name %>
                                    </button>
                                    <script type="text/javascript">
                                        <!--
                                        flow_action_scripts["<%- Flow.actions[i].action_id %>"] = function (next,comment) {
                                            top.swal({
                                                title: "您确定要回退流程吗?",
                                                text: "回退后您可以重新处理流程!",
                                                type: "warning",
                                                showCancelButton: true,
                                                confirmButtonText: "确定回退",
                                                cancelButtonText: "取消",
                                                closeOnConfirm: false,
                                                showLoaderOnConfirm: true //如果点击确定后，执行一个ajax操作，那么这个设置为true
                                            }, next);
                                        };
                                        //-->
                                    </script>
                                    <% }
                                    else if (Flow.actions[i].action_type === 99) { %>
                                    <!-- discard -->
                                    <button class="btn btn-default" type="button" id="<%- Flow.actions[i].action_id %>"
                                            action_type="<%- Flow.actions[i].action_type %>">
                                        <%- Flow.actions[i].action_name %>
                                    </button>
                                    <script type="text/javascript">
                                        <!--
                                        flow_action_scripts["<%- Flow.actions[i].action_id %>"] = function (next,comment) {
                                            if(!comment){
                                                return top.swal("错误", "请输入处理意见!", "error");
                                            }
                                            top.swal({
                                                title: "您确定要废弃流程吗?",
                                                text: "废弃后流程无法再处理!",
                                                type: "warning",
                                                showCancelButton: true,
                                                confirmButtonText: "确定废弃",
                                                cancelButtonText: "取消",
                                                closeOnConfirm: false,
                                                showLoaderOnConfirm: true //如果点击确定后，执行一个ajax操作，那么这个设置为true
                                            },next);
                                        };
                                        //-->
                                    </script>
                                    <% }
                                    else if (Flow.actions[i].action_type === 98) { %>
                                    <!-- discard -->
                                    <button class="btn btn-default" type="button" id="<%- Flow.actions[i].action_id %>"
                                            action_type="<%- Flow.actions[i].action_type %>">
                                        <%- Flow.actions[i].action_name %>
                                    </button>
                                    <script type="text/javascript">
                                        <!--
                                        flow_action_scripts["<%- Flow.actions[i].action_id %>"] = function (next,comment) {
                                            top.swal({
                                                title: "您确定要还原流程吗?",
                                                text: "还原后流程可以继续处理!",
                                                type: "warning",
                                                showCancelButton: true,
                                                confirmButtonText: "确定还原",
                                                cancelButtonText: "取消",
                                                closeOnConfirm: false,
                                                showLoaderOnConfirm: true //如果点击确定后，执行一个ajax操作，那么这个设置为true
                                            }, next);
                                        };
                                        //-->
                                    </script>
                                    <% } %>
                                    <% } %>
                                    <% } %>
                                </div>
                            </div>
                            <% if(Flow.actions !== 0) { %>
                            <!-- 操作脚本 -->
                            <script type="text/javascript">
                                <!--
                                $(function () {
                                    top.layer.closeAll('loading');
                                    top.swal.close();
                                    var comment = $("#flow_comment");
                                    var flow_instance = <%- JSON.stringify(Flow.flow_instance) %>;
                                    $("#flow_ops").on("click", function (e) {
                                        if (e.target.nodeName === 'BUTTON') {
                                            var id = e.target.id;
                                            var action_type = $(e.target).attr("action_type");
                                            flow_action_scripts[id](function (data) {
                                                var flow_record = {
                                                    action_id: id,
                                                    action_type: action_type,
                                                    action_comment: comment.val()
                                                }
                                                if (typeof data === 'string') {
                                                    //表单
                                                    var form = document.getElementById(data) || document.forms[data];
                                                    if (!form || form.nodeName !== "FORM") {
                                                        return top.swal("提交失败！", "因为指定的表单" + data + "不存在", "error");
                                                    }
                                                    $(form).append("<input type='hidden' name='flow_instance'/>").find("[name=flow_instance]").val(JSON.stringify(flow_instance));
                                                    $(form).append("<input type='hidden' name='flow_record'/>").find("[name=flow_record]").val(JSON.stringify(flow_record));
                                                    form.action = "/flow/do.html";
                                                    e.target.disabled = true;
                                                    return form.submit();
                                                }
                                                var formData;
                                                if (typeof data === 'object') {
                                                    formData = data;
                                                } else {
                                                    formData = {};
                                                }
                                                formData.flow_record = flow_record;
                                                formData.flow_instance = flow_instance;
                                                e.target.disabled = true;
                                                $.post("/flow/do.html", formData).done(function (instance_id) {
                                                    if(instance_id == 0){
                                                        //删除操作
                                                        window.location.href = "/success.html";
                                                    }else{
                                                        window.location.href = "/flow/show.html?instance_id=" + instance_id;
                                                    }
                                                }).fail(function (err) {
                                                    err = JSON.parse(err.responseText);
                                                    top.swal("错误" + (err.status || ''), err.message || err, "error");
                                                    e.target.disabled = false;
                                                });
                                            },comment.val());
                                            return false;
                                        }
                                    });
                                });
                                //-->
                            </script>
                            <% } %>
                        </div>
                    </div>
                    <div class="tab-pane" id="flow_info">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">流程名称：</label>
                                <div class="col-sm-4">
                                    <p class="form-control-static"><%- Flow.flow.flow_name %>(<%- Flow.flow.flow_version %>)</p>
                                </div>
                                <label class="col-sm-2 control-label">发起人：</label>
                                <div class="col-sm-4">
                                    <p class="form-control-static"><%- Flow.instance.createor %></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">发起时间：</label>
                                <div class="col-sm-4">
                                    <p class="form-control-static"><%- Flow.instance.create_time %></p>
                                </div>
                                <label class="col-sm-2 control-label">当前状态：</label>
                                <div class="col-sm-4">
                                    <p class="form-control-static"><%- Flow.instance.instance_state === 99 ? '已废弃' : (Flow.current_node.node_state || '新建') %></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="flow_list">
                        <div id="vertical-timeline" class="vertical-container light-timeline ">
                            <% var icons = {
                                '0' : ['fa fa-tasks','blue'],
                                '9' : ['fa fa-backward','lazur-bg'],
                                '99' : ['fa fa-pause','yellow-bg'],
                                '98' : ['fa fa-play','navy-bg']
                            }; %>
                            <% for(var i = 0 ; i < Flow.records.length; i ++) { %>
                            <div class="vertical-timeline-block">
                                <div class="vertical-timeline-icon <%- icons[Flow.records[i].action_type + ''][1]  %>">
                                    <i class="<%- icons[Flow.records[i].action_type + ''][0]  %>"></i>
                                </div>

                                <div class="vertical-timeline-content">
                                    <h3><%- Flow.records[i].action_username %></h3>
                                    <p>
                                        处理意见：<%- Flow.records[i].action_comment || '无' %>
                                    </p>
                                    <span class="vertical-date">
                                            操作：<%- Flow.records[i].action_name %> <br>
                                            <small><%- Flow.records[i].action_time %></small>
                                        </span>
                                </div>
                            </div>
                            <% } %>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>