<!-- 页面内容 -->
<%- page %>
<div class="row">
    <div class="col-sm-12">
            <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 class="tab-content">
                <div class="tab-pane fade active in" 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) {
                                        confirmEme("您确定要删除流程吗?",["删除后无法还原，请谨慎操作!"],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) {
                                        confirmEme("您确定要回退流程吗?",["回退后您可以重新处理流程"],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 toastr.error('请输入处理意见!');
                                        }
                                        confirmEme("您确定要废弃流程吗?",["废弃后流程无法再处理!"],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) {
                                        confirmEme("您确定要还原流程吗?",["还原后流程可以继续处理!"],next);
                                    };
                                    //-->
                                </script>
                                <% } %>
                                <% } %>
                                <% } %>
                                <button class="btn btn-default" type="button" id="flow_back"
                                        action_type="-1">
                                    返回
                                </button>
                                <script type="text/javascript">
                                    <!--
                                    flow_action_scripts["flow_back"] = function (next,comment) {
                                        <% if(Flow.actions !== 0) { %>
                                        confirmEme("您确定返回吗?",["未保存的数据将丢失!"],function () {
                                            window.location.href = "<%- from_page %>";
                                        });
                                        <% } else {%>
                                        window.location.href = "<%- from_page %>";
                                        <% } %>
                                    };
                                    //-->
                                </script>
                            </div>
                        </div>
                        <% if(Flow.actions !== 0) { %>
                        <!-- 操作脚本 -->
                        <script type="text/javascript">
                            <!--
                            $(function () {
                                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 toastr.error("提交失败！因为指定的表单" + data + "不存在");
                                                }
                                                $(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).append("<input type='hidden' name='from_page'/>").find("[name=from_page]").val("<%- from_page %>");
                                                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;
                                            formData.from_page = "<%- from_page %>";
                                            e.target.disabled = true;
                                            $.post("/flow/do.html", formData).done(function (instance_id) {
                                                if(instance_id == 0){
                                                    //删除操作
                                                    toastr.success("删除成功!");
                                                    window.location.href = '<%- from_page %>';
                                                }else{
                                                    window.location.href = "/flow/show.html?instance_id=" + instance_id;
                                                }
                                            }).fail(function (err) {
                                                err = JSON.parse(err.responseText);
                                                toastr.error("错误" + (err.status || '')+ err.message || err);
                                                e.target.disabled = false;
                                            });
                                        },comment.val());
                                        return false;
                                    }
                                });
                            });
                            //-->
                        </script>
                        <% } %>
                    </div>
                </div>
                <div class="tab-pane fade in" 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 fade in" id="flow_list">
                    <% var icons = {
                        '0' : 'fa fa-tasks',
                        '9' : 'fa fa-backward',
                        '99' : 'fa fa-pause',
                        '98' : 'fa fa-play'
                    }; %>
                    <ul class="timeline">
                        <% for(var i = 0 ; i < Flow.records.length; i ++) { %>
                        <li>
                            <div class="timeline-time">
                                <% var dates = Flow.records[i].action_time.split(' '); %>
                                <span class="date"><%- dates[0] %></span>
                                <span class="time"><%- dates[1] %></span>
                            </div>
                            <div class="timeline-icon">
                                <a href="javascript:;"><i class="<%- icons[Flow.records[i].action_type + '']  %>"></i></a>
                            </div>
                            <div class="timeline-body">
                                <div class="timeline-header">
                                    <span class="username"><%- Flow.records[i].action_username %></span>
                                </div>
                                <div class="timeline-content">
                                    <p>操作：<%- Flow.records[i].action_name %></p>
                                    <p>处理意见：<%- Flow.records[i].action_comment || '无' %></p>
                                </div>
                            </div>
                        </li>
                        <% } %>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>