@{
    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');

    $(function () {
        initControl();
    });

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

        //区域（单位）
        $("#MeterAreaId").ComboBoxTree({
            url: "/JiangSuWaterResource/AreaAndDevice/GetAreaTreeJson",
            id: "ItemValue",
            text: "ItemName",
            description: "==请选择==",
            height: "200px",
            allowSearch: true
        });
        //终端类型
        $("#TerminalType").ComboBoxTree({
            url: "/JiangSuWaterResource/AreaAndDevice/GetTerminalTypes?types=0",
            description: "==请选择==",
            id: "ItemValue",
            text: "ItemName",
            height: "200px",
            allowSearch: true
        });

        //设备协议
        $("#MeterProtocol").ComboBoxTree({
            url: "/JiangSuWaterResource/AreaAndDevice/GetTerminalTypes?types=1",
            description: "==请选择==",
            id: "ItemValue",
            text: "ItemName",
            height: "200px",
            allowSearch: true
        });
        //传输协议
        $("#TransArgeement").ComboBoxTree({
            url: "/JiangSuWaterResource/AreaAndDevice/GetTerminalTypes?types=2",
            description: "==请选择==",
            id: "ItemValue",
            text: "ItemName",
            height: "200px"
        });

        //是否轮询
        $("#IsInterval").ComboBox({
            description: "==请选择==",
            height: "200px",
        })

        if (keyValue) {
            $("#form1").SetWebControls(data);
        }


        //组网方式
        $("#Networks").ComboBoxTree({
            url: "/JiangSuWaterResource/AreaAndDevice/GetNetworks",
            description: "==请选择==",
            id: "ItemValue",
            text: "ItemName",
            height: "200px",
            allowSearch: true
        }).bind("change", function () {
            var value = $(this).attr('data-value');
            if (value != 1 && value != 6 && value != 7) {
                $(".TransIdentify").show();
                $(".IpAndPort").hide();
                $(".DataChannel").hide();

                //组网方式为“北斗卫星”时，传输协议设置为“北斗协议”，置灰不可修改--2016-09-08
                if (value == 8) {
                    $("#TransArgeement").ComboBoxTreeSetValue(68);

                    $("#TransArgeement").attr("disable","disable");
                }
                else {
                    //传输协议赋默认值 - 平生协议
                    $("#TransArgeement").ComboBoxTreeSetValue(12);
                }
            } else {
                if (value == 1) {
                    $(".TransIdentify").hide();
                    $(".DataChannel").show();
                    $(".IpAndPort").hide();
                }
                else {
                    $(".TransIdentify").hide();
                    $(".DataChannel").hide();
                    $(".IpAndPort").show();
                }
            }
            var url = "/JiangSuWaterResource/AreaAndDevice/GetDataChannele";
            var chanParams;
            //根据选择的 传输协议 加载不同的 数据通道
            switch (value) {
                case "1":
                    chanParams = { "chanlName": "'DC_COM','COM','串口直连'" };
                    break;
                case "2":                    
                    chanParams = { "chanlName": "'DC_COM','移动专网'" };
                    break;
                case "3":
                    break;
                case "4":                    
                    chanParams = { "chanlName": "'DC_TCP_FromServer'" };
                    break;
                case "5":                   
                    chanParams = { "chanlName": "'DC_UDP_FromServer'" };
                    break;
                case "6":
                case "7":                   
                    chanParams = { "chanlName": "'DC_UDP_Client'" };
                    break;
                    //组网方式为”北斗卫星”时，加载对应的通道服务--2016-09-09    
                case "8":                   
                    chanParams = { "chanlName": "'DC_COM','北斗卫星'" };
                    break;
                default:
                    break;
            }
            //数据通道
            $("#DataChannel").ComboBoxTree({
                url: "/JiangSuWaterResource/AreaAndDevice/GetDataChannele",
                param:chanParams,
                description: "==请选择==",
                id: "ItemValue",
                text: "ItemName",
                height: "200px",
                allowSearch: true
            }).bind('change', function () {
                var DataValue = $(this).attr('data-value');
                if (networkingMode == "1" || networkingMode == "2" || networkingMode == "3" || networkingMode == "8") {
                    $(".NetServer").hide();
                    $(".SerialPort").show();
                }
                else if (networkingMode == "4" || networkingMode == "5") {
                    var ntk = $("#selNetworking").val(networkingMode);
                    ntk.attr("disabled", true);
                    $(".NetServer").show();
                    $(".SerialPort").hide();
                }
                $("#btn_EditServer").linkbutton({ text: "确定" });
                $('#dlgEditServer').dialog({
                    title: '新建通道服务',
                    closed: false
                });

            });
            
            if (networkingMode != "6" && networkingMode != "7" && ddlServerList.length > 1) {
                $("#cbb_DataChannel" + index).combobox('setValue', ddlServerList[1].id);
            }
        });
        //保存表单
        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");
                }
            })
        }

        function ShowMap() {
            dialogOpen({
                id: "BaiduMap",
                title: '添加测点',
                url: '/JiangSuWaterResource/AreaAndDevice/BaiduMap',
                width: "1100px",
                height: "700px",
                callBack: function (iframeId) {
                    top.frames[iframeId].AcceptClick(function callback(result) {
                        $("#MeterLocation").val(result);
                    });
                }
            });
        }
    }
</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="MeterName" type="text" class="form-control" checkexpession="NotNull" errormsg="测点名称" placeholder="请输入测点名称" />
                </td>
                <th class="formTitle">区域(单位)</th>
                <td class="formValue">
                    <div id="MeterAreaId" type="select" class="ui-select" isvalid="yes" checkexpession="NotNull" errormsg="表类型">
                    </div>
                </td>
            </tr>
            <tr>
                <th class="formTitle">终端类型<font face="宋体">*</font></th>
                <td class="formValue">
                    <div id="TerminalType" type="select" class="ui-select" isvalid="yes" checkexpession="NotNull" errormsg="表类型">
                    </div>
                </td>
                <th class="formTitle">地图坐标<font face="宋体">*</font></th>
                <td class="formValue">
                    <input id="MeterLocation" type="text" class="form-control" readonly onclick="ShowMap()" />
                </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">
                    <input id="ThisDate" type="text" class="form-control input-wdatepicker" onfocus="WdatePicker()" />
                </td>
                <th class="formTitle">安装位置</th>
                <td class="formValue">
                    <input id="NewElecAddress" type="text" class="form-control" placeholder="请输入表地址" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">手机卡号<font face="宋体">*</font></th>
                <td class="formValue">
                    <input id="NewMeterIMEI" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" errormsg="IMEI号" placeholder="请输入IMEI" />
                </td>
            </tr>
        </table>
    </fieldset>
    <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="MeterProtocol" type="select" class="ui-select" isvalid="yes" checkexpession="NotNull" errormsg="表类型">
                    </div>
                </td>
                <th class="formTitle">设备地址</th>
                <td class="formValue">
                    <input id="MeterAddress" type="text" class="form-control" placeholder="请输入表地址" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">是否轮询<font face="宋体">*</font></th>
                <td class="formValue">
                    <div id="IsInterval" type="select" class="ui-select">
                        <ul>
                            <li data-value="1">是</li>
                            <li data-value="0">否</li>
                        </ul>
                    </div>
                </td>
                <th class="formTitle">轮询间隔<font face="宋体">*</font></th>
                <td class="formValue">
                    <input id="NewMeterIMEI" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" errormsg="IMEI号" placeholder="请输入IMEI" />
                </td>
            </tr>
        </table>
    </fieldset>
    <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="Networks" type="select" class="ui-select" isvalid="yes" checkexpession="NotNull" errormsg="组网方式">
                    </div>
                </td>
                <th class="formTitle TransArgeement">传输协议</th>
                <td class="formValue TransArgeement">
                    <div id="TransArgeement" type="select" class="ui-select" isvalid="yes" checkexpession="NotNull" errormsg="传输协议">
                    </div>
                </td>
            </tr>
            <tr>
                <th class="formTitle DataChannel">通道服务<font face="宋体">*</font></th>
                <td class="formValue DataChannel">
                    <div id="DataChannel" type="select" class="ui-select" isvalid="yes" checkexpession="NotNull" errormsg="通道服务">
                    </div>
                </td>
                <th class="formTitle TransIdentify">传输标识<font face="宋体">*</font></th>
                <td class="formValue TransIdentify">
                    <input id="TransIdentify" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" errormsg="传输标识" placeholder="请输入传输标识" />
                </td>
                <th class="formTitle IpAndPort hide">IP和端口<font face="宋体">*</font></th>
                <td class="formValue IpAndPort hide">
                    <input id="IpAndPort" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" errormsg="IP和端口" placeholder="请输入IP和端口" />
                </td>
            </tr>
        </table>
    </fieldset>
    <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">通道服务<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="NewMeterIMEI" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" errormsg="IMEI号" placeholder="请输入IMEI" />
                </td>
            </tr>
        </table>
    </fieldset>
</div>