<form class="form-horizontal" id="dataDictForm">
    <input class="hidden" id="id" name="id" th:value="${id}">
    <div class="box-body">
        <div class="form-group">
            <label  class="col-sm-3 control-label">状态 <span style="color: red">*</span>：</label>
            <div class="col-sm-8">
                <select name="isvalid" class="form-control">
                    <option th:selected="${isvalid==1}" value="1">有效</option>
                    <option th:selected="${isvalid==0}" value="0">无效</option>
                </select>
            </div>
        </div>
        
        <div class="form-group">
            <label  class="col-sm-3 control-label">字典Key <span style="color: red">*</span>：</label>
            <div class="col-sm-8">
                <input  name="datakey" class="form-control" th:readonly="${id > 0}" require="必填项" th:value="${datakey}">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">字典名称 <span style="color: red">*</span>：</label>
            <div class="col-sm-8">
                <input name="name" class="form-control" require="必填项" th:value="${name}">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-3 control-label">描述 :</label>
            <div class="col-sm-8">
                <input name="description" class="form-control" placeholder="" th:value="${description}">
            </div>
        </div>
        
        <div class="form-group">
            <label  class="col-sm-3 control-label"></label>
            <div class="col-sm-8">
            	<table id="table_dictitem"></table>
            </div>
        </div>
        
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
        <div class="pull-right">
            <button type="button" id="btn_save" class="btn btn-info">确定</button>
            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
        </div>
    </div>
    <!-- /.box-footer -->
</form>

<div id="toolbar_dictitem" class="btn-group" style="display: none;">
	<button id="btn_add_dictitem" type="button" class="btn btn-primary">
	    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
	</button>
</div>

<!-- 用户详情模态框 -->
<div id="data_dict_item_modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close btn_close_data_dict_item_modal"  aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">子项信息</h4>
            </div>
            <div class="modal-body">
            	<form class="form-horizontal" id="data_dict_item_form">
            		<input type="hidden" class="hidden" name="dictid" th:value="${id}">
                    <input type="hidden" class="hidden" name="id" value="-1">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">编码 <span style="color: red">*</span>：</label>
                            <div class="col-sm-8">
                                <input type="text" name="value" class="form-control" min="2" require="必填项">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">名称<span style="color: red">*</span>：</label>
                            <div class="col-sm-8">
                                <input type="text" name="name" class="form-control" min="2" require="必填项">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">排序：</label>
                            <div class="col-sm-8">
                                <input type="number" name="sort" class="form-control" plusinteger="正整数">
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="btn_save_data_dict_item" class="btn btn-info">确定</button>
                            <button type="button" class="btn btn-default btn_close_data_dict_item_modal">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
	var dataid = '[[${id}]]';
	if(dataid && dataid > 0){ // 修改操作时才让添加子项
		$('#toolbar_dictitem').show();
	    Core.initTable({
			columns: [
		       	{field: 'value', title: '编码', align : "left", type : 'text', emptytext : ""},
		        {field: 'name', title: '名称', align : "left"},
		        {field: 'sort', title: '排序', align : "left"},
		        {field : 'operation', title : '操作', align : "left", width: '102px', formatter: function(value, row, index) {
		        	let editHtml = '<a class="table-btn table-btn-info" href="javascript:void(0)" onclick=editDataItem("'+row.id+'")>修改</a>';
		        	let delHtml =  '&nbsp;<a class="table-btn table-btn-danger" href="javascript:void(0)" onclick="deleteDataItem('+row.id+')">删除</a>';
					return editHtml + delHtml;
		       }}
			],
	        id:"#table_dictitem",
	        url: '[[@{/console/datadict/getItemList}]]?dictid=[[${id}]]',
	        pageSize: 5,
	        pageList: [5,10,20,50],
	        toolbar: '#toolbar_dictitem',
	        showRefresh: false
	    });
    }else{
    	$('#toolbar_dictitem').hide();
    }
    
    
    function editDataItem(id) {
    	$('#data_dict_item_form')[0].reset();
    	if(id > 0){
    		var rowdata = Core.getRowByUniqueId("#table_dictitem", id);
    		$('#data_dict_item_form input[name="id"]').val(rowdata.id);
    		$('#data_dict_item_form input[name="value"]').val(rowdata.value);
    		$('#data_dict_item_form input[name="name"]').val(rowdata.name);
    		$('#data_dict_item_form input[name="sort"]').val(rowdata.sort);
    		$('#data_dict_item_form input[name="value"]').attr('readonly','readonly');
    	}else{
    		$('#data_dict_item_form input[name="value"]').removeAttr('readonly');
    	}
		$("#data_dict_item_modal").modal("show");
		$('#data_dict_item_form input[name="value"]').focus();
	}
    
    function deleteDataItem(id){
        Core.confirm("确定删除该记录？", function () {
            Core.postAjax("[[@{/console/datadict/deleteDataDictItem}]]",{"id":id},function (data) {
                if(data.ret==0){
                	layer.msg('删除成功！');
                    Core.refreshTable("#table_dictitem");
                }else{
	                layer.msg(data.msg);
                }
            },"POST");
        })
	}
    
    $(function () {
		$("#btn_add_dictitem").click(function(){
			editDataItem(-1);
        });
        
        $(".btn_close_data_dict_item_modal").click(function(){
        	$("#data_dict_item_modal").modal("hide");
        });
        
        // 保存字典子项
        $("#btn_save_data_dict_item").click(function(){
			if (doValidForm(data_dict_item_form)) {
                Core.mask("#btn_save_data_dict_item");
                Core.postAjax("[[@{/console/datadict/mergeDataDictItem}]]",$("#data_dict_item_form").serialize(),function (data) {
                    Core.unmask("#btn_save_data_dict_item");
                    if (data.ret==0) {
                        $("#data_dict_item_modal").modal("hide");
                        Core.refreshTable("#table_dictitem",true);
                        layer.msg('保存成功！');
                    }else{
                        layer.msg(data.msg);
                    }
                });
            }
        });
    	
    	// 
        $("#btn_save").on('click', function () {
            if (doValidForm(dataDictForm)) {
                Core.mask("#btn_save");
                Core.postAjax("[[@{/console/datadict/merge}]]",$("#dataDictForm").serialize(),function (data) {
                    Core.unmask("#btn_save");
                    if (data.ret==0) {
                        $("#data-edit-modal").modal("hide");
                        $("#myModal").modal("hide");
                        Core.refreshTable("#table",true);
                        layer.msg('添加成功！');
                    }else{
                        layer.msg(data.msg);
                    }
                });
            }
        });
    });
</script>