@using IwbZero.ExprFunctions
@using IwbZero.ToolCommon.StringModel
@using WeEngine
@using WeEngine.ComponentInfo
@using WePlatform.Helpers
@using WePlatform.Views.Shared.Modals
@model string
@{
    //var componentStr = "";
    //componentStr += "<option value=\"\">请选择事务组件...</option>";
    //componentStr += "<option value=\"c\">创建变量</option>";
    //componentStr += "<option value=\"c\">变量赋值</option>";
    var sysVarSelect = DefaultVariable.GetVariableSelects();
    var sysVarList = DefaultVariable.GetVariableNameList().Obj2StringCamelCase();
    var sysFunList = IwbFunction.FunctionList.Obj2String();
}
<style>
    .comp-btn {
        font-size: 100%;
    }
    .comp-box {
        width: 100%;
        padding: 5px;
        display: flex;
    }

    .comp-list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 180px;
        border: 2px solid #ff4500;
        padding: 5px;
        border-radius: 4px;
        margin-right: 10px;
        list-style: none;
        margin-bottom: 0;
        min-height: 400px;
    }

    .comp {
        width: 100%;
        margin: 5px auto;
    }

        .comp:first-child {
            margin-top: 0;
        }

    .comp:last-child {
        margin-bottom: 0;
    }

    .comp .drag {
        width: 100%;
        display: inline-block;
        text-align: center;
        font-weight: bold;
        padding: 3px 0;
        background: #f5f5dc;
        color: #1e90ff;
        border: 1px solid #1e90ff;
        cursor: pointer;
    }

    .comp .drag.dragging {
        background: #1e90ff;
        color: #fff;
    }

    .step-box {
        float: left;
        width: 100%;
        border: 2px solid #ff4500;
        border-radius: 4px;
        min-height: 100px;
    }

    .step-detail {
        width: 100%;
        padding: 5px;
        display: flex;
        margin: 2.5px 0;
    }

    .step-detail:first-child {
        margin-top: 5px;
    }

    .step-detail:last-child {
        margin-bottom: 50px;
    }

    .step-index {
        display: flex;
        flex-direction: column;
        justify-content: start;
        color: deeppink;
        /*font-weight: bold;*/
        margin-right: 10px;
    }

    .step-index span, .step-index strong {
        min-width: 30px;
        text-align: center;
    }

    .step-content {
        width: 100%;
        margin: 0 auto;
        border: 1px solid #3cb371;
        padding: 8px 0;
    }

    .step-content .step-content-title {
        width: 100%;
        display: flex;
        cursor: pointer;
        padding: 0 10px;
        padding-left: 15px;
    }

    .step-content .step-content-name {
        padding: 0 15px;
        padding-right: 8px;
        color: #3cb371;
        font-size: 120%;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
    }

    .step-content .step-content-text {
        width: 85%;
        color: #1e90ff;
        font-weight: bold;
        display: inline-block;
        text-align: left;
        text-indent: 1em;
        font-size: 110%;
    }

    .step-content .step-content-delete {
        width: 8%;
        font-size: 120%;
        cursor: pointer;
        padding: 0 15px;
        padding-left: 8px;
        color: #ff4500;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
    }

    .step-content .step-content-delete:hover {
        color: red;
        font-weight: bold;
    }


    .allow-drop {
        background: #f5f5f5;
    }

    .dynamic-box {
        border: none;
        padding: 0;
    }

    .expression {
        position: relative;
    }

    .expression .icon {
        position: absolute;
        right: 15px;
        bottom: 4px;
        padding: 1px 8px;
        background: #1e90ff;
        color: #fff;
        border-radius: 3px;
        z-index: 1;
        cursor: pointer;
    }

    .dropdown-menu.variables {
        position: static;
        width: 100%;
        overflow: auto;
        border: none;
        padding: 0;
    }

    .express-box {
        border-radius: 0 4px 4px 0;
        border: 1px solid #1e90ff;
        max-height: 305px;
        overflow-y: auto;
    }

    .nav-tabs.flex-column {
        border-radius: 4px 0 0 4px;
        border: 1px solid #1e90ff;
        border-right: none;
        height: 305px;
        padding: 5px;
        padding-right: 0;
    }

    .nav-tabs.flex-column .nav-link {
        border: 1px solid #1e90ff;
        border-bottom: none;
    }

    .nav-tabs.flex-column .nav-link:last-child {
        border-bottom: 1px solid #1e90ff;
    }

    .nav-tabs.flex-column .nav-link:focus, .nav-tabs.flex-column .nav-link:hover {
        border: 1px solid #1e90ff;
        color: #1e90ff;
        font-weight: bold;
    }
    .nav-tabs.flex-column .nav-link:last-child:focus, .nav-tabs.flex-column .nav-link:last-child:hover {
        border-bottom-width: 2px;
    }

    .nav-tabs.flex-column .nav-link.active {
        border-color: #1e90ff transparent #1e90ff #1e90ff;
        background: #1e90ff;
        color: #fff !important;
    }
</style>

<!-- MODAL  modal-component  START-->
<section>
    <div class="modal fade" id="modal-component" tabindex="-1">
        <div class="modal-dialog modal-lg" style="max-width: 1000px">
            <div class="modal-content">
                @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel("事务组件"))
                <div class="modal-body">
                    <form class="form-horizontal " id="form-component">
                        <input type="hidden" id="id" name="id" value="" />
                        <input type="hidden" id="path" name="path" value="" />
                        <input type="hidden" id="component" name="component" value="" />
                        <input type="hidden" id="componentNo" name="componentNo" value="" />
                        <input type="hidden" id="mapping" name="mapping" value="" />
                        <input type="hidden" id="componentType" name="componentType" value="" />
                        <input type="hidden" id="sceneVariables" name="sceneVariables" value="" />
                        <input type="hidden" id="name" name="name"  value="" />
                        @*<div class="form-group row">
                            <label class="iwb-label iwb-label-sm iwb-label" for="name">组件名称</label>
                            <div class="">
                                <div class="input-group input-group-sm">
                                    <input class="form-control" id="name" name="name" type="text" placeholder="请输入事务组件名称..." style="" autocomplete="off" aria-required="true"/>
                                </div>
                            </div>
                        </div>*@
                        <div class="comp-box" style="width: 100%">
                            <ul id="comp-list" class="comp-list">
                                <li class="comp">
                                    <!--ondragstart="DragStart(event)" ondragend="DragEnd(event)--->
                                    <a href="javascript:void(0)" class="drag" data-type="@(CompStmtType.CheckCondition)" draggable="true">节点检验条件</a>
                                </li>
                                <li class="comp">
                                    <a href="javascript:void(0)" class="drag" data-type="@(CompStmtType.SendMessage)" draggable="true">发送消息</a>
                                </li>

                                <li class="comp">
                                    <a href="javascript:void(0)" class="drag" data-type="@(CompStmtType.CreateVariables)" draggable="true">创建变量</a>
                                </li>
                                <li class="comp">
                                    <a href="javascript:void(0)" class="drag" data-type="@(CompStmtType.SetVariables)" draggable="true">变量赋值</a>
                                </li>
                                @if (Model == "package")
                                {
                                    <li class="comp">
                                        <a href="javascript:void(0)" class="drag" data-type="@(CompStmtType.QueryVariables)" draggable="true">变量查询赋值</a>
                                    </li>
                                    <li class="comp">
                                        <a href="javascript:void(0)" class="drag" data-type="@(CompStmtType.SetNodeToWait)" draggable="true">等待节点</a>
                                    </li>
                                }
                                <li class="comp">
                                    <a href="javascript:void(0)" class="drag" data-type="@(CompStmtType.ConditionalBranching)" draggable="true">条件分支</a>
                                </li>
                            </ul>
                            <div id="step-box" class="step-box" data-path="" data-id="0">

                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-danger comp-btn waves-effect float-left" id="comp-delete" onclick="DeleteComp()" style="min-width:100px; display: none;">删除此组件</button>
                    <button type="button" class="btn btn-sm btn-outline-iwb waves-effect" data-dismiss="modal" style="min-width:100px;">取消</button>
                    <button type="button" class="btn btn-iwb btn-sm save-btn comp-btn waves-effect"  id="comp-save" style="min-width:100px;">保存</button>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="modal-express1" tabindex="-1">
    <div class="modal-dialog modal-lg" style="max-width: 900px">
        <div class="modal-content">
            @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel("表达式编辑器"))
            <div class="modal-body">
                <form class="form-horizontal " id="form-express">
                    <div class="form-group row">
                        <label class="col-sm-1 iwb-label iwb-label-sm iwb-label-required" for="name">表达式</label>
                        <div class="col-sm-11">
                            <div class="input-group input-group-sm">
                                <textarea class="form-control required" id="expression" name="expression" type="text" placeholder="请输入表达式..." style="" ></textarea>
                            </div>
                        </div>
                            
                    </div>
                </form>
            </div>
            @Html.Partial("Modals/_ModalFooter", "0")
        </div>
    </div>
</div>

<!-- MODAL  modal-component  END-->
@using (Html.BeginScripts())
{
    <script>
        var //_InitComponentDataArray = { id: 0, parentId: null, children: [] },
            //_ComponentDataJson = {  },
            _ComponentDataArray = [],
            _$DropContainer = $('#step-box');
        _StepDetailClass = 'step-detail';
        _StepIndex = '<div class="step-index no-select"><span>步骤</span><strong>{0}</strong></div>',
            _StepContentClass = 'step-content',
            _StepContentTitle = '<div class="step-content-title no-select"><div class="step-content-name ">{0}</div><div class="step-content-text">{1}</div><div class="step-content-delete no-select" onclick="DeleteComponent(this)">删除</div></div>',
            _Label = '<div class="dynamic-label {0}"><label class="iwb-label">{1}</label></div>',
            _InputGroup = '<div class="{0}"><div class="input-group input-group-sm">{1}</div></div>',
            _InputGroupExpr = '<div class="{0} expression"><div class="input-group input-group-sm">{1}</div><div class="icon" onclick="Express(this)">表达式</div></div>',
            _InputHidden = '<input type="hidden" name="{0}" value="{1}">',
            _Input = '<input type="text" class="form-control " name="{0}" placeholder="请输入{1}" style="width: 100%">',
            _RequiredInput = '<input type="text" class="form-control required" name="{0}" placeholder="请输入{1}" style="width: 100%" >',
            _InputTextarea = '<textarea  class="form-control " name="{0}" placeholder="请输入{1}" style="width: 100%"></textarea>',
            _RequiredInputTextarea = '<textarea  class="form-control required" name="{0}" placeholder="请输入{1}" style="width: 100%"></textarea>',
            _Select = '<select class="form-control" name="{0}" style="width: 100%" >{1}</select>',
            _RequiredSelect = '<select class="form-control required " name="{0}" style="width: 100%" >{1}</select>',
            _ModalHeader =
                '<div class="modal-header"><h4 class="modal-title"><span class="modal-title-span">{0}</span></h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div>',
            _ModalBody = '<div class="modal-body"><form class="form-horizontal ">{0}</form></div>',
            _ModalFooter = '<div class="modal-footer" style="text-align: center;"><button type="button" class="btn btn-sm btn-outline-iwb waves-effect" data-dismiss="modal" style="min-width:100px;">取消</button><button type="button" class="btn btn-iwb btn-sm save-btn waves-effect" style="min-width:100px;">保存</button></div>';
    </script>

    <script id="event-s">

        $(function () {
            Bind();
            $('#modal-component').off('hidden.bs.modal.comp').on('hidden.bs.modal.comp', function () {
                $('#comp-delete').hide();
                $('#step-box').empty();
            });
            $('#modal-component').off('shown.bs.modal.comp').on('shown.bs.modal.comp', function () {
                var type = $('#modal-component #componentType').val(), component = $('#modal-component #component').val();
                console.log("component:", type, component);
                if (component) {
                    $('#comp-delete').show();
                    try {
                        var compArray = JSON.parse(component);
                        _ComponentDataArray = compArray;
                    } catch (e) {
                        console.log("component:", e);
                    }
                } else {
                    $('#comp-delete').hide();
                    _ComponentDataArray = [];
                }
                //_ComponentDataArray = $.Json2Array(_ComponentDataJson);
                ParseComponent(_ComponentDataArray);
            });
        });

        function Bind() {
            $('.comp-list .comp .drag')
                .off('dragstart').on('dragstart', DragStart)
                .off('dragend').on('dragend', DragEnd);
            //console.log($('.comp-list .comp .drag:first-child'));
            $('.comp-box .step-box')
                .off('dragover').on('dragover', DragOver)
                .off('dragenter').on('dragenter', DragEnter)
                .off('dragleave').on('dragleave', DragLeave)
                .off('drop').on('drop', Drop);
            //console.log($('.comp-box .step-box').eq(0));
        }

        function DragStart(event) {
            event = (event || window.event);
            var ev = event.originalEvent;
            //console.log("start", ev);
            $(ev.target).addClass('dragging');
            var type = $(ev.target).data('type');
            ev.dataTransfer.setData("Text", type);

        }
        function DragOver(event) {
            event = (event || window.event);
            var ev = event.originalEvent;
            //console.log("over", ev);
            ev.preventDefault();
            _$DropContainer.find(".allow-drop").removeClass('allow-drop');
            if (!$(ev.target).hasClass('step-box')) {
                ev.dataTransfer.dropEffect = 'none';
            } else {
                ev.dataTransfer.dropEffect = 'copy';
                $(event.delegateTarget).addClass('allow-drop');
            }
        }
        function DragEnd(event) {
            event = (event || window.event);
            var ev = event.originalEvent;
            //console.log("end", ev);
            ev.preventDefault();
            $('.comp-list .comp .drag').removeClass('dragging');
            _$DropContainer.parent().find('.allow-drop').removeClass('allow-drop');
        }

        var dropTimer;
        function Drop(event) {
            var ev = (event || window.event).originalEvent;
            ev.preventDefault();
            var type = ev.dataTransfer.getData("Text");

            clearTimeout(dropTimer); //ignore previous trigger
            dropTimer = setTimeout(function () { //wait to execute handler again
                var $this = $(ev.target);
                ComponentDrop($this, type);
            }, 10);

        }
        function DragEnter(event) {
            event = (event || window.event);
            var ev = event.originalEvent;
            //console.log("enter", ev);
            ev.preventDefault();
            _$DropContainer.find(".allow-drop").removeClass('allow-drop');
            if (!$(ev.target).hasClass('step-box')) {
                ev.dataTransfer.dropEffect = 'none';
            } else {
                $(event.delegateTarget).addClass('allow-drop');
            }
        }
        function DragLeave(event) {
            //event = (event || window.event);
            //var ev = event.originalEvent;
            //console.log("leave", ev);
            _$DropContainer.parent().find('.allow-drop').removeClass('allow-drop');
        }
    </script>

    <script id="Component-s">
        function DeleteComp() {
            var str = '@(Model)' == 'package' ? '确认删除方案包配置的组件吗？' : '确认删除情景流组件吗？';
            MsgConfirm(str,
                "删除事务组件",
                function() {
                    var no = $('#modal-component #componentNo').val(), path = $('#modal-component #path').val(), type = $('#modal-component #componentType').val();
                    //var source = type.indexOf('P') == 0 ? "package" : "";;
                    window.RemoveComponent(no, path, type);
                });
        }

        function ComponentDrop($this, type) {

            var parentId = $this.data('id'), prevId = $this.find('.step-detail:last-child').data('id'), parentPath = $this.data('path'), index;
            var parentIdStr = parentId ? parentId : '';
            if (prevId) {
                var prevArr = (prevId+"").split('-');
                index = parseInt(prevArr[prevArr.length - 1]) + 1;
            } else {
                index = "1";
            }
            var id = parentIdStr + (parentIdStr === "" ? "" : "-") + index + "";
            var path = parentPath + (parentPath === "" ? "" : "_") + id;
            var script = { id: id,  path: path, parentPath: parentPath };
            switch (type) {
            case '@(CompStmtType.CreateVariables)':
                script.compType = '@(CompStmtType.CreateVariables)';
                script.variable = {
                    name: "",
                    type: "",
                    value: ""
                }
                break;
            case '@(CompStmtType.SetVariables)':
                script.compType = '@(CompStmtType.SetVariables)';
                script.variable = {
                    name: "",
                    value: ""
                }
                break;
            case '@(CompStmtType.QueryVariables)':
                script.compType = '@(CompStmtType.QueryVariables)';
                script.variable = {
                    name: "",
                    targetPath: "",
                    targetName: ""
                }
                break;
            case '@(CompStmtType.CheckCondition)':
                script.compType = '@(CompStmtType.CheckCondition)';
                script.condition = "";
                break;
            case '@(CompStmtType.ConditionalBranching)':
                script.compType = '@(CompStmtType.ConditionalBranching)';
                script.condition = "";
                script.yes = [];
                script.not = [];
                break;
            case '@(CompStmtType.SetNodeToWait)':
                script.compType = '@(CompStmtType.SetNodeToWait)';
                script.waitNodes = "";
                break;
            case '@(CompStmtType.SendMessage)':
                script.compType = '@(CompStmtType.SendMessage)';
                script.message = "";
                break;
            default:
                break;
            }
            var parentComp = GetComponentByPath(parentPath);
            parentComp.push(script);
            console.log("component", type, parentComp, _ComponentDataArray);
            ParseSingleComponent(script,0,$this);
        }
        //解析单个组件
        function ParseSingleComponent(data,index,$that) {
            switch (data.compType) {
            case '@(CompStmtType.CreateVariables)':
                CreateVariables(data, index,$that);
                break;
            case '@(CompStmtType.SetVariables)':
                SetVariables(data, index,$that);
                break;
            case '@(CompStmtType.QueryVariables)':
                QueryVariables(data, index,$that);
                break;
            case '@(CompStmtType.CheckCondition)':
                CheckCondition(data, index,$that);
                break;
            case '@(CompStmtType.ConditionalBranching)':
                ConditionalBranching(data, index,$that);
                break;
            case '@(CompStmtType.SetNodeToWait)':
                SetNodeToWait(data, index,$that);
                break;
            case '@(CompStmtType.SendMessage)':
                SendMessage(data, index,$that);
                break;
            default:
                break;
            }

        }
        //解析组件
        function ParseComponent(data, $that) {
            $that = $that || $('#step-box');
            $that.empty();
            if (data && data.length > 0) {
                var i = 0;
                data.forEach(function (v) {
                    if (v.id) {
                        i++;
                        ParseSingleComponent(v, i, $that);
                    }
                });
            }
        }

        //删除
        function DeleteComponent($this) {
            MsgConfirm("确认删除事务吗？",
                "删除事务",
                function() {
                    var $that = $($this).closest('.' + _StepDetailClass);
                    var path = $that.data('parent-path');
                    var parentData = GetComponentByPath(path);
                    if (parentData) {
                        var id = $that.data('id');
                        var index = parentData.findIndex(function(v) {
                            return v.id == id;
                        });
                        if (index > -1) {
                            parentData.splice(index, 1);
                            //$this.remove();
                            ParseComponent(_ComponentDataArray);
                            return;
                        }
                    }
                    abp.message.warn("数据异常，请检查后再试！");
                });


        }

        //获取Component
        function GetComponentByPath(path,data) {
            data = data || _ComponentDataArray;
            if (path) {
                var pathArr = path.split("_");
                var id = pathArr.shift();
                if (id) {
                    var newPath = pathArr.join("_");
                    return GetComponentChildren(id, data, newPath);
                } else {
                    return GetComponentById(id, data);
                }
            } else {
                return data;
            }
        }
        function GetComponentChildren(id, data,path) {
            var dataArr;
            if (data.compType === '@(CompStmtType.ConditionalBranching)') {
                switch (id) {
                case "yes":
                    dataArr = data.yes;
                    break;
                case "not":
                    dataArr = data.not;
                    break;
                }
            } else {
                dataArr = GetComponentById(id, data);
            }
            if (path) {
                dataArr = GetComponentByPath(path, dataArr);
            }
            return dataArr;
        }
        function GetComponentById(id, data) {
            data = data || _ComponentDataArray;
            return data.find(function(v) {
                return id === v.id;
            });
        }
        //创建Step Html
        function CreateStepDetail(opt) {
            opt = opt || {};
            var data = opt.data;
            var $stepDetail = $('<div>',
                {
                    'class': _StepDetailClass,
                    data: {
                        id: data.id,
                        path: data.path,
                        type: data.type,
                        parentPath: data.parentPath
                    }
                });
            var count = opt.index ? opt.index : GetComponentByPath(data.parentPath).length;
            var $stepIndex = $(_StepIndex.format(count));
            var $stepContent = $('<div>', { 'class': _StepContentClass })
                .append($(_StepContentTitle.format(opt.name, opt.text))
                    .tooltip({ 'title': "双击编辑事务组件", 'placement': 'bottom', 'container': 'body', 'delay': 1200 })
                    .on('dblclick', opt.dbFun));
            $stepDetail.append($stepIndex).append($stepContent);
            return $stepDetail;
        }
    </script>

    <script id="variable-s">
        var variableType = '<option value="">请选择变量类型...</option><option value="string">字符串</option><option value="decimal">数字</option><option value="date">时间</option>';
        //创建变量
        function CreateVariables(data,index,$that) {
            $that = $that || $('#step-box');
            var variable = data.variable;
            var opt = {
                data: data,
                index: index,
                name: "创建变量",
                text: variable.name? "@@" + variable.name + (variable.value ? "=" + variable.value : ""):"",
                dbFun: function() {
                    VariableEdit(data.path, 0);
                }
            };
            var $stepDetail = CreateStepDetail(opt);
            $that.append($stepDetail);
            console.log("CreateVariables",data.id);

        }
        //变量赋值
        function SetVariables(data, index, $that) {
            $that = $that || $('#step-box');
            var variable = data.variable;
            var opt = {
                data: data,
                index: index,
                name: "变量赋值",
                text: variable.name ? "@@" + variable.name +  "=" + variable.value : "",
                dbFun: function () {
                    VariableEdit(data.path, 1);
                }
            };
            var $stepDetail = CreateStepDetail(opt);
            $that.append($stepDetail);
            console.log("SetVariables",data.id);
        }

        //编辑变量
        function VariableEdit(path,isSet) {
            var variableOption = GetVariableOption();
            var data = GetComponentByPath(path);
            var str = '', str1 = '', layout = isSet ? 'col-sm-6' : 'col-sm-4';
            str += _ModalHeader.format("变量编辑器");
            str1 += _InputHidden.format('id', data.id);
            str1 += '<div class="dynamic-box" style="">';
            str1 += '<div class="row iwb-dynamic-box">' + _Label.format(layout, "变量") + (isSet ? "":_Label.format(layout, "类型") )+ _Label.format(layout,"默认值") + '</div>';
            str1 += '<div class="row iwb-dynamic-box ">';
            str1 += _InputGroup.format(isSet ? 'col-sm-6' : 'col-sm-4', isSet ? _RequiredSelect.format('name', variableOption):_RequiredInput.format('name', '变量'));
            str1 += isSet ? "" : _InputGroup.format('col-sm-4', _RequiredSelect.format('type', variableType));
            str1 += _InputGroupExpr.format(isSet ? 'col-sm-6' : 'col-sm-4',_Input.format('value', '默认值'));
            //str1 += '<div class="col-sm-2"><button class="btn btn-sm btn-block btn-add" type="button" onclick="AddDynamicBox(this)">增加</button></div>';
            str1 += '</div>';
            str1 += '</div>';
            str += _ModalBody.format(str1);
            str += _ModalFooter;
            var varData = $.extend({}, data).variable || {};
            $(document).iwbModal('create',{
                modalId: "modal-variable",
                content: str,
                data: varData,
                save: function() {
                    var $that = $('#modal-variable');
                    var n = $that.find('.form-control[name="name"]').val(), v = $that.find('.form-control[name="value"]').val(), t = $that.find('.form-control[name="type"]').val();
                    if (n && (!isSet || v)) {
                        if (!/@@?[0-9,a-z,A-Z]+/.test(n)) {
                            abp.message.warn("变量名不合法[字母、数字]！");
                            return;
                        }
                        var variable = {};
                        variable.name = n;
                        variable.value = v;
                        if (!isSet) {
                            variable.type = t;
                        }
                        data.variable = variable;
                        console.log('VariableSave', variable, _ComponentDataArray);
                        ParseComponent(_ComponentDataArray);
                    }
                    $that.modal("hide");
                }
            });
        }

        
        @if(Model == "package") {
            <text>
                //变量查询赋值
                function QueryVariables(data, index, $that) {
                    $that = $that || $('#step-box');
                    var variable = data.variable;
                    var opt = {
                        data: data,
                        index: index,
                        name: "变量查询赋值",
                        text: variable.name ? "@@" + variable.name + "=" + variable.targetPath + "$" + variable.targetName : "",
                        dbFun: function () {
                            QueryVariableEdit(data.path);
                        }
                    };
                    var $stepDetail = CreateStepDetail(opt);
                    $that.append($stepDetail);
                    console.log("QueryVariables", data.id);
                }

                //编辑变量
                function QueryVariableEdit(path) {
                    var variableOption = GetVariableOption(false);
                    var nodePathOption = GetNodePath();
                    var data = GetComponentByPath(path);
                    var str = '', str1 = '', layout = 'col-sm-3';
                    str += _ModalHeader.format("变量编辑器");
                    str1 += _InputHidden.format('id', data.id);
                    str1 += '<div class="dynamic-box" style="">';
                    str1 += '<div class="row iwb-dynamic-box">' + _Label.format(layout, "变量") + (_Label.format(layout, "目标路径1")) +_Label.format(layout, "目标路径2") +
                        _Label.format(layout, "目标变量") + '</div>';
                    str1 += '<div class="row iwb-dynamic-box ">';
                    str1 += _InputGroup.format(layout,  _RequiredSelect.format('name', variableOption));
                    str1 += _InputGroup.format(layout, _RequiredSelect.format('targetPath', nodePathOption));
                    str1 += _InputGroup.format(layout, _Select.format('targetPath2', ''));

                    str1 += _InputGroupExpr.format(layout, _Input.format('targetName', '目标变量'));
                    //str1 += '<div class="col-sm-2"><button class="btn btn-sm btn-block btn-add" type="button" onclick="AddDynamicBox(this)">增加</button></div>';
                    str1 += '</div>';
                    str1 += '</div>';
                    str += _ModalBody.format(str1);
                    str += _ModalFooter;
                    var varData = $.extend({}, data).variable || {};
                    $(document).iwbModal('create', {
                        modalId: "modal-variable",
                        content: str,
                        data: varData,
                        shownAfter: function() {
                            @*if ('@(Model)' == 'package') {
                                
                            }*@
                            var $that = $('#modal-variable');
                            if (varData.targetPath2) {
                                var arr = varData.targetPath2.split('$');
                                var flowNo = arr[0].substr(arr[0].indexOf('_')+1);
                                flowNo = flowNo.substr(flowNo.indexOf('_')+1);
                                flowNo = flowNo.substr(flowNo.indexOf('_')+1);
                                flowNo = flowNo.substr(0,flowNo.indexOf('_'));
                                $that.find('.form-control[name="targetPath"]').val(flowNo);
                                var flowStr = GetChildNodePath(null, flowNo);
                                $that.find('.form-control[name="targetPath2"]').html(flowStr).val(arr[1]).select2tree();
                            } else {
                                $that.find('.form-control[name="targetPath2"]').val('0').select2tree();
                            }
                            $that.find('.form-control[name="targetPath"]').select2tree();

                            $that.find('.form-control[name="targetPath"]').off('change.path').on('change.path',
                                function() {
                                    var flowStr2= GetChildNodePath($(this));
                                    $that.find('.form-control[name="targetPath2"]').html(flowStr2).val('0').select2tree();
                                });
                        },
                        save: function () {
                            var $that = $('#modal-variable');
                            var n = $that.find('.form-control[name="name"]').val(), tp = $that.find('.form-control[name="targetPath"]').val(), tn = $that.find('.form-control[name="targetName"]').val();
                            if (n) {
                                if (tn) {
                                    if (!/ *@@{1,2}[0-9,a-z,A-Z]+/.test(tn)) {
                                        abp.message.warn("目标变量名不合法[@@XXX、@@@@XXX]！");
                                        return;
                                    }
                                }
                                var variable = {};
                                variable.name = n;
                                @*if ('@(Model)' == 'package') {

                                } else {
                                    variable.targetPath = tp;
                                }*@

                                if ($that.find('.form-control[name="targetPath"]').find('option:selected').data('type') ==
                                    'flow') {
                                    var path = $that.find('.form-control[name="targetPath"]').find('option:selected')
                                        .attr('parent');
                                    variable.targetPath = path + '_' + tp;
                                    var tp2 = $that.find('.form-control[name="targetPath2"]').val();
                                    if (tp2 && tp2 != "0") {
                                        variable.targetPath = variable.targetPath + '_' + tp2;
                                        variable.targetPath2 = variable.targetPath + '$' + tp2;
                                    }
                                } else {
                                    variable.targetPath = tp;
                                }
                                variable.targetName = tn;
                                data.variable = variable;
                                console.log('QueryVariableSave', variable, _ComponentDataArray);
                                ParseComponent(_ComponentDataArray);
                            }
                            $that.modal("hide");
                        }
                    });
                }
            </text>
        }


        function GetVariableOption(hasSys) {
            var str = '<option value="">请选择变量...</option>';
            var compVariables = GetComponentVariable();
            if (compVariables.length > 0) {
                str += '<optgroup label="组件变量">';
                compVariables.forEach(function (v) {
                    str += '<option value="{0}">{1}</option>'.format(v.substr(1),v);
                });
                str += '</optgroup>';
            }
            var sceneVariables = GetSceneVariable();
            if (sceneVariables.length > 0) {
                str += '<optgroup label="情景变量">';
                sceneVariables.forEach(function (v) {
                    str += '<option value="{0}">{1}</option>'.format(v.substr(1),v);
                });
                str += '</optgroup>';
            }
            hasSys = hasSys == undefined ? true : hasSys;
            if (hasSys) {
                str += '<optgroup label="系统默认变量">';
                str += '@(Html.Raw(sysVarSelect))';
                str += '</optgroup>';
            }
            return str;
        }
        function GetComponentVariable() {
            var data=  _ComponentDataArray.filter(function(v) {
                var flag = false;
                if (v.compType && v.compType === '@(CompStmtType.CreateVariables)') {
                    flag = v.variable.name ? true : false;
                }
                return flag;
            });
            var variables = [];
            data.forEach(function(v) {
                variables.push('@@' + v.variable.name);
            });
            return variables;
        }
        function GetPackageVariable() {

            var variables = [];
            window._PackageVariable.forEach(function(v) {
                variables.push('@@@@' + v.name);
            });
            return variables;
        }

        function GetSceneVariable() {
            var sceneVariables = $('#modal-component #sceneVariables').val();
            var variables = [];
            if (sceneVariables) {
                var arr = sceneVariables.match(new RegExp('@@[0-9,a-z,A-Z]*',"g"));
                arr.forEach(function (v) {
                    variables.push(v);
                });
            }
            return variables;
        }

        function GetNodePath() {
            var str = '<option value="0" parent="">请选择节点...</option>';
            if ('@(Model)' == 'package') {
                var arr1 = GetNodePathArr(window._PackageTreeData);
                if (arr1 && arr1.length > 0) {
                    //str += '<optgroup label="方案包节点">';
                    arr1.forEach(function(v) {
                        var arr = v ? v.split('|') : undefined;
                        if (arr && arr.length == 2) {
                            str += '<option value="{0}" parent="{1}">{0}</option>'.format(arr[1], arr[0]);
                            if (arr[1].split('_').length == 3) {
                                var node = window.GetDataByPath(arr[1]);
                                if (node && node.flowNos) {
                                    var flowNoArr = node.flowNos.split(','), flowNameArr = node.flowNames.split(',');
                                    for (var i = 0; i < flowNoArr.length; i++) {
                                        var v1 = flowNoArr[i], v2 = flowNameArr[i] ? flowNameArr[i] : v1;
                                        str += '<option value="{0}" data-type="flow" parent="{1}">{2}</option>'
                                            .format(v1, arr[1], v2);
                                    }
                                }
                            }
                        }

                    });
                    // str += '</optgroup>';
                }

            } else {
                var arr2 = GetNodePathArr(window._FlowTreeData);
                if (arr2 && arr2.length > 0) {
                    //str += '<optgroup label="情景流节点">';
                    arr2.forEach(function (v) {
                        if (v) {
                            var arr = v.split('|');
                            str += '<option value="{0}" parent="{1}">{0}</option>'.format(arr[1], arr[0]);
                        }
                    });
                    //str += '</optgroup>';
                }
            }


            return str;
        }

        function GetChildNodePath(that,flowNo) {
            var str = '<option value="0" parent="">请选择节点...</option>';
            if (that && $(that).find('option:selected').data('type') != 'flow') {
                return str;
            }
            flowNo = flowNo || $(that).val();
            if (!flowNo) {
                return str;
            }
            $.iwbAjax4({
                url: abp.appUrl + 'Query/QuerySceneFlowByNo?no=' + flowNo,
                async:false,
                success: function (res) {
                    if (res) {
                        $(document).data('flow', res);
                    }
                }
            });
            var flow = $(document).data('flow');
            if (!flow) {
                return str;
            }
            var data = flow.contentInfo ? JSON.parse(flow.contentInfo) : undefined;
            str = '<option value="0" parent="">[' + flow.flowName +']节点...</option>';
            var arr2 = GetNodePathArr(data);
            if (arr2 && arr2.length > 0) {
                // str += '<optgroup label="' + flow.flowName+'节点">';
                arr2.forEach(function (v) {
                    if (v) {
                        var arr = v.split('|');
                        str += '<option value="{0}" parent="{1}">{0}</option>'.format(arr[1], arr[0]);
                    }
                });
                //str += '</optgroup>';
            }
            return str;
        }

        function GetNodePathArr(data,arr,parentPath) {
            arr = arr || [];
            parentPath = parentPath || "";
            if (data && data.path) {
                arr.push(parentPath+'|'+data.path);
            }
            if (data.children && data.children.length > 0) {
                data.children.forEach(function(v) {
                    GetNodePathArr(v, arr, data.path);
                });
            }
            return arr;
        }

    </script>

    <script id="condition-s">
        function ConditionalBranching(data, index, $that) {
            $that = $that || $('#step-box');
            var id = data.id, condition = data.condition, yes = data.yes, not = data.not;
            var opt = {
                data: data,
                index: index,
                name: "条件：",
                text: condition ? condition : "",
                dbFun: function () {
                    ConditionEdit(data.path);
                }
            };
            var $stepDetail = CreateStepDetail(opt);
            var str = '';
            str += '<div class="card card-primary card-outline card-outline-tabs" style="margin:10px;border-top-color:transparent;">' +
                '<div class="card-header p-0 border-bottom-0">' +
                '<ul class="nav nav-tabs" id="condition-tab-'+id+'">' +
                '<li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#condition-yes-' + id +'">Yes</a></li>' +
                '<li class="nav-item"><a class="nav-link" data-toggle="pill" href="#condition-not-' + id +'">No</a></li>' +
                '</ul>' +
                '</div>' +
                '<div class="card-body" style="padding: 5px; ">' +
                '<div class="tab-content" id="condition-tabContent-' + id +'">' +
                '<div class="tab-pane fade active show" id="condition-yes-' + id + '" role="tabpanel"><div class="step-box" data-path="' + data.path + '_yes" data-id="' + id +'"></div></div>' +
                '<div class="tab-pane fade" id="condition-not-' + id + '" role="tabpanel"><div class="step-box" data-path="' + data.path + '_not" data-id="' + id +'"></div></div>' +
                '</div>' +
                '</div>' +
                '</div>';

            $stepDetail.find('.' + _StepContentClass).append(str);
            $that.append($stepDetail);
            if (yes && yes.length > 0) {
                ParseComponent(yes, $stepDetail.find('#condition-yes-' + id).find('.step-box'));
            }
            if (not && not.length > 0) {
                ParseComponent(not, $stepDetail.find('#condition-not-' + id).find('.step-box'));
            }

            Bind();
            console.log("ConditionalBranching", data.id);
        }
        //编辑条件
        function ConditionEdit(path) {
            var data = GetComponentByPath(path);
            var str = '', str1 = '', layout =  'col-sm-12';
            str += _ModalHeader.format("条件编辑器");
            str1 += _InputHidden.format('id', data.id);
            str1 += _Label.format(layout, "条件表达式");
            str1 += _InputGroupExpr.format(layout, _InputTextarea.format('condition', '条件'));
            str += _ModalBody.format(str1);
            str += _ModalFooter;
            var varData = $.extend({},data);

            $(document).iwbModal('create',{
                modalId: "modal-condition",
                content: str,
                data: varData,
                save: function () {
                    var $that = $('#modal-condition');
                    var condition = $that.find('.form-control[name="condition"]').val();
                    if (condition ) {
                        if (!/[=,||,&&,>,<,@@]+/.test(condition)) {
                            abp.message.warn("条件不合法！");
                            return;
                        }
                        data.condition = condition;
                        console.log('ConditionSave', condition, _ComponentDataArray);
                        ParseComponent(_ComponentDataArray);
                    }
                    $that.modal("hide");
                }
            });
        }
    </script>

    <script id="checkCondition-s">
        function CheckCondition(data, index, $that) {
            $that = $that || $('#step-box');
            var condition = data.condition;
            var opt = {
                data: data,
                index: index,
                name: "检验条件：",
                text: condition ? condition : "",
                dbFun: function () {
                    ConditionEdit(data.path);
                }
            };
            var $stepDetail = CreateStepDetail(opt);
            
            $that.append($stepDetail);
            console.log("ConditionalBranching", data.id);
        }
    </script>

    <script id="setNodeToWait-s">
        @if(Model == "package") {
            <text>
                function SetNodeToWait(data, index, $that) {
                    $that = $that || $('#step-box');
                    var waitNodes = data.waitNodes;
                    var opt = {
                        data: data,
                        index: index,
                        name: "等待节点运行结束",
                        text: waitNodes ? "节点路径：" + waitNodes : "",
                        dbFun: function () {
                            NodePathEdit(data.path);
                        }
                    };
                    var $stepDetail = CreateStepDetail(opt);

                    $that.append($stepDetail);
                    console.log("SetNodeToWait", data.id);
                }
                //编辑等待节点路径
                function NodePathEdit(path) {
                    var nodePathOption = GetNodePath();
                    var data = GetComponentByPath(path);
                    var str = '', str1 = '', layout = 'col-sm-6';
                    str += _ModalHeader.format("等待节点路径编辑器");
                    str1 += _InputHidden.format('id', data.id);
                    //str1 += _Label.format(layout, "节点路径");
                    //str1 += _InputGroupExpr.format(layout, _InputTextarea.format('nodePath', '节点路径'));
                    str1 += '<div class="dynamic-box" style="">';
                    str1 += '<div class="row iwb-dynamic-box">' + _Label.format(layout, "变量") + (_Label.format(layout, "目标路径1")) +_Label.format(layout, "目标路径2") +'</div>';
                    str1 += '<div class="row iwb-dynamic-box ">';
                    str1 += _InputGroup.format(layout, _RequiredSelect.format('targetPath', nodePathOption));
                    str1 += _InputGroup.format(layout, _Select.format('targetPath2', ''));

                    //str1 += '<div class="col-sm-2"><button class="btn btn-sm btn-block btn-add" type="button" onclick="AddDynamicBox(this)">增加</button></div>';
                    str1 += '</div>';
                    str1 += '</div>';
                    str += _ModalBody.format(str1);
                    str += _ModalFooter;
                    var varData = $.extend({}, data);

                    $(document).iwbModal('create', {
                        modalId: "modal-waitNode",
                        content: str,
                        data: varData,
                        shownAfter: function() {
                            @*if ('@(Model)' == 'package') {

                            }*@
                            var $that = $('#modal-waitNode');
                            if (varData.waitNodes2) {
                                var arr = varData.waitNodes2.split('$');
                                var flowNo = arr[0].substr(arr[0].indexOf('_')+1);
                                flowNo = flowNo.substr(flowNo.indexOf('_')+1);
                                flowNo = flowNo.substr(flowNo.indexOf('_')+1);
                                flowNo = flowNo.substr(0,flowNo.indexOf('_'));
                                $that.find('.form-control[name="targetPath"]').val(flowNo);
                                var flowStr = GetChildNodePath(null, flowNo);
                                $that.find('.form-control[name="targetPath2"]').html(flowStr).val(arr[1]).select2tree();
                            } else {
                                $that.find('.form-control[name="targetPath2"]').val('0').select2tree();
                            }
                            $that.find('.form-control[name="targetPath"]').select2tree();

                            $that.find('.form-control[name="targetPath"]').off('change.path').on('change.path',
                                function() {
                                    var flowStr2= GetChildNodePath($(this));
                                    $that.find('.form-control[name="targetPath2"]').html(flowStr2).val('0').select2tree();
                                });
                        },
                        save: function () {
                            var $that = $('#modal-waitNode');
                            var tp = $that.find('.form-control[name="targetPath"]').val();
                            if (tp) {
                                @*if ('@(Model)' == 'package') {

                                } else {
                                    variable.targetPath = tp;
                                }*@

                                if ($that.find('.form-control[name="targetPath"]').find('option:selected').data('type') ==
                                    'flow') {
                                    var path = $that.find('.form-control[name="targetPath"]').find('option:selected')
                                        .attr('parent');
                                    data.waitNodes = path + '_' + tp;
                                    var tp2 = $that.find('.form-control[name="targetPath2"]').val();
                                    if (tp2 && tp2 != "0") {
                                        data.waitNodes = data.waitNodes + '_' + tp2;
                                        data.waitNodes2 = data.waitNodes + '$' + tp2;
                                    }
                                } else {
                                    data.waitNodes = tp;
                                }
                               
                                console.log('SetNodeToWaitSave', data.waitNodes, _ComponentDataArray);
                                ParseComponent(_ComponentDataArray);
                            }
                            $that.modal("hide");
                        }
                    });
                }
            </text>
        }

    </script>

    <script id="sendMessage-s">
        function SendMessage(data, index, $that) {
            $that = $that || $('#step-box');
            var message = data.message;
            var opt = {
                data: data,
                index: index,
                name: "发送消息",
                text: message ? "内容：" + message : "",
                dbFun: function () {
                    MessageEdit(data.path);
                }
            };
            var $stepDetail = CreateStepDetail(opt);

            $that.append($stepDetail);
            console.log("sendMessage", data.id);
        }
        //编辑消息
        function MessageEdit(path) {
            var data = GetComponentByPath(path);
            var str = '', str1 = '', layout = 'col-sm-12';
            str += _ModalHeader.format("消息编辑器");
            str1 += _InputHidden.format('id', data.id);
            str1 += _Label.format(layout, "消息内容");
            str1 += _InputGroupExpr.format(layout, _InputTextarea.format('message', '消息内容'));
            str += _ModalBody.format(str1);
            str += _ModalFooter;
            var varData = $.extend({}, data);

            $(document).iwbModal('create', {
                modalId: "modal-message",
                content: str,
                data: varData,
                save: function () {
                    var $that = $('#modal-message');
                    var message = $that.find('.form-control[name="message"]').val();
                    if (message) {
                        data.message = message;
                        console.log('MessageSave', message, _ComponentDataArray);
                        ParseComponent(_ComponentDataArray);
                    }
                    $that.modal("hide");
                }
            });
        }
    </script>

    <script id="express-s">
        var _ExpressInputPosition=0;
        function Express(that) {
            var $this = $(that).parent().find('.form-control');
            var expression = $this.val();
            var str = '', str1 = '', layout = 'col-sm-12';
            var compVariable = GetComponentVariable(), sceneVariable= GetSceneVariable(),sysVariable = @(Html.Raw(sysVarList)),sysFuns = @(Html.Raw(sysFunList));


            str += _ModalHeader.format("表达式编辑器");
            str1 += _Label.format(layout, "表达式");
            str1 += _InputGroup.format(layout, _InputTextarea.format('expression', '表达式'));
            str1 += '<div class="row" style="margin-top:10px;padding:12px;">';

            str1 += '<div class="col-5 col-sm-3" style="padding-right: 0;">';
            str1 += '<div class="nav flex-column nav-tabs h-100">';
            str1 += '<a class="nav-link active" data-toggle="pill" href="#express-tabs-sys" >系统变量</a>';
            @if (Model=="package")
            {
                <text>
                    var packageVariable = GetPackageVariable();
                    str1 += packageVariable.length <= 0 ? '' : '<a class="nav-link" data-toggle="pill" href="#express-tabs-package" >方案包全局变量</a>';
                </text>
            }
            
            str1 += compVariable.length <= 0 ? '' : '<a class="nav-link" data-toggle="pill" href="#express-tabs-custom" >组件变量</a>';
            str1 += sceneVariable.length <= 0 ? '' : '<a class="nav-link" data-toggle="pill" href="#express-tabs-scene" >情景变量</a>';
            str1 += '<a class="nav-link" data-toggle="pill" href="#express-tabs-fun" >表达式函数</a>';
            str1 += '<a class="nav-link" data-toggle="pill" href="#express-tabs-operation" >运算符</a>';
            str1 += '</div>';
            str1 += '</div>';

            str1 += '<div class="express-box col-7 col-sm-9" style="padding-left: 0;padding-right: 0;">';
            str1 += '<div class="tab-content">';
            str1 += '<div class="tab-pane text-left fade show active" id="express-tabs-sys">';
            str1 += FormatterVariable2HtmlList(sysVariable);
            str1 += '</div>';
            @if (Model=="package")
            {
                <text>
           
                    if (packageVariable.length>0) {
                        str1 += '<div class="tab-pane text-left fade" id="express-tabs-package">';
                        str1 += FormatterVariable2HtmlList(packageVariable);
                        str1 += '</div>';
                    }
                </text>
            }

            if (compVariable.length>0) {
                str1 += '<div class="tab-pane text-left fade" id="express-tabs-custom">';
                str1 += FormatterVariable2HtmlList(compVariable);
                str1 += '</div>';
            }
            if (sceneVariable.length>0) {
                str1 += '<div class="tab-pane text-left fade" id="express-tabs-scene">';
                str1 += FormatterVariable2HtmlList(sceneVariable);
                str1 += '</div>';
            }
            str1 += '<div class="tab-pane text-left fade" id="express-tabs-fun">';
            str1 += FormatterFun2HtmlList(sysFuns);
            str1 += '</div>';
            str1 += '<div class="tab-pane text-left fade" id="express-tabs-operation">';
            str1 += FormatterVariable2HtmlList([
                { value: "+", name: "加" },
                { value: "-", name: "减" },
                { value: "*", name: "乘" },
                { value: "/", name: "除" },
                { value: "=", name: "等于" },
                { value: "!=", name: "不等于" },
                { value: "||", name: "或" },
                { value: "&&", name: "与" },
                { value: "<", name: "小于" },
                { value: ">", name: "大于" },
                { value: "( )", name: "括号" },
                { value: "( ", name: "左括号" },
                { value: " )", name: "右括号" },
                { value: ">=", name: "不小于" },
                { value: "<=", name: "不大于" }
            ]);
            str1 += '</div>';
            str1 += '</div>';
            str1 += '</div>';

            str1 += '</div>';

            str += _ModalBody.format(str1);
            str += _ModalFooter;
            $(document).iwbModal('create', {
                modalId: 'modal-express',
                shownBefore: function () {
                    var $modal = $('#modal-express');
                    $modal.find('[data-toggle="tooltip"]').tooltip({ 'placement': 'bottom', 'container': 'body', 'delay': 1200 });
                    $modal.find('.form-control[name="expression"]').on('blur', function () {
                        _ExpressInputPosition = GetCursorPosition($(this));
                        console.log("InputPosition", _ExpressInputPosition);
                    });
                },
                content: str,
                data: { expression: expression },
                save: function () {
                    var $modal = $('#modal-express');
                    var expression = $modal.find('.form-control[name="expression"]').val();
                    $this.val(expression);
                    _ExpressInputPosition = 0;
                    console.log('ExpressionSave', expression);
                    $modal.modal("hide");
                }
            });
        }

        function FormatterVariable2HtmlList(data) {
            var str = '';
            if (data && data.length > 0) {
                str += '<div class="dropdown-menu show variables">';
                data.forEach(function (v) {
                    var value=v, name=v;
                    if (typeof v === 'object') {
                        value = v.value;
                        name = v.name;
                    }
                    str += '<a class="dropdown-item" data-value="{0}" href="javascript:void(0)" onclick="SetExpressVariable(this)">{1}</a>'.format(value,name);
                });
                str += '</div>';
            }
            return str;
        }
        function FormatterFun2HtmlList(data) {
            var str = '';
            if (data && data.length > 0) {
                str += '<div class="dropdown-menu show variables">';
                data.forEach(function (v) {
                    str += '<a class="dropdown-item" data-value="{0}" title="{1}" data-toggle="tooltip" href="javascript:void(0)" onclick="SetExpressVariable(this)">{2}</a>'.format(v.Id + "(" + v.FunctionParam + ")", v.FunctionDesc, v.FunctionName);
                });
                str += '</div>';
            }
            return str;
        }
        //变量|函数 填写到表达式中
        function SetExpressVariable(that) {
            var value = ' ' + $(that).data('value') + ' ';
            var $modal = $('#modal-express');
            var expression = $modal.find('.form-control[name="expression"]').val();
            var newVal = expression
                ? (_ExpressInputPosition == 0
                    ? value + expression
                    : expression.slice(0, _ExpressInputPosition) + value + expression.slice(_ExpressInputPosition))
                : value;
            var $expr = $modal.find('.form-control[name="expression"]').val(newVal).focus();
            SetCaretPosition($expr, _ExpressInputPosition + value.length);
        }

        //获取光标位置
        function GetCursorPosition(that) {
            var el = $(that).get(0);
            var pos = 0;
            if ('selectionStart' in el) {
                pos = el.selectionStart;
            } else if ('selection' in document) {
                el.focus();
                var Sel = document.selection.createRange();
                var SelLength = document.selection.createRange().text.length;
                Sel.moveStart('character', -el.value.length);
                pos = Sel.text.length - SelLength;
            }
            return pos;
        }

        //定位光标
        function SetCaretPosition($this, pos) {
            var el = $this.get(0);
            if (el.setSelectionRange) {
                el.focus();
                el.setSelectionRange(pos, pos);
            }
            else if (el.createTextRange) {
                var range = el.createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }
        }

    </script>    
}