@{
    Layout = null;
}

<script src="/Scripts/jquery.js"></script>
<script src="/Scripts/jquery-ui.js"></script>
<link href="/Content/style.css" rel="stylesheet" />
<link href="/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<script src="/Scripts/kinetic-v5.1.0.min.js"></script>
<link href="/Content/workflowdesigner.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/workflowdesigner.min.js"></script>
<script src="/Scripts/ace.js"></script>
<script src="/Scripts/json5.js"></script>
<script src="/BllScripts/queryString.js"></script>

<table>
    <tr>
        <td>大小:</td>
        <td><input id="graphwidth" value="1200" /> x <input id="graphheight" value="600" /></td>
        <td><button onclick="wfdesignerRedraw()">缩放</button></td>
        <td>
            |
        </td>
        <td><label class="msg-wrap">*模板名称</label></td>
        <td><input value="" id="schemeName" /></td>
        <td><button class="btn btn-primary" onclick="OnSave()">保存</button></td>
        <td><button class="btn btn-red" onclick="javascript: window.history.go(-1)">返回</button></td>
    </tr>
</table>
<br />
<div id="wfdesigner"></div>

<script>
    var schemecode = QueryString["schemeName"];
    var inputScheme = $("#schemeName");
    var add = schemecode == "" ? true : false;
    if (!add) {
        inputScheme.val(schemecode);
        inputScheme.attr("readonly", "readonly");
    }

    var wfdesigner = undefined;

    function wfdesignerRedraw() {
        var data;

        if (wfdesigner != undefined) {
            data = wfdesigner.data;
            wfdesigner.destroy();
        }

        wfdesigner = new WorkflowDesigner({
            name: 'simpledesigner',
            apiurl: '/Designer/API',
            renderTo: 'wfdesigner',
            imagefolder: '/images/',
            graphwidth: $('#graphwidth').val(),
            graphheight: $('#graphheight').val()
        });

        if (add) {
            wfdesigner.create();
        } else {
            if (data == undefined) {
                var isreadonly = false;
                var p = { schemecode: schemecode, readonly: isreadonly };
                if (wfdesigner.exists(p))   //如果已经存在
                    wfdesigner.load(p);
            } else {
                wfdesigner.data = data;
                wfdesigner.render();
            }
        }

    }

    wfdesignerRedraw();

    function OnSave() {
        if (inputScheme.val().length == 0) {
            alert("请输入模板名称");
            return;
        }
        wfdesigner.schemecode = inputScheme.val();
        var err = wfdesigner.validate();
        if (err != undefined && err.length > 0) {
            alert(err);
        } else {
            wfdesigner.save(function () {
                alert('保存成功');
            });
        }
    }
</script>