<?xml version="1.0" encoding="utf-8"?>
<h:screen xmlns:h="http://www.hand-china.com/hap">
    <script src="${base.contextPath}/common/language?var=languageData" type="text/javascript"></script>
    <style type="text/css">
        #code,#description{
            width:150px!important;
        }
    </style>
    <script><![CDATA[
    var viewModel = kendo.observable({
        enabled : true,
        isEnabled : false,
        model : {

        },
        resourceTypeData : languageData,
        query : function() {
            $('#grid').data('kendoGrid').dataSource.page(1);
        },
        reset : function() {
            viewModel.model={};
            $('#code').val('');
            $('#description').val('');
        }
    });
    function parameterMapCommon(options, type){
        if(type != "read" && options.models){
            var datas = options.models;
            if(type == "create" || type == "update"){
                datas = options.models.map(function(data){
                    if(type == "create")
                        data.__status = "add";
                    if(type == "update")
                        data.__status = "update";
                    return data;
                });
            }
            return kendo.stringify(datas);
        }else if(type == "read"){
            var queryInfo = {};
            queryInfo.page = options.page;
            queryInfo.pageSize = options.pageSize;
            queryInfo.code = $('#code').val();//viewModel.model.code;
            queryInfo.description = $('#description').val();//viewModel.model.description;
            for(var info in queryInfo){
                if(queryInfo[info] === "" || queryInfo[info] === null || queryInfo[info] === undefined)
                    delete queryInfo[info];
            }
            return queryInfo;
        }
    }
    function openLovWindow(id){
        var url = '${base.contextPath}/sys/sys_lov_edit.html';
        if (id) {
            url = url + '?lovId=' + id;
        }
        Hls.openBox({
           width : '90%',
           url : url,
           winId : 'dialogEdit'
        });
    }
    function idEditable(field) {
        if(this.isNew())
            return true;
        return false;
    }
    var editTem = function (rowdata) {
        return Hap.createAnchor('<@spring.message "hap.edit"/>', openLovWindow ,rowdata.lovId);
    }
    var actionTem = function (rowdata) {
        return '<a target="_blank" href="/sys/sys_lov_preview.html?code=' + rowdata.code + '"><@spring.message "lov.preview"/></a>'
    }
    function hlscomponent_gridquery(id, search_id) {
        if ($('#queryPanel').css('display') == 'none') {
            $('#queryPanel').show(500);
//            $('.hlsgridbox-btn-detail').hide(500);
        } else {
            $('#queryPanel').hide(500);
//            $('.hlsgridbox-btn-detail').show(500);
        }
    }
    function hlscomponent_gridadd(id, search_id) {
       openLovWindow();
    }
    ]]></script>
    <div id="dialogEdit" style="display: none"></div>
    <div id="page-content">
        <h:dataSource id="dataSource" serverPaging="true" pageSize="20" batch="true">
            <h:transport parameterMap="parameterMapCommon">
                <h:read url="${base.contextPath}/sys/lov/query"/>
                <h:create contentType="application/json" type="POST" url="${base.contextPath}/sys/lov/submit"/>
                <h:update contentType="application/json" type="POST" url="${base.contextPath}/sys/lov/submit"/>
                <h:destroy contentType="application/json" type="POST" url="${base.contextPath}/sys/lov/remove"/>
            </h:transport>
            <h:schema data="rows" total="total">
                <h:model editable="fn:idEditable" id="lovId">
                    <h:fields>
                        <h:item name="code" type="String"></h:item>
                        <h:item name="description" type="String"></h:item>
                    </h:fields>
                </h:model>
            </h:schema>
        </h:dataSource>
        <h:hlsGridBox id="gridBox" hlsGridId="grid" hlsBtnType="add,query,excel" controllerName="" dataSourceId="dataSource"
                      viewModelName="viewModel.model" queryIds="code,description" queryPlaceHolders='<@spring.message "lov.code"/>,
                        <@spring.message "lov.description"/>' queryFunction="query">
            <!--<div id="queryPanel" class="pull-right" style="display:none;margin-right:5px;padding-bottom:10px;">-->
                <!--<div class="k-query-simple" id="query-form">-->
                    <!--<h:hlsMaskedTextBox name="code" id="code" placeholder='<@spring.message "lov.code"/>'-->
                                        <!--style="float:left;width:150px;margin-right:5px;" bind="enabled:enabled,value:model.code"-->
                                        <!--class="k-textbox" colspan="2"/>-->
                    <!--<h:hlsMaskedTextBox name="description" id="description" placeholder='<@spring.message "lov.description"/>'-->
                                        <!--style="float:left;width:150px;margin-right:5px;" bind="enabled:enabled,value:model.description"-->
                                        <!--class="k-textbox" colspan="2"/>-->
                <!--</div>-->
                <!--<script>kendo.bind($('#query-form'), viewModel);</script>-->
            <!--</div>-->
            <!--<script>-->
                <!--$('#queryPanel').kendoQueryPanel({-->
                    <!--queryFunction: function () {-->
                        <!--viewModel.query();-->
                    <!--},-->
                    <!--resetFunction: function () {-->
                        <!--viewModel.reset();-->
                    <!--}-->
                <!--})-->
            <!--</script>-->
            <h:hlsGrid dataSource="dataSource" editable="true"  hlsBtnType="DELETE" id="grid"  navigatable="true"
                       resizable="true" style="height:300px!important">
                <h:pageable buttonCount="5" pageSizes="5,10,20,50" refresh="true"/>
                <h:columns>
                    <h:column title="<@spring.message 'lov.code'/>" field="code" width="150px">
                        <h:headerAttributes style="text-align:center"/>
                    </h:column>
                    <h:column title="<@spring.message 'lov.description'/>" field="description" width="250px">
                        <h:headerAttributes style="text-align:center"/>
                    </h:column>
                    <h:column title="<@spring.message 'hap.edit'/>"  width="80px" template="fn:editTem">
                        <h:headerAttributes style="text-align:center"/>
                        <h:attributes style="text-align:center"/>
                    </h:column>
                    <h:column title="<@spring.message 'hap.action'/>"  width="80px" template="fn:actionTem">
                        <h:headerAttributes style="text-align:center"/>
                        <h:attributes style="text-align:center"/>
                    </h:column>
                </h:columns>
            </h:hlsGrid>
        </h:hlsGridBox>
    </div>
    <script><![CDATA[
    enterToQuery(['code','description']);
    function enterToQuery(ids) {
        for (id in ids) {
            $('#' + ids[id]).keydown(function (e) {
                if (e.keyCode == 13) {
                    e.target.blur();
                    viewModel.query(e);
                }
            });
        }
    }
    ]]></script>
</h:screen>