<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<table id="dgScene" class="easyui-datagrid" style="width: 100%; height: auto;" data-options="
            toolbar: '#tbScene',
			border: false,
			singleSelect: true,
			pagination: true,
			pageSize: 20,
			rownumbers: true,
			striped: true,
			sortName: 'ID',
			sortOrder: 'asc',
			fit: true,
			fitColumns: true,
			idField: 'ID',
			method: 'POST',
			url: '/MobileApp/LoadScenesByPage/'
		">
    <thead>
        <tr>
            <th data-options="field:'Name',width:30,resizable:false">
                <%: Html.Language("Name")%>
            </th>
            <th data-options="field:'EnglishName',width:100,resizable:false">
                <%: Html.Language("EnglishName")%>
            </th>
            <th data-options="field:'Icon',sortable:true,align:'center',resizable:false,formatter:iconFormatter">
                <%: Html.Language("Icon")%>
            </th>
            <th data-options="
				field: 'AppApply',
				align: 'center',
				resizable:false,
				formatter: sceneAppApplyFormatter
			">
                 <%: Html.Language("Display")%>
            </th>
        </tr>
    </thead>
</table>
<div id="tbScene">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true"
        onclick="$('#dgScene').datagrid('reload')">
        <%: Html.Language("Refresh")%></a>
    <label>
        <%: Html.Language("RoomType")%></label>
    <select id="cbxSceneRoomType" class="easyui-combobox" style="width: 100px;" data-options="
			valueField: 'ID',
			textField: 'Name',
			required: true,
			panelHeight: 'auto',
			editable: false,
			url: '/RoomType/LoadRoomType/',
            onSelect: cbxSceneRoomTypeOnSelect
		">
    </select>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"
        onclick="editScene();">
        <%: Html.Language("Edit")%></a>
</div>
<div id="Scenedialog" class="easyui-window"   style="padding: 5px; width: 300px; height: 210px;"
    data-options="
		closed: true,
		modal: true,
		collapsible: false,
		minimizable: false,
		maximizable: false
	">
    <div class="easyui-panel dlg-content" style="margin-bottom: 5px;">
        <form id="SceneForm" class="easyui-form" method="post" data-options="novalidate:true"
        enctype="multipart/form-data">
        <input type="hidden" id="SID" name="ID" value="0" />
        <table cellspacing="5px">
            <tr>
                <th>
                    <label for="txtSceneName">
                        <%: Html.Language("Name")%></label>
                </th>
                <td>
                    <input class="easyui-validatebox textbox text" id="txtSceneName" name="Name" readonly="true"
                        data-options="required:true" />
                </td>
            </tr>
            <tr>
                <th>
                    <label for="txtEnglishName">
                        <%: Html.Language("EnglishName")%></label>
                </th>
                <td>
                    <input class="easyui-validatebox textbox text" id="txtSceneEnglishName" readonly="true"
                        name="EnglishName" data-options="required:false" />
                </td>
            </tr>
            <tr>
                <th>
                    <label for="txtIcon">
                        <%: Html.Language("Icon")%></label>
                </th>
                <td>
                    <input class="easyui-filebox" name="Icon" data-options="buttonText:lang.Browse" />
                </td>
            </tr>
            <tr>
                <th>
                    <label for="chkAppApply">
                        <%: Html.Language("Visible")%></label>
                </th>
                <td>
                    <label>
                        <input type="radio" id="rad1" name="AppApply" value="true" />
                        <%: Html.Language("Yes")%></label>&nbsp;
                    <label>
                        <input id="rad2" type="radio" name="AppApply" value="false" /><%: Html.Language("No")%></label>
                </td>
            </tr>
        </table>
        </form>
    </div>
    <div class="dlg-footer" style="text-align: right; padding: 5px 5px 0 0;">
        <a class="easyui-linkbutton dlg-btn-save" data-options="iconCls:'icon-save'" href="javascript:void(0)"
            onclick="saveScene();">
            <%: Html.Language("Save")%></a> <a class="easyui-linkbutton dlg-btn-cancel" data-options="iconCls:'icon-cancel'"
                href="javascript:void(0)" onclick="$('#Scenedialog').window('close');">
                <%: Html.Language("Cancel")%></a>
    </div>
</div>
<script type="text/javascript">

    function cbxSceneRoomTypeOnSelect(r) {
        $("#dgScene").datagrid('reload', { RoomTypeID: r.ID });
    }

    function sceneAppApplyFormatter(val, row) {
        if (val) {
            return '<input type="checkbox" checked="checked" onchange="sceneAppApplyOnChange(this,\'' + row.ID + '\')" />';
        } else {
            return '<input type="checkbox" onchange="sceneAppApplyOnChange(this,\'' + row.ID + '\')" />';
        }
    }
    function sceneAppApplyOnChange(sender, id) {

        var params = { ID: id, AppApply: $(sender).is(":checked") };

        $.tools.post(params, '/MobileApp/SaveScene/');
    }
    function editScene() {
        var row = row || $('#dgScene').datagrid('getSelected');
        if (row) {
            $('#SceneForm').form('reset');
				$('#SID').val(row.ID);
				$('#txtSceneName').val(row.Name);
				$('#txtSceneEnglishName').val(row.EnglishName);
            if (row.AppApply) {
                $('#SceneForm input[name=AppApply][value=false]').removeAttr('checked');
                $('#SceneForm input[name=AppApply][value=true]').attr('checked', 'checked');
            } else {
                $('#SceneForm input[name=AppApply][value=true]').removeAttr('checked');
                $('#SceneForm input[name=AppApply][value=false]').attr('checked', 'checked');
            }
            $('#Scenedialog').window({ title: lang.EditScene }).window('open');
        } else {
            $.tools.alert(lang.PleaseSelectTheData);
        }
    }
    function saveScene() {
        $('#SceneForm').form('submit', {
            url: '/MobileApp/SaveEditScene/',
            success: function (r) {
                r = $.parseJSON(r);
                if (r.IsSuccess) {
                    $('#dgScene').datagrid('reload');
                    $('#Scenedialog').window('close');
                }
                $.tools.alert(r.Message);
            }
        });
    }
</script>
