{extend name="Public/base" /}

{block name="css"}
    <link rel="stylesheet" href="__PUBLIC__/font/fonts/iconfont.css?v={$Think.const.APP_VERSION}">
    <link rel="stylesheet" href="__PUBLIC__/css/customer.css?v={$Think.const.APP_VERSION}">
    <link rel="stylesheet" href="__PUBLIC__/css/font-awesome.min.css?v={$Think.const.APP_VERSION}">
    <link rel="stylesheet" href="__PUBLIC__/css/jquery.contextmenu.css?v={$Think.const.APP_VERSION}">
{/block}

{block name="js"}
    <!--<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>-->
    <script src="__PUBLIC__/js/jquery-ui.js"></script>
    <script src="__PUBLIC__/js/jquery.contextmenu.js"></script>
{/block}

{block name="style"}

    .layui-table-view{
        margin:0;
    }
    html,body{
        height: 100%;
        overflow: hidden;
    }

    .if_wrap .cus-con {
        min-width: 1700px;
    }

{/block}

{block name="main"}
<div class="if_wrap">
    <div class="cus-con">

        <div class="cus-top" id="cus-top">
            <div class="cus-top-left layui-form layui-form-pane1">

                <label class="layui-form-label" style="width: 90px!important;">排班名称</label>
                <div class="layui-input-block w-120" >
                    <input type="text" class="layui-input"  id="search" placeholder="排班名称">
                </div>

                <div class="layui-input-block cus-search" style="z-index: 1;">
                    <button lay-submit lay-filter="search" id="dosearch" data-type="reload"  value="查询" class="search-span" style="border-radius: 5px;">查询</button>
                </div>
                <!-- <div class="layui-input-block cus-search" style="z-index: 1;">
                    <button lay-filter="reset" id="reset"  value="重置" class="search-span" style="border-radius: 5px;">重置</button>
                </div> -->
            </div>
        </div>

        <div class="cus-filter"></div>

        <div class="cus-model">

            <button class="layui-btn layui-btn-primary cus-model-btn" id="schedule_add">
                <i class="iconfont">&#xe622;</i> 新增
            </button>
            <!-- <button class="layui-btn layui-btn-primary cus-model-btn" data-type="reload">
                <i class="iconfont">&#xe668;</i> 刷新
            </button> -->
        </div>



        <div class="cus-table">
            <table id="table1" lay-filter="table1"></table>
            <!-- <table id="demo" lay-filter="demo" lay-data="{id: 'idTest'}"></table> -->
        </div>

        </div>
</div>

<script type="text/html" id="barDemo">
    <span lay-event="edit" class="layui-btn layui-btn-normal" style="margin-top: -4px;">编辑</span>
    <span lay-event="delete" class="layui-btn layui-btn-danger del" style="margin-top: -4px;">删除</span>
</script>

<!-- details字段数据整理函数 -->
<script type="text/javascript">
    // details字段数据整理函数
    function week_2_html(str,type)
    {
        var html='';
        var day=JSON.parse(str);

        if(type == 1){
            for(var i in day)
            {
                switch(i)
                {
                    case '0':html+='周日';break;
                    case '1':html+='周一';break;
                    case '2':html+='周二';break;
                    case '3':html+='周三';break;
                    case '4':html+='周四';break;
                    case '5':html+='周五';break;
                    case '6':html+='周六';break;
                    default:
                    // n 与 case 1 和 case 2 不同时执行的代码
                }

                var bancis=day[i]

                for(var j in bancis)
                {
                    // 每一项
                    //console.log(bancis[j]);
                    html+='(' + bancis[j][0] + '-' + bancis[j][1] +')'
                }
            }
        }else{

            //html+='当天';
            for(var k in day)
            {
                // 每一项
                html+='(' + day[k][0] + '-' + day[k][1] +')'
            }
        }

        return html;
    }
</script>

<script type="text/html" id="week">
    {{ week_2_html(d.week,d.type) }}
</script>

<script>

    layui.use(['table','jquery'],function(){
        var $   = layui.jquery
        var table = layui.table

        $('#schedule_add').click(function(){
            layer.open({
                type:2,
                title:'排班添加',
                area:[1000, 700],
                content:'/oa/schedule/add',
                end:function(){
                    table_reload(table1);
                }
            })
        })

        // 初次table数据渲染
        function table_init(id)
        {
            var n_table=table.render({
                elem: id, //指定原始表格元素选择器（推荐id选择器）
                toolbar: '#toolbarDemo',
                width: 1500, //容器高度
                height: 'auto', //容器高度
                url:'{:url('get_list')}',
                response: {
                    statusName: 'code', //数据状态的字段名称，默认：code
                    statusCode: 200, //成功的状态码，默认：0
                    msgName: 'msg', //状态信息的字段名称，默认：msg
                    countName: 'count', //数据总数的字段名称，默认： count
                    dataName: 'data' //数据列表的字段名称，默认：data
                }, page: {
                    curr: 1,
                    limit: 10,
                    limits: [10, 30, 50,100],
                },
                cols: [[ //表头
                    {field:'id',   title: 'ID',align: 'center',  width:'5%'},
                    {field:'name', title: '排班名称', align: 'center',width:'20%'},
                    {field:'week', title: '具体排班', align: 'left',  width:'55%',templet: '#week'},
                    {title: '操作', align: 'center',width:'20%', toolbar: '#barDemo'},
                ]], //设置表头
                //,…… //更多参数参考右侧目录：基本参数选项
            });
            return n_table;
        }

        // table 数据重载
        function table_reload(table)
        {
            table.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    search: $('#search').val()
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        }

        // table 监听工具条  编辑 和 删除 按钮
        function table_listen(id)
        {
            table.on('tool('+id+')', function(obj){ //注：tool是工具条事件名，table1是table原始容器的属性 lay-filter="对应的值"
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                // var tr = obj.tr; //获得当前行 tr 的DOM对象

                var data = obj.data; //获得当前行数据
                // console.log(data);

                if(layEvent === 'detail'){ //查看
                    // console.log('detail');
                    //do somehing
                } else if(layEvent === 'delete'){ //删除
                    console.log('delete');

                    layer.confirm('真的删除行么', function(index){
                        

                        //向服务端发送删除指令
                        $.post("{:url('/oa/schedule/delete')}", {id:data.id},function(res){
                            // console.log(res);
                            if(res.code==200)
                            {
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);

                                layer.alert('操作成功');
                            }else
                            {
                                layer.alert(res.msg);
                                table1_reload();
                            }
                        });
                    });

                } else if(layEvent === 'edit'){ //编辑
                    console.log('edit');
                    // location.href='{:url('/oa/schedule/edit')}?id='+data.id
                    layer.open({
                        type:2,
                        title:'排班',
                        area:[1000, 700],
                        content:'/oa/schedule/edit?id=' + data.id,
                        end:function(){
                            table_reload(table1);
                        }
                    })


                    //do something

                    //同步更新缓存对应的值
                    // obj.update({
                    //     username: '123'
                    //     ,title: 'xxx'
                    // });
                }
            });
        }

        // ---------------------------
        var table1
        function init()
        {
            // 创建
            table1 = table_init('#table1')

            // 监听 工具
            table_listen('table1')

            // 点击搜索 触发重新载入 
            $('#dosearch').click(function(){
                table_reload(table1);
            })


        }
        init()

    })
</script>

{/block}