{extend name="Public/base" /}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/css/set.css?v={$Think.const.APP_VERSION}">
{/block}
{block name="js"}
<script>
    $(function(){
        // $(".nul_bli").eq(4).find(".navb").addClass("active");
    })
</script>
{/block}
{block name="main"}

<div class="if_wrap">
    <div class="cus-con">
        <div class="set_tit"><span>手机修改日志</span></div>
        </fieldset>
        <div class="set-top layui-form" style="min-width: 1130px;">
           <div class="mkz_title"> 客资ID:</div>
            <div class="layui-input-inline w-120" >
                <input type="text" class="layui-input" id="customer_id">
            </div>
            <div class="mkz_title">客资手机:</div>
            <div class="layui-input-inline w-120" >
                <input type="text" class="layui-input" id="customer_tel">
            </div>
           <div class="mkz_title"> 操作人:</div>
            <div class="layui-input-inline">
                <select id="staff_id" name="staff_id"  lay-verify="required" lay-search="">
                    <option value="">请选择</option>
                    {volist name="staff" id="s"}
                    <option value="{$s.id}">{$s.staffname}</option>
                    {/volist}
                </select>
            </div>
            <div class="mkz_title">开始时间:</div>
            <div class="layui-input-inline w-120" >
                <input type="text" class="layui-input" id="start" readonly="readonly">
            </div>
            <div class="mkz_title">结束时间:</div>
            <div class="layui-input-inline w-120" >
                <input type="text" class="layui-input" id="end"  readonly="readonly">
            </div>
            <button class="layui-btn" id="btn" style="margin-left: 10px;">查询</button>
        </div>
        <table class="layui-table" lay-data="{limit:50, url:'/crm/Logs/telLogsJSON', page:true,id:'idTest'}" lay-filter="msgTable">
            <thead>
            <tr>
                <th lay-data="{field:'id', width:70,align:'center',toolbar: '#titleTpl'}">序号</th>
                <th lay-data="{field:'staff_name',align:'center' ,width:100}">操作人</th>
                <th lay-data="{field:'action',align:'center',width:150}">操作内容</th>
                <th lay-data="{field:'customer_id',align:'center', width:100}">客资ID</th>
                <th lay-data="{field:'old_data',width:400,height:80,align:'center'}">原手机号</th>
                <th lay-data="{field:'data',width:400,height:80,align:'center'}">新手机号</th>
                <th lay-data="{field:'create_time',align:'center', width:150}">操作时间</th>
            </tr>
            </thead>
        </table>
        <script type="text/html" id="titleTpl">
            {{d.LAY_TABLE_INDEX+1}}
        </script>
    </div>
</div>
<div id="add-box" style="display: none;padding:20px;">
    <form class="layui-form" action="">
        <div class="set-row">
            <table class="layui-table">
                <colgroup>
                    <col>
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>原信息</th>
                    <th>新信息</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <div style="width:300px;" id="old"></div>
                    </td>
                    <td>
                        <div style="width:300px;" id="new"></div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </form>
</div>
<script type="text/javascript">
    //日历
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#start'
            ,max:0
            ,format: 'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#end'
            ,max:0
            ,format: 'yyyy-MM-dd'
        });
    });
    $('#btn').click(function(){
        var customer_id = $('#customer_id').val();
        var customer_tel = $('#customer_tel').val();
        var patrn = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
        if (customer_tel && !patrn.exec(customer_tel)) {
            layer.alert("手机号输入错误");
            return false;
        }
        var staff_id = $('#staff_id').val();
        var start = $('#start').val();
        var end = $('#end').val();
        var index = layer.load(1, {shade: false}); //0代表加载的风格，支持0-2
        table.reload('idTest', {
            url: 'telLogsJSON'
            ,where: {customer_id:customer_id,customer_tel:customer_tel,staff_id:staff_id,start:start,end:end}, //设定异步数据接口的额外参数
            done: function(res, curr, count){
                layer.close(index);
            }
        });

    })
    // 表格
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
        var laydate  = layui.laydate, //日期
                laypage  = layui.laypage //分页
        layer    = layui.layer, //弹层
                table    = layui.table, //表格
                carousel = layui.carousel, //轮播
                upload   = layui.upload, //上传
                element  = layui.element; //元素操作
        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            ,count: 100 //总页数
            ,limit:15
            ,skin: '#1E9FFF' //自定义选中色值
            ,jump: function(obj, first){
                if(!first){
                    layer.msg('第'+ obj.curr +'页');
                }
            }
        });

        table.on('tool(msgTable)', function (obj) {
            var data = obj.data, //获得当前行数据
                    layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                $('#old').html(data.old);
                $('#new').html(data.new);
                layer.open({
                    title: '操作数据变化详情',
                    type: 1,
                    skin: 'layui-layer-rim',
                    area: ['800px', '600px'],
                    content: $('#add-box'),
                    btn: ['关闭']
                    , yes: function(index) {
                        //当点击‘确定’按钮的时候，获取弹出层返回的值
                        //最后关闭弹出层
                        layer.close(index);
                    }
                });
            }
        })
    })

</script>
{/block}