{layout name="layout" /}

<style>
    .layui-form-select .layui-edge{
        top: 30%;!important;
        border-top-color: transparent;!important;
    }
</style>
<div class="if_wrap">
    <div id="if_con">
        <div class="cus-con">
            <div class="set-top">
                {$topmenu}

                <br/>
                <div class="layui-inline margin_top_10 layui-form layui-form-pane1">
                    <!--<form class="layui-form layui-form-pane1" id="searchform" method="get" action="">-->
                        <input type="hidden" name="usertype" value="{$Think.get.usertype}" />
                        <div class="layui-form-item" id="cus-top">
                            <div class="layui-inline">
                                <label class="layui-form-label">活动类型</label>
                                <div class="layui-input-inline">
                                    <select name="activity_id" id="activity_id">
                                        <option value="">不限</option>
                                        <option value="1">百天照</option>
                                        <option value="2">新生/满月照</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">手机号</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" placeholder="请输入手机号"  id="phone">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">客户名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" placeholder="请输入客户名称"  id="username">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">报名时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" placeholder="请选择开始时间" id="start_time" maxlength="">
                                </div>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" placeholder="请选择结束时间" id="end_time" maxlength="">
                                </div>
                            </div>
                            <span class="layui-btn layui-btn-warm"  id="search_btn">立即搜索</span>
                            <div class="layui-btn "  id="reset">重置</div>
                        </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">百天照：</label>
                            <div class="layui-input-inline" style="margin-top: 10px;width: 400px;">
                                {$hundred}
                            </div>
                        </div>
                        <br>
                        <div class="layui-inline">
                            <label class="layui-form-label">新生/满月照：</label>
                            <div class="layui-input-inline" style="margin-top: 10px;width: 400px;" >
                                {$birthday}
                            </div>
                        </div>

                    </div>
                    <!--</form>-->
                </div>
            </div>


            <div class="cus-table">

                <table id="demo" lay-filter="demo" lay-data="{id: 'idTest'}"></table>

                <div id="pager"></div>
            </div>


        </div>
    </div>
</div>

<script>
    var activity_id = '';
    var phone = '';
    var username = '';
    var start_time = '';
    var end_time = '';

    //移除已加载的css/js文件
    function removejscssfile(filename,filetype){

        var targetelement=(filetype=="js")? "script" :(filetype=="css")? "link" : "none";

        var targetattr=(filetype=="js")?"src" : (filetype=="css")? "href" :"none";

        var allsuspects=document.getElementsByTagName(targetelement);

        console.log(allsuspects);
        for (var i=allsuspects.length; i>=0;i--){

            if (allsuspects[i] &&allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)

                allsuspects[i].parentNode.removeChild(allsuspects[i])

        }

    }

    //将老版layui.css文件移除
    removejscssfile('admin/item/css/layui','css');


    layui.use(['layer', 'table','form','laydate'], function () {
        var table = layui.table,
                layer = layui.layer,
                form = layui.form,
                laydate = layui.laydate; //日期

        laydate.render({
            elem: '#start_time'
            ,type: 'date' 	//类型（month月 year年 date天 time时间 datetime日期时间选择）
            //,range: true 	//范围选择
            //,format: 'yyyy年的m月的d号'
        });

        laydate.render({
            elem: '#end_time'
            ,type: 'date'
        });


        //第一个实例
        var tableIns=table.render({
            elem: '#demo'
            , url: '/vip/Activesmp/index' //数据接口
            ,id: 'testReload'
            ,toolbar: '#toolbarDemo'
            , page: true //开启分页
            , cols: [[ //表头
                {field:'id', title: 'ID', sort: true,templet: '#sexTpl',width:'5%'}
                ,{field:'phone', title: '手机号', align: 'center',width:'10%'}
                ,{field:'username', title: '昵称', align: 'center',width:'10%'}
                ,{field:'activity_id', title: '上门拍活动', align: 'center',width:'10%'}
                ,{field:'birthday', title: '生日', align: 'center',width:'10%'}
                ,{field:'month', title: '满月日期', align: 'center',width:'10%'}
                ,{field:'hundred', title: '百天日期', align: 'center',width:'10%'}
                ,{field:'price', title: '价格', align: 'center',width:'5%'}
                ,{field:'pay_status', title: '是否支付', align: 'center',width:'10%'}
                ,{field:'create_time', title: '报名日期', align: 'center',width:'10%'}
                ,{field:'pay_time', title: '支付日期', align: 'center',width:'10%'}

            ]],
            done: function(res, curr, count){
                $(".mark-red").parents("tr").css({
                    "color":"#fff",
                    "background":"red"
                });
            }
        });

        table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
            var id   = $(this).attr("data-id");
            if(layEvent=='edit_brand'){

                layer.open({
                    type: 2,
                    area: ['60%', '60%'],
                    maxmin: true,
                    content: 'editBrand?id='+id
                });
            }else if(layEvent=='del_brand'){

                layer.confirm('你确定删除当前事业部吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(index){
                    $.ajax({
                        type: "POST",
                        url: 'delBrand',
                        data: {id:id},
                        success: function(msg){
                            if( msg.code == 1 ){
                                table.reload('testReload', {
                                    where: {
                                        brandclass:brandclass
                                    }
                                });
                                layer.close(index);
                            }else{
                                layer.alert(msg.msg);
                                layer.msg(msg.msg, {
                                    icon: 5,
                                    shade: [0.6, '#393D49'],
                                    time:1500
                                });
                            }
                        }
                    });
                });
            }

        });
        $('.cus-model-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            $(this).addClass("active").siblings(".cus-model-btn").removeClass("active");
            if (type == "allot") {
                $("#allot-box").parent().css("overflow", "inherit");
            }
        });

        //搜索
        $('#search_btn').on('click', function(){

            activity_id = $('#activity_id').val();
            phone = $('#phone').val();
            username = $('#username').val();
            start_time = $('#start_time').val();
            end_time = $('#end_time').val();

            active['reload'].call(this);
        });
        $(document).keyup(function(event){
            if(event.keyCode ==13){
                $("#search").trigger("click");
            }
        });

        // 重置搜索条件
        $("#reset").click(function (val) {

            $("#cus-top input").val("");
            $("#cus-top select").val("");

            layui.form.render();
            return false;
        });

        //触发事件
        var active = {

            //刷新列表
            reload: function(data){

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {

                        activity_id:activity_id,
                        phone:phone,
                        username:username,
                        start_time:start_time,
                        end_time:end_time

                    }
                });
            }

        };
    });

</script>
</body>
</html>