@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}

<style type="text/css">
    .ui-select .ui-select-text {
        margin-bottom: 5px;
    }

    fieldset {
        padding: .35em .625em .75em;
        margin: 0 2px;
        border: 1px solid silver;
    }

    legend {
        padding: .5em;
        border: 0;
        width: auto;
    }
</style>

<script type="text/javascript">
    var meterId = request('keyValue');

    var AreaName = $.currentIframe().$("#pointGridTable").jqGridRowValue("AreaName");
    var BldgName = $.currentIframe().$("#pointGridTable").jqGridRowValue("BldgName");
    var ApmtName = $.currentIframe().$("#pointGridTable").jqGridRowValue("ApmtName");
    var RoomName = $.currentIframe().$("#pointGridTable").jqGridRowValue("RoomName");
    var data = {};
    data.AreaName = AreaName;
    data.BldgName = BldgName;
    data.ApmtName = ApmtName;
    data.RoomName = RoomName;
    $(function () {
        initControl();
    });

    //初始化控件
    function initControl() {
        //小区
        $("#AreaId").ComboBox({
            url: "/NBManage/NBHistorySearch/GetAreaListJson",
            id: "AreaId",
            text: "AreaName",
            description: "选择小区",
            height: "100px"
        }).bind("change", function () {
            value = $(this).attr('data-value');
            SetComboxInit("BldgId", "选择楼宇");
            SetComboxInit("ApmtId", "选择单元");
            SetComboxInit("RoomId", "选择房间");
            $("#BldgId").ComboBox({
                url: "/NBManage/NBHistorySearch/GetBldgListJson",
                param: { parentId: value },
                id: "BldgId",
                text: "BldgName",
                description: "选择楼宇",
                height: "100px"
            }).bind("change", function () {
                value = $(this).attr('data-value');
                SetComboxInit("ApmtId", "选择单元");
                SetComboxInit("RoomId", "选择房间");
                $("#ApmtId").ComboBox({
                    url: "/NBManage/NBHistorySearch/GetApmtListJson",
                    param: { parentId: value },
                    id: "ApmtId",
                    text: "ApmtName",
                    description: "选择单元",
                    height: "100px"
                }).bind("change", function () {
                    value = $(this).attr('data-value');
                    SetComboxInit("RoomId", "选择房间");
                    $("#RoomId").ComboBox({
                        url: "/NBManage/NBHistorySearch/GetRoomListJson",
                        param: { parentId: value },
                        id: "RoomID",
                        text: "RoomName",
                        description: "选择房间",
                        height: "100px"
                    });
                });
            })
        });
        function SetComboxInit(domId, text) {
            $("#" + domId).removeAttr('data-value');
            $("#" + domId).removeAttr('data-text');
            $("#" + domId + " .ui-select-text").text(text);
            $("#" + domId).ComboBoxTree({
                height: "100px"
            })
        }

        $("#RoomId").ComboBox({
            description: "选择房间",
            height: "100px"
        })
        $("#ApmtId").ComboBox({
            description: "选择单元",
            height: "100px"
        })
        $("#BldgId").ComboBox({
            description: "选择楼宇",
            height: "100px"
        })
        if (meterId) {
            $("#form1").SetWebControls(data);
        }
    }
    //保存表单
    function AcceptClick() {
        if (!$('#form2').Validform()) {
            return false;
        }
        var postData = $("#form2").GetWebControls();
        //postData 格式化 将&nbsp; 替换为 ""
        for (var i in postData) {
            if (postData[i] == "&nbsp;") {
                postData[i] = "";
            }
        }

        $.SaveForm({
            url: "/NBManage/NBUserManage/SaveMeterRemove",
            param: { "meterId": meterId, "jsonData": JSON.stringify(postData) },
            loading: "正在保存数据...",
            success: function () {
                $.currentIframe().$("#pointGridTable").resetSelection();
                $.currentIframe().$("#pointGridTable").trigger("reloadGrid");
            }
        })
    }
</script>
<div style="margin-left: 10px; margin-top: 20px; margin-right: 30px;">
    <fieldset>
        <legend>
            <i class="fa fa-edit"></i>&nbsp;旧位置
        </legend>
        <table id="form1" class="form">
            <tr>
                <td class="formValue" colspan="3">
                    <input id="AreaName" type="text" class="form-control" readonly style="float: left; width: 24%; margin-right: 3px;" />
                    <input id="BldgName" type="text" class="form-control" readonly style="float: left; width: 24%; margin-right: 3px;" />
                    <input id="ApmtName" type="text" class="form-control" readonly style="float: left; width: 24%; margin-right: 3px;" />
                    <input id="RoomName" type="text" class="form-control" readonly style="float: left; width: 24%; margin-right: 3px;" />
                </td>
            </tr>
        </table>
    </fieldset>
    <input type="hidden" id="MeterId" />
    <fieldset>
        <legend>
            <i class="fa fa-edit"></i>&nbsp;新位置
        </legend>
        <table id="form2" class="form">
            <tr>
                <td class="formValue" colspan="3">
                    <div id="queryCondition">
                        <div id="AreaId" type="select" class="ui-select" style="float: left; width: 24%; margin-right: 3px;" isvalid="yes" checkexpession="NotNull" ></div>
                        <div id="BldgId" type="select" class="ui-select" style="float: left; width: 24%; margin-right: 3px;" isvalid="yes" checkexpession="NotNull" ></div>
                        <div id="ApmtId" type="select" class="ui-select" style="float: left; width: 24%; margin-right: 3px;" isvalid="yes" checkexpession="NotNull" ></div>
                        <div id="RoomId" type="select" class="ui-select" style="float: left; width: 24%; margin-right: 3px;" isvalid="yes" checkexpession="NotNull" ></div>
                    </div>
                </td>
            </tr>
        </table>
    </fieldset>
</div>