@{
    ViewBag.Title = "审批流程";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
}

@section CSS{
    <link href="~/Statics/libs/selectize/css/selectize.custom.css" rel="stylesheet" />
    <link href="~/Statics/libs/selectize/css/accountOpeningProcess.css" rel="stylesheet" />
    <style>
        .no-skin {
            position: initial !important;
        }
    </style>
}

@section JS{
    <script src="~/Statics/libs/selectize/js/selectize.min.js?v=@(HtmlUtil.JsVersion)"></script>
    <script type="text/javascript">
         var selectItems = @Json.Serialize(System.Web.Mvc.Html.EnumHelper.GetSelectList(typeof (RuleEnum)));
    </script>
    <script src="~/Scripts/app/system/Approvalprocess.js"></script>
}

<div id="app" class="yc-panel">

    <div>
        流程类型:
        <select v-model="selected" v-on:change="changeType">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        @if (CurUser.系统管理.审批流程)
        {
            @*<button class="btn btn-primary" id="add" v-on:click="addProcess">新增步骤</button>
                <button class="btn btn-primary" id="delete" v-on:click="delProcess">删除步骤</button>*@
            <button class="btn btn-primary" id="ok" v-on:click="ok" style="margin-left:10px;">确定</button>
        }
    </div>
    <div v-show="isOpen">
        <div style="margin: 10px auto">客户开户流程</div>
        <div>
            <div class="node-wrap">
                <div class="end-node">
                    <div class="end-node-text">
                        申请人
                    </div>
                </div>
                <div class="node-add-btn-box">
                    <div class="add-node-btn">
                        <button class="addNodeClick" v-on:click="showProcess(0,false,$event)">+</button>
                    </div>
                </div>
            </div>
            <template>
                <template v-for="(item,index) in openItems">
                    <!--第一个节点非分支 开始-->
                    <div v-show="item.node==0&&item.parentNode==0">
                        <div class="node-wrap">
                            <div class="node-wrap-box start-node " style="width:282px;">
                                <div class="title" style="background: rgb(255, 148, 62);">
                                    <span class="userEdit">审核节点</span>
                                    <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
                                </div>
                                <div>
                                    <span>审核角色</span>
                                    <select v-model="item.SelectValue" v-on:change="selectChangeType(item.Index-1,item.SelectValue)" style="width:200px;height:20px;">
                                        <option v-for="option in roleOptions" v-bind:value="option.Value">
                                            {{option.Text}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="node-add-btn-box">
                                <div class="add-node-btn">
                                    <button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第一个节点非分支 结束-->
                    <!--第一个节点为分支 分支开始-->
                    <div v-show="item.node==1&&item.approvalCondition!=0">
                        <div class="branch-wrap">
                            <div class="branch-box-wrap">
                                <div class="branch-box">
                                    <span class="add-branch" title="添加条件" v-on:click="addCondition(item)">添加条件</span>
                                    <div class="col-box" v-for="child in openFilterBranch">
                                        <div class="condition-node">
                                            <div class="condition-node-box">
                                                <div class="node-wrap">
                                                    <div class="node-wrap-box start-node " style="width: 282px;">
                                                        <div class="title" style="background: rgb(255, 148, 62);">
                                                            <span class="userEdit">分支{{child.node}}条件</span>
                                                            <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
                                                        </div>
                                                        <div>
                                                            <span>申请人</span>
                                                            <select v-model="child.approvalCondition" style="width:75px;height:20px;">
                                                                <option value="1">属于</option>
                                                                <option value="2">不属于</option>
                                                            </select>
                                                            <select v-model="child.approvalGroupId" style="width:143px;height:20px;">
                                                                <option v-for="option in grouplist" v-bind:value="option.id">
                                                                    {{option.groupName}}
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="node-add-btn-box">
                                                        <div class="add-node-btn">
                                                            <button class="addNodeClick" v-on:click="addProcess(item.Index,true,child.node,$event)">+</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--第一个节点非分支 开始-->
                                        <div v-for="childSecond in openFilterChild(child.node)">
                                            <div class="node-wrap">
                                                <div class="node-wrap-box start-node " style="width:282px;">
                                                    <div class="title" style="background: rgb(255, 148, 62);">
                                                        <span class="userEdit">审核节点</span>
                                                        <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(childSecond)"></i>
                                                    </div>
                                                    <div>
                                                        <span>审核角色</span>
                                                        <select v-model="childSecond.SelectValue" style="width:200px;height:20px;">
                                                            <option v-for="option in roleOptions" v-bind:value="option.Value">
                                                                {{option.Text}}
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="node-add-btn-box">
                                                    <div class="add-node-btn">
                                                        <button class="addNodeClick" v-on:click="addProcess(childSecond.Index,true,childSecond.node,$event)">+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--第一个节点非分支 结束-->
                                        <div class="top-left-cover-line" v-if="child.node==1"></div>
                                        <div class="bottom-left-cover-line" v-if="child.node==1"></div>
                                        <div class="top-right-cover-line" v-if="child.node!=1"></div>
                                        <div class="bottom-right-cover-line" v-if="child.node!=1"></div>
                                    </div>
                                </div>
                                <div class="node-add-btn-box">
                                    <div class="add-node-btn">
                                        <button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第一个节点为分支 分支结束-->
                </template>
            </template>
            <!-- 流程结束 -->
            <div class="end-node">
                <div class="end-node-circle"></div>
                <div class="end-node-text">
                    结束流程
                </div>
            </div>
        </div>

    </div>
    <div v-show="isClient">
        <div style="margin: 10px auto">客户信息修改流程</div>
        <div>
            <div class="node-wrap">
                <div class="end-node">
                    <div class="end-node-text">
                        申请人
                    </div>
                </div>
                <div class="node-add-btn-box">
                    <div class="add-node-btn">
                        <button class="addNodeClick" v-on:click="showProcess(0,false,$event)">+</button>
                    </div>
                </div>
            </div>
            <template>
                <template v-for="(item,index) in clientItems">
                    <!--第一个节点非分支 开始-->
                    <div v-show="item.node==0&&item.parentNode==0">
                        <div class="node-wrap">
                            <div class="node-wrap-box start-node " style="width:282px;">
                                <div class="title" style="background: rgb(255, 148, 62);">
                                    <span class="userEdit">审核节点</span>
                                    <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
                                </div>
                                <div>
                                    <span>审核角色</span>
                                    <select v-model="item.SelectValue" v-on:change="selectChangeType(item.Index-1,item.SelectValue)" style="width:200px;height:20px;">
                                        <option v-for="option in roleOptions" v-bind:value="option.Value">
                                            {{option.Text}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="node-add-btn-box">
                                <div class="add-node-btn">
                                    <button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第一个节点非分支 结束-->
                    <!--第一个节点为分支 分支开始-->
                    <div v-show="item.node==1&&item.approvalCondition!=0">
                        <div class="branch-wrap">
                            <div class="branch-box-wrap">
                                <div class="branch-box">
                                    <span class="add-branch" title="添加条件" v-on:click="addCondition(item)">添加条件</span>
                                    <div class="col-box" v-for="child in clientFilterBranch">
                                        <div class="condition-node">
                                            <div class="condition-node-box">
                                                <div class="node-wrap">
                                                    <div class="node-wrap-box start-node " style="width: 282px;">
                                                        <div class="title" style="background: rgb(255, 148, 62);">
                                                            <span class="userEdit">分支{{child.node}}条件</span>
                                                            <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
                                                        </div>
                                                        <div>
                                                            <span>申请人</span>
                                                            <select v-model="child.approvalCondition" style="width:75px;height:20px;">
                                                                <option value="1">属于</option>
                                                                <option value="2">不属于</option>
                                                            </select>
                                                            <select v-model="child.approvalGroupId" style="width:143px;height:20px;">
                                                                <option v-for="option in grouplist" v-bind:value="option.id">
                                                                    {{option.groupName}}
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="node-add-btn-box">
                                                        <div class="add-node-btn">
                                                            <button class="addNodeClick" v-on:click="addProcess(item.Index,true,child.node,$event)">+</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--第一个节点非分支 开始-->
                                        <div v-for="childSecond in clientFilterChild(child.node)">
                                            <div class="node-wrap">
                                                <div class="node-wrap-box start-node " style="width:282px;">
                                                    <div class="title" style="background: rgb(255, 148, 62);">
                                                        <span class="userEdit">审核节点</span>
                                                        <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(childSecond)"></i>
                                                    </div>
                                                    <div>
                                                        <span>审核角色</span>
                                                        <select v-model="childSecond.SelectValue" style="width:200px;height:20px;">
                                                            <option v-for="option in roleOptions" v-bind:value="option.Value">
                                                                {{option.Text}}
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="node-add-btn-box">
                                                    <div class="add-node-btn">
                                                        <button class="addNodeClick" v-on:click="addProcess(childSecond.Index,true,childSecond.node,$event)">+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--第一个节点非分支 结束-->
                                        <div class="top-left-cover-line" v-if="child.node==1"></div>
                                        <div class="bottom-left-cover-line" v-if="child.node==1"></div>
                                        <div class="top-right-cover-line" v-if="child.node!=1"></div>
                                        <div class="bottom-right-cover-line" v-if="child.node!=1"></div>
                                    </div>
                                </div>
                                <div class="node-add-btn-box">
                                    <div class="add-node-btn">
                                        <button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第一个节点为分支 分支结束-->
                </template>
            </template>
            <!-- 流程结束 -->
            <div class="end-node">
                <div class="end-node-circle"></div>
                <div class="end-node-text">
                    结束流程
                </div>
            </div>
        </div>

    </div>
    <div v-show="isTrade">
        <div style="margin: 10px auto">交易新增与修改流程</div>
        <div>
            <div class="node-wrap">
                <div class="end-node">
                    <div class="end-node-text">
                        申请人
                    </div>
                </div>
                <div class="node-add-btn-box">
                    <div class="add-node-btn">
                        <button class="addNodeClick" v-on:click="showProcess(0,false,$event)">+</button>
                    </div>
                </div>
            </div>
            <template>
                <template v-for="(item,index) in tradeItems">
                    <!--第一个节点非分支 开始-->
                    <div v-show="item.node==0&&item.parentNode==0">
                        <div class="node-wrap">
                            <div class="node-wrap-box start-node " style="width:340px;">
                                <div class="title" style="background: rgb(255, 148, 62);">
                                    <span class="userEdit">审核节点</span>
                                    <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
                                </div>
                                <div>
                                    <span>审核角色</span>
                                    <select v-model="item.SelectValue" v-on:change="selectChangeType(item.Index-1,item.SelectValue)" style="width:200px;height:20px;">
                                        <option v-for="option in roleOptions" v-bind:value="option.Value">
                                            {{option.Text}}
                                        </option>
                                    </select>
                                </div>
                                <div>
                                    <span>审批规则</span>
                                    <input :id="'ruleType'+item.Index+item.node" v-model="item.ApprovalRules" type="text" name="selectRule" data-placeholder="" style="width: 200px; height: 20px" multiple="" />
                                </div>
                                <div class="trigger-condition-box">
                                    <div class="trigger-condition-title">
                                        <span>审批条件</span>
                                        <div class="trigger-actions">
                                            <button class="trigger-action-btn" v-on:click="addTriggerCondition(item)">+ 条件</button>
                                            <button class="trigger-action-btn" v-on:click="addTriggerParen(item,'left')">+ (</button>
                                            <button class="trigger-action-btn" v-on:click="addTriggerParen(item,'right')">+ )</button>
                                        </div>
                                    </div>
                                    <div class="trigger-token-list">
                                        <div v-for="(tok,ti) in (item._trigger && item._trigger.tokens) || []" class="trigger-token-row">
                                            <span v-if="tok.type=='operator'" class="trigger-connector" v-on:click="toggleTriggerConnector(item,ti)">{{tok.connector=='or'?'或':'且'}}</span>
                                            <span v-if="tok.type=='lparen'" class="trigger-paren">(&nbsp;&nbsp;<i class="glyphicon glyphicon-remove trigger-remove" v-on:click="removeTriggerToken(item,ti)"></i></span>
                                            <span v-if="tok.type=='rparen'" class="trigger-paren">)<i class="glyphicon glyphicon-remove trigger-remove" v-on:click="removeTriggerToken(item,ti)"></i></span>
                                            <span v-if="tok.type=='condition'" class="trigger-condition-row">
                                                <select v-model="tok.condition.field">
                                                    <option v-for="opt in availableConditionFields" v-bind:value="opt.value">{{opt.text}}</option>
                                                </select>
                                                <select v-model="tok.condition.op">
                                                    <option v-for="opt in conditionOps" v-bind:value="opt.value">{{opt.text}}</option>
                                                </select>
                                                <input v-model="tok.condition.value" type="text" placeholder="阈值" />
                                                <i class="glyphicon glyphicon-remove trigger-remove" v-on:click="removeTriggerToken(item,ti)"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="node-add-btn-box">
                                <div class="add-node-btn">
                                    <button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第一个节点非分支 结束-->
                    <!--第一个节点为分支 分支开始-->
                    <div v-show="item.node==1&&item.approvalCondition!=0">
                        <div class="branch-wrap">
                            <div class="branch-box-wrap">
                                <div class="branch-box">
                                    <span class="add-branch" title="添加条件" v-on:click="addCondition(item)">添加条件</span>
                                    <div class="col-box" v-for="child in filterBranch">
                                        <div class="condition-node">
                                            <div class="condition-node-box">
                                                <div class="node-wrap">
                                                    <div class="node-wrap-box start-node " style="width: 282px;">
                                                        <div class="title" style="background: rgb(255, 148, 62);">
                                                            <span class="userEdit">分支{{child.node}}条件</span>
                                                            <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
                                                        </div>
                                                        <div>
                                                            <span>申请人</span>
                                                            <select v-model="child.approvalCondition" style="width:75px;height:20px;">
                                                                <option value="1">属于</option>
                                                                <option value="2">不属于</option>
                                                            </select>
                                                            <select v-model="child.approvalGroupId" style="width:143px;height:20px;">
                                                                <option v-for="option in grouplist" v-bind:value="option.id">
                                                                    {{option.groupName}}
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="node-add-btn-box">
                                                        <div class="add-node-btn">
                                                            <button class="addNodeClick" v-on:click="addProcess(item.Index,true,child.node,$event)">+</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--第一个节点非分支 开始-->
                                        <div v-for="childSecond in filterChild(child.node)">
                                            <div class="node-wrap">
                                                <div class="node-wrap-box start-node " style="width:340px;">
                                                    <div class="title" style="background: rgb(255, 148, 62);">
                                                        <span class="userEdit">审核节点</span>
                                                        <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(childSecond)"></i>
                                                    </div>
                                                    <div>
                                                        <span>审核角色</span>
                                                        <select v-model="childSecond.SelectValue" style="width:200px;height:20px;">
                                                            <option v-for="option in roleOptions" v-bind:value="option.Value">
                                                                {{option.Text}}
                                                            </option>
                                                        </select>
                                                    </div>
                                                    <div>
                                                        <span>审批规则</span>
                                                        <input :id="'ruleType'+childSecond.Index+childSecond.node" v-model="childSecond.ApprovalRules" type="text" name="selectRule" data-placeholder="" style="width: 200px; height: 20px" multiple="" />
                                                    </div>
                                                    <div class="trigger-condition-box">
                                                        <div class="trigger-condition-title">
                                                            <span>审批条件</span>
                                                            <div class="trigger-actions">
                                                                <button class="trigger-action-btn" v-on:click="addTriggerCondition(childSecond)">+ 条件</button>
                                                                <button class="trigger-action-btn" v-on:click="addTriggerParen(childSecond,'left')">+ (</button>
                                                                <button class="trigger-action-btn" v-on:click="addTriggerParen(childSecond,'right')">+ )</button>
                                                            </div>
                                                        </div>
                                                        <div class="trigger-token-list">
                                                            <div v-for="(tok,ti) in (childSecond._trigger && childSecond._trigger.tokens) || []" class="trigger-token-row">
                                                                <span v-if="tok.type=='operator'" class="trigger-connector" v-on:click="toggleTriggerConnector(childSecond,ti)">{{tok.connector=='or'?'或':'且'}}</span>
                                                                <span v-if="tok.type=='lparen'" class="trigger-paren">(&nbsp;&nbsp;<i class="glyphicon glyphicon-remove trigger-remove" v-on:click="removeTriggerToken(childSecond,ti)"></i></span>
                                                                <span v-if="tok.type=='rparen'" class="trigger-paren">)<i class="glyphicon glyphicon-remove trigger-remove" v-on:click="removeTriggerToken(childSecond,ti)"></i></span>
                                                                <span v-if="tok.type=='condition'" class="trigger-condition-row">
                                                                    <select v-model="tok.condition.field">
                                                                        <option v-for="opt in availableConditionFields" v-bind:value="opt.value">{{opt.text}}</option>
                                                                    </select>
                                                                    <select v-model="tok.condition.op">
                                                                        <option v-for="opt in conditionOps" v-bind:value="opt.value">{{opt.text}}</option>
                                                                    </select>
                                                                    <input v-model="tok.condition.value" type="text" placeholder="阈值" />
                                                                    <i class="glyphicon glyphicon-remove trigger-remove" v-on:click="removeTriggerToken(childSecond,ti)"></i>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="node-add-btn-box">
                                                    <div class="add-node-btn">
                                                        <button class="addNodeClick" v-on:click="addProcess(childSecond.Index,true,childSecond.node,$event)">+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--第一个节点非分支 结束-->
                                        <div class="top-left-cover-line" v-if="child.node==1"></div>
                                        <div class="bottom-left-cover-line" v-if="child.node==1"></div>
                                        <div class="top-right-cover-line" v-if="child.node!=1"></div>
                                        <div class="bottom-right-cover-line" v-if="child.node!=1"></div>
                                    </div>
                                </div>
                                <div class="node-add-btn-box">
                                    <div class="add-node-btn">
                                        <button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第一个节点为分支 分支结束-->
                </template>
            </template>
            <!-- 流程结束 -->
            <div class="end-node">
                <div class="end-node-circle"></div>
                <div class="end-node-text">
                    结束流程
                </div>
            </div>
        </div>
    </div>

    <!-- 需求②：交易了结流程（结构同交易流程，绑定 closeItems） -->
    <div v-show="isClose">
        <div style="margin: 10px auto">交易了结流程（平仓/行权/互换）</div>
        <div>
            <div class="node-wrap">
                <div class="end-node">
                    <div class="end-node-text">
                        申请人
                    </div>
                </div>
                <div class="node-add-btn-box">
                    <div class="add-node-btn">
                        <button class="addNodeClick" v-on:click="closeShowProcess(0,false,$event)">+</button>
                    </div>
                </div>
            </div>
            <template>
                <template v-for="(item,index) in closeItems">
                    <!--第一个节点非分支 开始-->
                    <div v-show="item.node==0&&item.parentNode==0">
                        <div class="node-wrap">
                            <div class="node-wrap-box start-node " style="width:340px;">
                                <div class="title" style="background: rgb(255, 148, 62);">
                                    <span class="userEdit">审核节点</span>
                                    <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
                                </div>
                                <div>
                                    <span>审核角色</span>
                                    <select v-model="item.SelectValue" v-on:change="closeSelectChangeType(item.Index-1,item.SelectValue)" style="width:200px;height:20px;">
                                        <option v-for="option in roleOptions" v-bind:value="option.Value">
                                            {{option.Text}}
                                        </option>
                                    </select>
                                </div>
                                <div>
                                    <span>审批规则</span>
                                    <input :id="'closeRuleType'+item.Index+item.node" v-model="item.ApprovalRules" type="text" name="selectRule" data-placeholder="" style="width: 200px; height: 20px" multiple="" />
                                </div>
                                <div class="trigger-condition-box">
                                    <div class="trigger-condition-title">
                                        <span>审批条件</span>
                                        <div class="trigger-actions">
                                            <button class="trigger-action-btn" v-on:click="addTriggerCondition(item)">+ 条件</button>
                                            <button class="trigger-action-btn" v-on:click="addTriggerParen(item,'left')">+ (</button>
                                            <button class="trigger-action-btn" v-on:click="addTriggerParen(item,'right')">+ )</button>
                                        </div>
                                    </div>
                                    <div class="trigger-token-list">
                                        <div v-for="(tok,ti) in (item._trigger && item._trigger.tokens) || []" class="trigger-token-row">
                                            <span v-if="tok.type=='operator'" class="trigger-connector" v-on:click="toggleTriggerConnector(item,ti)">{{tok.connector=='or'?'或':'且'}}</span>
                                            <span v-if="tok.type=='lparen'" class="trigger-paren">(&nbsp;&nbsp;<i class="glyphicon glyphicon-remove trigger-remove" v-on:click="removeTriggerToken(item,ti)"></i></span>
                                            <span v-if="tok.type=='rparen'" class="trigger-paren">)<i class="glyphicon glyphicon-remove trigger-remove" v-on:click="removeTriggerToken(item,ti)"></i></span>
                                            <span v-if="tok.type=='condition'" class="trigger-condition-row">
                                                <select v-model="tok.condition.field">
                                                    <option v-for="opt in availableConditionFields" v-bind:value="opt.value">{{opt.text}}</option>
                                                </select>
                                                <select v-model="tok.condition.op">
                                                    <option v-for="opt in conditionOps" v-bind:value="opt.value">{{opt.text}}</option>
                                                </select>
                                                <input v-model="tok.condition.value" type="text" placeholder="阈值" />
                                                <i class="glyphicon glyphicon-remove trigger-remove" v-on:click="removeTriggerToken(item,ti)"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="node-add-btn-box">
                                <div class="add-node-btn">
                                    <button class="addNodeClick" v-on:click="closeShowProcess(item.Index,false,$event)">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第一个节点非分支 结束-->
                    <!--第一个节点为分支 分支开始-->
                    <div v-show="item.node==1&&item.approvalCondition!=0">
                        <div class="branch-wrap">
                            <div class="branch-box-wrap">
                                <div class="branch-box">
                                    <span class="add-branch" title="添加条件" v-on:click="addCondition(item)">添加条件</span>
                                    <div class="col-box" v-for="child in closeFilterBranch()">
                                        <div class="condition-node">
                                            <div class="condition-node-box">
                                                <div class="node-wrap">
                                                    <div class="node-wrap-box start-node " style="width: 282px;">
                                                        <div class="title" style="background: rgb(255, 148, 62);">
                                                            <span class="userEdit">分支{{child.node}}条件</span>
                                                            <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
                                                        </div>
                                                        <div>
                                                            <span>申请人</span>
                                                            <select v-model="child.approvalCondition" style="width:75px;height:20px;">
                                                                <option value="1">属于</option>
                                                                <option value="2">不属于</option>
                                                            </select>
                                                            <select v-model="child.approvalGroupId" style="width:143px;height:20px;">
                                                                <option v-for="option in grouplist" v-bind:value="option.id">
                                                                    {{option.groupName}}
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="node-add-btn-box">
                                                        <div class="add-node-btn">
                                                            <button class="addNodeClick" v-on:click="closeAddProcess(item.Index,true,child.node,$event)">+</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--第一个节点非分支 开始-->
                                        <div v-for="childSecond in closeFilterChild(child.node)">
                                            <div class="node-wrap">
                                                <div class="node-wrap-box start-node " style="width:340px;">
                                                    <div class="title" style="background: rgb(255, 148, 62);">
                                                        <span class="userEdit">审核节点</span>
                                                        <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(childSecond)"></i>
                                                    </div>
                                                    <div>
                                                        <span>审核角色</span>
                                                        <select v-model="childSecond.SelectValue" style="width:200px;height:20px;">
                                                            <option v-for="option in roleOptions" v-bind:value="option.Value">
                                                                {{option.Text}}
                                                            </option>
                                                        </select>
                                                    </div>
                                                    <div>
                                                        <span>审批规则</span>
                                                        <input :id="'closeRuleType'+childSecond.Index+childSecond.node" v-model="childSecond.ApprovalRules" type="text" name="selectRule" data-placeholder="" style="width: 200px; height: 20px" multiple="" />
                                                    </div>
                                                    <div class="trigger-condition-box">
                                                        <div class="trigger-condition-title">
                                                            <span>审批条件</span>
                                                            <div class="trigger-actions">
                                                                <button class="trigger-action-btn" v-on:click="addTriggerCondition(childSecond)">+ 条件</button>
                                                                <button class="trigger-action-btn" v-on:click="addTriggerParen(childSecond,'left')">+ (</button>
                                                                <button class="trigger-action-btn" v-on:click="addTriggerParen(childSecond,'right')">+ )</button>
                                                            </div>
                                                        </div>
                                                        <div class="trigger-token-list">
                                                            <div v-for="(tok,ti) in (childSecond._trigger && childSecond._trigger.tokens) || []" class="trigger-token-row">
                                                                <span v-if="tok.type=='operator'" class="trigger-connector" v-on:click="toggleTriggerConnector(childSecond,ti)">{{tok.connector=='or'?'或':'且'}}</span>
                                                                <span v-if="tok.type=='lparen'" class="trigger-paren">(&nbsp;&nbsp;<i class="glyphicon glyphicon-remove trigger-remove" v-on:click="removeTriggerToken(childSecond,ti)"></i></span>
                                                                <span v-if="tok.type=='rparen'" class="trigger-paren">)<i class="glyphicon glyphicon-remove trigger-remove" v-on:click="removeTriggerToken(childSecond,ti)"></i></span>
                                                                <span v-if="tok.type=='condition'" class="trigger-condition-row">
                                                                    <select v-model="tok.condition.field">
                                                                        <option v-for="opt in availableConditionFields" v-bind:value="opt.value">{{opt.text}}</option>
                                                                    </select>
                                                                    <select v-model="tok.condition.op">
                                                                        <option v-for="opt in conditionOps" v-bind:value="opt.value">{{opt.text}}</option>
                                                                    </select>
                                                                    <input v-model="tok.condition.value" type="text" placeholder="阈值" />
                                                                    <i class="glyphicon glyphicon-remove trigger-remove" v-on:click="removeTriggerToken(childSecond,ti)"></i>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="node-add-btn-box">
                                                    <div class="add-node-btn">
                                                        <button class="addNodeClick" v-on:click="closeAddProcess(childSecond.Index,true,childSecond.node,$event)">+</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--第一个节点非分支 结束-->
                                        <div class="top-left-cover-line" v-if="child.node==1"></div>
                                        <div class="bottom-left-cover-line" v-if="child.node==1"></div>
                                        <div class="top-right-cover-line" v-if="child.node!=1"></div>
                                        <div class="bottom-right-cover-line" v-if="child.node!=1"></div>
                                    </div>
                                </div>
                                <div class="node-add-btn-box">
                                    <div class="add-node-btn">
                                        <button class="addNodeClick" v-on:click="closeShowProcess(item.Index,false,$event)">+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--第一个节点为分支 分支结束-->
                </template>
            </template>
            <!-- 流程结束 -->
            <div class="end-node">
                <div class="end-node-circle"></div>
                <div class="end-node-text">
                    结束流程
                </div>
            </div>
        </div>
    </div>

    <div v-show="isCredit">
        <div style="margin: 10px auto">资信与授信流程</div>
        <div>
            <div class="node-wrap">
                <div class="end-node">
                    <div class="end-node-text">
                        申请人
                    </div>
                </div>
                <div class="node-add-btn-box">
                    <div class="add-node-btn">
                        <button class="addNodeClick" v-on:click="showProcess(0,false,$event)">+</button>
                    </div>
                </div>
            </div>
            <template v-model="creditItems">
                <template v-for="(item,index) in creditItems">
                    <div>
                        <div class="node-wrap">
                            <div class="node-wrap-box start-node ">
                                <div class="title" style="background: rgb(255, 148, 62);">
                                    <span class="userEdit">审核节点</span>
                                    <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
                                </div>
                                <div>
                                    <span>审核角色</span>
                                    <select v-model="item.SelectValue" v-on:change="selectChangeType(item.Index-1,item.SelectValue)" style="width:143px;height:20px;">
                                        <option v-for="option in roleOptions" v-bind:value="option.Value">
                                            {{option.Text}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <!-- 朝下剪头 -->
                            <div class="node-add-btn-box">
                                <div class="add-node-btn">
                                    <button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </template>
            <!-- 流程结束 -->
            <div class="end-node">
                <div class="end-node-circle"></div>
                <div class="end-node-text">
                    结束流程
                </div>
            </div>
        </div>
    </div>
    <div v-show="isOutCash">
        <div style="margin: 10px auto">出金</div>
        <div>
            <div class="node-wrap">
                <div class="end-node">
                    <div class="end-node-text">
                        申请人
                    </div>
                </div>
                <div class="node-add-btn-box">
                    <div class="add-node-btn">
                        <button class="addNodeClick" v-on:click="showProcess(0,false,$event)">+</button>
                    </div>
                </div>
            </div>
            <template v-model="outCashItems">
                <template v-for="(item,index) in outCashItems">
                    <div>
                        <div class="node-wrap">
                            <div class="node-wrap-box start-node ">
                                <div class="title" style="background: rgb(255, 148, 62);">
                                    <span class="userEdit">审核节点</span>
                                    <i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
                                </div>
                                <div>
                                    <span>审核角色</span>
                                    <select v-model="item.SelectValue" v-on:change="selectChangeType(item.Index-1,item.SelectValue)" style="width:143px;height:20px;">
                                        <option v-for="option in roleOptions" v-bind:value="option.Value">
                                            {{option.Text}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <!-- 朝下剪头 -->
                            <div class="node-add-btn-box">
                                <div class="add-node-btn">
                                    <button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </template>
            <!-- 流程结束 -->
            <div class="end-node">
                <div class="end-node-circle"></div>
                <div class="end-node-text">
                    结束流程
                </div>
            </div>
        </div>
    </div>
    <div id="addtooltip-warpper">
        <div id="addtooltip-box">
            <div v-on:click="tradeAddProcess(1)">
                <div class="item-wrapper">
                    <span class="glyphicon glyphicon-user"></span>
                </div>
                <p class="item-user">审批节点</p>
            </div>
            <div v-on:click="tradeAddProcess(2)">
                <div class="item-wrapper">
                    <span class="glyphicon glyphicon-transfer"></span>
                </div>
                <p class="item-user">审批分支</p>
            </div>
        </div>
        <!-- 三角指针 -->
        <div id="addtooltip-pointer">

        </div>
    </div>
</div>