<?php
//require_once("../cong.php");
//session_start();
?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>访问判断日志</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//cdn.staticfile.org/layui/2.9.2/css/layui.css" rel="stylesheet">
  <style>
      .layui-table-header .layui-table {background-color: #3061ad;color: #fff;}
  </style>
</head>
<body>

<div style="padding: 8px 100px;"> 
  <form class="layui-form layui-row layui-col-space16">
  <div class="layui-col-md3">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-username"></i>
      </div>
      <input type="text" name="domain" value="" placeholder="域名" class="layui-input" lay-affix="clear">
    </div>
  </div>
  <div class="layui-col-md3">
    <div class="layui-input-wrap">
      <input type="text" name="country" placeholder="国家" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-col-md3">
    <div class="layui-input-wrap">
      <input type="text" name="IP" placeholder="IP" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-col-md3">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-date"></i>
      </div>
      <input type="text" name="visit_date" readonly placeholder="访问日期" class="layui-input demo-table-search-date">
    </div>
  </div>  
  <div class="layui-btn-container layui-col-xs12">
    <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
    <button type="reset" class="layui-btn layui-btn-primary">清除条件</button>
    当前查询数量：<span id="total_nums"></span>
  </div>
</form>
<div class="layui-btn-container layui-col-xs12">
    <button class="layui-btn layui-btn-sm" id="btn-refresh" onclick="resetTable()" lay-event="footerDemoBtn1">刷新</button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" id="btn-show-more" type="button">显示更多</button>
</div>
  <div id="demo-laypage-all"></div>
  <table class="layui-hide" id="ID-table-demo-search" lay-filter="test"></table>
</div>

<script src="../dist/layui.js"></script>
<script src="../dist/jquery.min.js"></script>
<script>

layui.use(function(){
  var table = layui.table;
  var form = layui.form;
  var laydate = layui.laydate;
  var showMoreCols = false;

  function buildCols(showMore) {
    return [[
      {field:'id', title: 'ID', width:30, fixed: true},
      {field:'domain', title: '域名', width:110},
      {field:'visit_date', title: '访问日期', width:120},
      {field:'country', title: '国家', width:120},
      {field:'result', title: '是否正常', width:80},
      {field:'reason', title: '理由', width:120},
      {field:'judge_timing_text', title: '判断用时', width:260},
      {field:'vtimes', title: '第几次访问', width:90},
      {field:'referer', title: '来源', width:210},
      {field:'IP', title: 'IP(支持IPV6)', width:120},
      {field:'client', title: '客户端', width:80},
      {field:'language', title: '语言', width:80},
      {field:'browser', title: '浏览器', width:80},
      {field:'page', title: '访问页面', width:210},
      {field:'campagin_id', title: '广告策略', width:80},
      {field:'user_agent', title: 'User-Agent', width:320, hide: !showMore},
      {field:'http_referer', title: 'HTTP-Referer', width:260, hide: !showMore},
      {field:'accept_language_raw', title: 'Accept-Language', width:220, hide: !showMore},
    ]];
  }

  table.render({
    elem: '#ID-table-demo-search',
    url: '../datatable/sdatalist.php',
    cols: buildCols(false),
    page: true,
    limit: 50,
    height: 800,
    size: "sm",
    skin: "grid",   // grid|line|row|nob
    rowStyle: function(row) {
      if (row.reason && row.reason.indexOf('未确定流量来源') !== -1) {
        return 'color:#856404;background-color:#fff3cd;';
      }
    },
    done: function(res, curr, count, origin){
      console.log(res); // 得到当前渲染的数据
      console.log(curr);  // 得到当前页码
      console.log(count); // 得到数据总量
      console.log(origin); // 回调函数所执行的来源 --- 2.8.7+
      $("#total_nums").text(count);
    },
  });

  $('#btn-show-more').on('click', function() {
    showMoreCols = !showMoreCols;
    $(this).text(showMoreCols ? '收起更多' : '显示更多');
    table.reload('ID-table-demo-search', { cols: buildCols(showMoreCols) });
  });
  
//   var laypage = layui.laypage;
//   // 完整显示
//   laypage.render({
//     elem: 'demo-laypage-all', // 元素 id
//     count: 10000, // 数据总数
//     layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
//     jump: function(obj){
//       console.log(obj);
//     }
//   });
  
  // 日期
  laydate.render({
    elem: '.demo-table-search-date'
  });
  // 搜索提交
  form.on('submit(demo-table-search)', function(data){
    var field = data.field; // 获得表单字段
    // 执行搜索重载
    table.reload('ID-table-demo-search', {
      page: {
        curr: 1 // 重新从第 1 页开始
      },
      where: field // 搜索的字段
    });
    // layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
    return false; // 阻止默认 form 跳转
  });
       // table.reload('ID-table-demo-search', {
     //   page: {
     //     curr: 1 // 重新从第 1 页开始
     //   },
     // });
    var layer = layui.layer;
    var util = layui.util;
    util.on('lay-on', {
        confirm: function(){
          layer.confirm('确定清除所有日志数据？', {
            btn: ['确定', '关闭'] //按钮
          }, function(){
            
          }, function(){
            
          });
        },
     });
});
  
  // 刷新按钮
  function resetTable() {
      var table = layui.table;
      table.reload('ID-table-demo-search', {
      page: {
          curr: 1 // 重新从第 1 页开始
      },
    });
  }
</script>
</body>
</html>