<!DOCTYPE html>
<html>
  <head>
 	 <base href="#springUrl('/assets/adminlte/')"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图文管理</title>
 	  <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="plugins/ionicons/css/ionicons.min.css">
    
       <!-- DataTables -->
    <link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">
    
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
    <!-- Morris chart -->
    <link rel="stylesheet" href="plugins/morris/morris.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Date Picker -->
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
	
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body class="hold-transition skin-blue sidebar-mini">


 <div class="wrapper">
    <div class="content-wrapper"  style="margin-left:0;">
    
     <section class="content-header">
          <h1>
             	图文管理
            <small>图文信息</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#springUrl('/page/user/showstatics')"><i class="fa fa-dashboard"></i>首页</a></li>
            <li><a class="active">图文列表</a></li>
          </ol>
        </section>
    
    <div id="myModal" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
			<!-- dialog body -->
			<div class="modal-body">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				素材组合中,请稍后......
			</div>
			<!-- dialog buttons -->
			</div>
		</div>
	</div>
        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-xs-12">
              <div class="box">
              <div class="box-header">
                <form id="seachTableForm" action="#springUrl('/a/imagetext/list')" method="get">
                	<div class="col-xs-2">
						<input type="text" class="form-control required" placeholder="图文标题" name="title" value="$!{imageText.title}">
					</div> 
					<div class="col-xs-5"> 
						<button type="submit" class="btn btn-primary">搜索</button>
						  #if($shiro.hasPermission("mp:imagetext:edit"))
                  			 <a href="#springUrl('/a/imagetext/imageTextForm')"  class="btn bg-olive">新增图文</a>
                   		  #end
					</div>
                </form>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                  <table id="userlilst" class="table table-bordered table-striped">
                  		<thead>
                  			<th hidden="true">Id</th>
                  			<th>图片</th>
                  			<th>标题</th>
                  			<th>作者</th>
                  			<th>描述</th>
                  			<th>创建时间</th>
                  			<th>操作</th>
                  		</thead>
	                    <tbody id="tablebody">
	                    
	                    </tbody>
                  </table>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
            </div><!-- /.col -->
          </div><!-- /.row -->
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->  
   	


      <!-- Add the sidebar's background. This div must be placed
           immediately after the control sidebar -->
      <div class="control-sidebar-bg"></div>
    </div><!-- ./wrapper -->

<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<!-- END FOOTER -->
    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- DataTables -->
    <script src="plugins/datatables/jquery.dataTables.min.js"></script>
     <script src="plugins/datatables/extensions/i18n/lanauage_ch.js"></script>
    <script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
    <!-- SlimScroll -->
    <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="plugins/fastclick/fastclick.min.js"></script>
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="dist/js/demo.js"></script>
 <script src="plugins/bootbox/bootbox.min.js"></script>
 <script src="common/js/cfapp.js"></script>
 <script>
     var csrfheader = {name:'_csrf_header',value:'${_csrf.headerName}'};
     var csrftoken  = {name:'_csrf',value:'${_csrf.token}'};
 </script>

<!-- END PAGE LEVEL PLUGINS -->
<script>
	
function   formatDates(now)   {
	var now = new Date(now);
    var   year=now.getFullYear();     
    var   month=now.getMonth()+1;     
    var   date=now.getDate();     
    var   hour=now.getHours();     
    var   minute=now.getMinutes();     
    var   second=now.getSeconds();     
    return   year+"-"+month+"-"+date+"   "+hour+":"+minute+":"+second;     
} 
function   formatDateTimes(now)   {
	var now = new Date(now);
	 var   month=now.getMonth()+1;     
	    var   date=now.getDate();     
    return  month+"月"+date+"日";     
} 
    
var sSource = "#springUrl('/a/imagetext/fetchData')"; //列表数据

    jQuery(document).ready(function() {
    	
    	
    	function alertHtml(msg){
    		Cfapp.alert({
                message: msg,
                btntext: "确定",
                success: function () {
                   
                }
            })
    	}
    	
    	
     	 
     	 var aoData = {
   			   iDisplayStart:1,
   			   iDisplayLength:10
   	   		};
     	 var retrieveData = function (sSource, aoData, fnCallback) {
     		$("#seachTableForm input,.select2").each(function() {
				var params = {
					name : $(this).attr("name"),
					value : $(this).val()
				};
				aoData.push(params);
			})
             $.ajax({
                 "type": "GET",
                 "contentType": "application/json",
                 "url": sSource,
                 "dataType": "json",
                 "data": aoData, //以json格式传递
                 "success":fnCallback
             });
         };
         
         dateformatId=function(a,b,c,d){
        	 if(a.thumbMediaId){
        		 if(selectedImageText.indexOf("."+a.thumbMediaId+",")>=0){
              		return '<input type="checkbox" onchange="recordingOne(this)" class="checkchild" checked="true"  value="' + a.id + '" />';
              	}else{ 
              		return '<input type="checkbox" onchange="recordingOne(this)" class="checkchild"  value="' + a.id + '" />';
              	}	 
        	 }else{
        		 return '';
        	 }
         }  
     	  
     		      $('#userlilst').DataTable({
     		            "lengthChange": false, 
     		            "searching": false,
     		            "ordering": false,
     		            "bFiltered": false,
     		           "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
     		            "bProcessing": true,
     		            "bServerSide": true,
     		            "sAjaxSource": sSource,
     		            "fnServerData": retrieveData,
     		            "pagingType": "full_numbers",
     		            "fnDrawCallback":function(){
     		            	$("[data-toggle='popover']").on('show.bs.popover', function () {
     		   				var tr=$(this).parent().parent();
     		   				console.log(tr);
     		   				var image=$(tr).find("td").eq(0).find("img").attr("src");
     		   				var title=$(tr).find("td").eq(1).text();
     		   				var desc=$(tr).find("td").eq(3).text();
     		   				var time=formatDateTimes($(tr).find("td").eq(4).text());
     		   				var HTML="<div><p style='color:#000;font-size:15px;'>"+title+"</p><p style='color:#666;font-size:12px;'>"+time+"</p><img style='width:200px;height:120px;' src='"+image+"'/><p style='color:#666;font-size:14px;'>"+desc+"</p><p style='color:#000;font-size:13px;'>阅读全文</p></div>";
     		   				$(this).attr("data-content",HTML);
     		   			})	 
     		   			$("[data-toggle='popover']").popover();
     		            },
     		            "aoColumns": [
     		                        {"mData": "id"},
     		                        {"mData": "picUrl"},
     		                        {"mData": "title"},
     		                        {"mData": "author"},
     		                        {"mData": "description"},
     		                        {"mData": "createtime"},
     		                        ],
     		                    "aoColumnDefs": [
     		                        {  // set default column settings
     		                            'visible': false,
     		                            'targets': [0]
     		                        },
     		                        {
     		                        	"targets": [1],
      		                            "mData": "picUrl",
      		                            "className":"piccenter",
      		                            "mRender": function (a, b, c, d) 
      		                            { 
      		                            	//a表示id对应的值，c表示当前记录行对象
      		                                return '<img width="100px" height="auto" src="'+a+'" />';
      		                            }
     		                        },{
	     		       					"aTargets" : [ 5 ],
	     		   						"mData" : "createtime",
	     		   						"mRender" : function(a, b, c, d) {//a表示createtime对应的值，c表示当前记录行对象
	     		   							return formatDates(a.time, "yyyy-MM-dd HH:mm:ss");
	     		   						}
     		   						},{
	     		       					"aTargets" : [ 6 ],
	     		   						"mData" : "id",
	     		   						"mRender" : function(a, b, c, d) {//a表示createtime对应的值，c表示当前记录行对象
	     		   						var seeHTML="#if($shiro.hasPermission('mp:imagetext:view'))"+
	     		   			"<a href='javascript:void(0);' data-html='true'  data-container='body' data-toggle='popover'  data-placement='bottom' data-content='<a></a>' >预览</a> "
	     		   						+"#end";
	     		   						var viewHTML ="#if($shiro.hasPermission('mp:imagetext:view'))"+"<a href=#springUrl('/a/imagetext/imageTextForm?id="+a+"') >修改</a> "+"#end";
	     		     		             var removeHTML="#if($shiro.hasPermission('mp:imagetext:edit'))"+"<a href='javascript:void(0);' data-id='"+a+" data-action='remove' onclick='removeData("+a+")' class='btn red'>删除</a>"+"#end";
	     		     		             return seeHTML+viewHTML+removeHTML;
	     		   						}
     		   						}]//,
//      		                        {
//      		                            "aTargets": [8],
//      		                            "mData": "id",
//      		                            "mRender": function (a, b, c, d) {//a表示id对应的值，c表示当前记录行对象
     		                            	
//      		                                var viewHTML = '<a href="#" data-id="'+a+'" data-action="view" class="btn green">查看</a>';
//      		                                if(c.delflag==0){
//      		                                	 var removeHTML = '<a href="#" data-id="'+a+'" data-action="remove" class="btn red">删除</a>';
//      		                                }else{
//      		                                	 var removeHTML = '<a href="javascript:void(0)" data-id="'+a+'" data-action="remove" class="btn red" style="color:red">已取消关注</a>';
//      		                                }
//      		                                return viewHTML+removeHTML;
//      		                            }
//      		                        }
     		            
     		        });
     		      
     		      
     		     
     		     
		   		
    });
    function removeData(id){ 
		   Cfapp.confirm({
			 message: "确定要删除吗",
			 btnoktext:"确定",
			 btncanceltext:"取消",
			 success:function(){
				 $.ajax({
		              "type": "POST",
		              "url": "#springUrl('/a/imagetext/remove')",
		              "dataType": "json",
		              "data": {id:id,"_csrf_header":csrfheader.value,"_csrf":csrftoken.value}, //以json格式传递
		              "success": function(data){
		            	  if(data.errorNo==0){
		            		  Cfapp.alert({
		                          message: "删除成功",
		                          btntext: "确定",
		                          success: function () {
		                        	 location.href = "#springUrl('/a/imagetext/list')";
		                          }
		                      })
		            	  }else{
		            		  Cfapp.alert({
		                          message: "删除失败",
		                          btntext: "确定",
		                          success: function () {
		                              location.href = "#springUrl('/a/imagetext/list')";
		                          }
		                      })
		            	  }
		              }
		          }); 
			 },
			cancel:function(){
				$(".modal-backdrop").fadeOut();

			 }
		   })
	   }
</script>
</body>
<!-- END BODY -->
</html>