@{
    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 keyValue = request('keyValue');
    
    var MeterTypeName = $.currentIframe().$("#pointGridTable").jqGridRowValue("MeterTypeName");
    var ElecAddress = $.currentIframe().$("#pointGridTable").jqGridRowValue("ElecAddress");
    var IMEI = $.currentIframe().$("#pointGridTable").jqGridRowValue("IMEI");
    var NBDevTypeName = $.currentIframe().$("#pointGridTable").jqGridRowValue("NBDevTypeName");
    var NBDevManufacturerName = $.currentIframe().$("#pointGridTable").jqGridRowValue("NBDevManufacturerName");
    var NBDevManufacturerCodeName = $.currentIframe().$("#pointGridTable").jqGridRowValue("NBDevManufacturerCodeName");
    var NBTypeCodeName = $.currentIframe().$("#pointGridTable").jqGridRowValue("NBTypeCodeName");
    var NowReading = $.currentIframe().$("#pointGridTable").jqGridRowValue("NowReading");
    var data = {};
    data.MeterTypeName = MeterTypeName;
    data.ElecAddress = ElecAddress;
    data.IMEI = IMEI;
    data.NBDevTypeName = NBDevTypeName;
    data.NBDevManufacturerName = NBDevManufacturerName;
    data.NBDevManufacturerCodeName = NBDevManufacturerCodeName;
    data.NBTypeCodeName = NBTypeCodeName;
    data.NowReading = NowReading;
   
    $(function () {
        initControl();
    });

    //初始化控件
    function initControl() {

        //表类型
        $("#NewMeterTypeId").ComboBoxTree({
            url: "/NBManage/NBMeterTypeManage/GetAllMeterType",
            id: "ItemValue",
            text: "ItemName",
            description: "==请选择==",
            height: "200px"
        });
        //NB表类型
        $("#NewNBDevTypeId").ComboBoxTree({
            url: "/NBManage/NBMeterTypeManage/GetNBDevType",
            description: "==请选择==",
            height: "200px",
            allowSearch: true,
        }).bind("change", function () {
            var value = $(this).attr('data-value');
            //加载NB设备厂商名称
            $("#NewNBDevManufacturerId").ComboBoxTree({
                url: "/NBManage/NBMeterTypeManage/GetDevManufacturerByNBDevTypeID?NBDevTypeID=" + value,
                description: "==请选择==",
                allowSearch: true
            })
        });

        //NB设备厂商名称
        $("#NewNBDevManufacturerId").ComboBoxTree({
            description: "==请选择==",
            height: "200px",
            allowSearch: true
        }).bind("change", function () {
            var value = $(this).attr('data-value');
            //加载NB设备厂商ID
            $("#NewNBDevManufacturerCodeId").ComboBoxTree({
                url: "/NBManage/NBMeterTypeManage/GetNBDevManufacturerCodeByNBDevManufacturerID?NBDevManufacturerID=" + value,
                description: "==请选择==",
                allowSearch: true
            });
        });


        //NB设备厂商ID
        $("#NewNBDevManufacturerCodeId").ComboBoxTree({
            description: "==请选择==",
            height: "200px",
            allowSearch: true
        }).bind("change", function () {
            var value = $(this).attr('data-value');
            //加载型号
            $("#NewNBTypeCode").ComboBoxTree({
                url: "/NBManage/NBMeterTypeManage/GetNBTypeCodeByNBDevManufacturerCodeID?NBDevManufacturerCodeID=" + value,
                description: "==请选择==",
                allowSearch: true
            });
        });

        //型号
        $("#NewNBTypeCode").ComboBox({
            description: "==请选择==",
            height: "200px",
            allowSearch: true
        })

        if (keyValue) {           
            $("#form1").SetWebControls(data);
        }
    }
    //保存表单
    function AcceptClick() {
        if (!$('#form2').Validform()) {
            return false;
        }
        var postData = $("#form2").GetWebControls(keyValue);
        //postData 格式化 将&nbsp; 替换为 ""
        for (var i in postData) {
            if (postData[i] == "&nbsp;") {
                postData[i] = "";
            }
        }

        $.SaveForm({
            url: "/NBManage/NBChangeMeterManage/SaveForm",
            param: { "keyValue": keyValue, "jsonData": JSON.stringify(postData) },
            loading: "正在保存数据...",
            success: function () {               
                $.currentIframe().$("#gridTable").resetSelection();
                $.currentIframe().$("#gridTable").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>
                <th class="formTitle">表类型<font face="宋体">*</font></th>
                <td class="formValue">
                    <input id="MeterTypeName" type="text" class="form-control"  readonly />
                </td>
                <th class="formTitle">表地址</th>
                <td class="formValue">
                    <input id="ElecAddress" type="text" class="form-control" placeholder="请输入表地址" readonly />
                </td>
            </tr>
            <tr>
                <th class="formTitle">IMEI<font face="宋体">*</font></th>
                <td class="formValue">
                    <input id="IMEI" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" errormsg="IMEI号" placeholder="请输入IMEI" readonly />
                </td>
                <th class="formTitle">表读数<font face="宋体">*</font></th>
                <td class="formValue">
                    <input id="NowReading" type="text" class="form-control" readonly />
                </td>
            </tr>
            <tr>
                <th class="formTitle">NB表类型<font face="宋体">*</font></th>
                <td class="formValue" colspan="3" >
                    <input id="NBDevTypeName" type="text" class="form-control" readonly style="float: left; width: 24%; margin-right: 3px;"/>
                    <input id="NBDevManufacturerName" type="text" class="form-control" readonly style="float: left; width: 24%; margin-right: 3px;" />
                    <input id="NBDevManufacturerCodeName" type="text" class="form-control" readonly style="float: left; width: 24%; margin-right: 3px;" />
                    <input id="NBTypeCodeName" 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>
                <th class="formTitle">表类型<font face="宋体">*</font></th>
                <td class="formValue">
                    <div id="NewMeterTypeId" type="select" class="ui-select" isvalid="yes" checkexpession="NotNull" errormsg="表类型">
                    </div>
                </td>
                <th class="formTitle">表地址</th>
                <td class="formValue">
                    <input id="NewElecAddress" type="text" class="form-control" placeholder="请输入表地址" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">IMEI<font face="宋体">*</font></th>
                <td class="formValue">
                    <input id="NewMeterIMEI" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" errormsg="IMEI号" placeholder="请输入IMEI" />
                </td>
                <th class="formTitle">表读数<font face="宋体">*</font></th>
                <td class="formValue">
                    <input id="NewReadding" type="text" class="form-control" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">NB表类型<font face="宋体">*</font></th>
                <td class="formValue" colspan="3">
                    <div id="NewNBDevTypeId" type="select" class="ui-select" isvalid="yes" checkexpession="NotNull" errormsg="NB表类型" style="float: left; width: 24%; margin-right: 3px;">
                    </div>
                    <div id="NewNBDevManufacturerId" type="select" class="ui-select" isvalid="yes" checkexpession="NotNull" errormsg="NB设备厂商名称" style="float: left; width: 24%; margin-right: 3px;">
                    </div>
                    <div id="NewNBDevManufacturerCodeId" type="select" class="ui-select" isvalid="yes" checkexpession="NotNull" errormsg="NB设备厂商ID" style="float: left; width: 24%; margin-right: 3px;">
                    </div>
                    <div id="NewNBTypeCode" type="select" class="ui-select" isvalid="yes" checkexpession="NotNull" errormsg="型号" style="float: left; width: 24%; margin-right: 3px;">
                    </div>
                </td>
            </tr>
        </table>
    </fieldset>
</div>