<?xml version="1.0" encoding="UTF-8"?>
<h:screen xmlns:h="http://www.hand-china.com/hap">
    <style>
        html, body {
            background: #e9ecf3;
            /*height: 627px;*/
        }

        .bar-span {
            width: 125px;
            height: 30px;
            margin-left: 10px;
            line-height: 30px;
            border-radius: 2px;
            max-height: 32px;
            text-align: center;
            color: #fff;
            display: inline-block;
            overflow: hidden;
            background-color: #2EC3E8;
            cursor: pointer;
        }
    </style>
    <script id="script"><![CDATA[
    var viewModel = kendo.observable({})
    ]]></script>
    <div style="height: 350px;background: white;width: 475px;border-radius: 5px;box-shadow: 3px 3px 3px rgb(204, 204, 204);padding-top: 10px;margin-left: 40px;margin-top: 100px;padding-left: 10px;float: left;">
        <h2 style="margin-top: 10px">内容修改</h2>
        <h:hlsTextArea id="content" style="width:450px;height:250px;"></h:hlsTextArea>
        <span id="errorMessage" style="color: red;"></span>
    </div>
    <div id="titleBar"
         style="height: 350px;background: white;width: 300px;border-radius: 5px;box-shadow: 3px 3px 3px rgb(204, 204, 204);padding-top: 10px;margin-left: 40px;margin-top: 100px;padding-left: 10px;float: left;">

    </div>
    <h:hlsToolBar>
        <h:hlsButton id="save" text="提交修改"></h:hlsButton>
    </h:hlsToolBar>
    <script id="scriptB"><![CDATA[
    var iframe = getWindowObj("${base.contextPath}/weChat/wechat_notification.view").contentWindow
    document.getElementById("content").value = iframe.changedContent || '';
    $("#save").click(function () {
        iframe.changedContent = $("#content").val();
        window.parent.$("#" + "${RequestParameters.hlsWindowId}").data("kendoWindow").close();
    })

    function createBar() {
        var i = 0;
        var k = 0;
        var error = 0;
        var str = $("#content").val();
        document.getElementById("titleBar").innerHTML = '';
        //检验数据正确与否 生成右侧参数span
        i = str.indexOf("{", i) + 1;
        if (i > 0) {
            k = str.indexOf("}", k) + 1;
        } else {

        }
        if (k > i) {
            document.getElementById("titleBar").innerHTML += '<span class="bar-span" name="' + i + ',' + k + '" onclick="selectParam(' + i + ',' + k + ')">' + str.substring(i, k - 1) +
                '</span>';
        } else if (k != 0 && i != 0) {
            error++;
        }
        while (i > 0 && error == 0 && k >= 0) {
            debugger
            i = str.indexOf("{", i) + 1;
            if (i > 0) {
                k = str.indexOf("}", k) + 1;
            } else {
                if (str.indexOf("}", k) > 0) {
                    error++;
                }
                break;
            }
            if (k > i) {
                document.getElementById("titleBar").innerHTML += '<span class="bar-span" name="' + i + ',' + k + '" onclick="selectParam(' + i + ',' + k + ')">' + str.substring(i, k - 1) +
                    '</span>';
            } else {
                error++;
            }
        }
        if (error > 0) {
            $("#errorMessage").html("所写参数有误请检查")
        } else {
            $("#errorMessage").html("");
        }

    }

    //绑定事件
    $("#content").keydown(function () {
        createBar();
    })
    createBar();

    function selectParam(i, k) {
        $("#content").focus();
        document.getElementById("content").setSelectionRange(i, k - 1);
    }

    ]]></script>
</h:screen>