{extend name="Public/base" /}

{block name="js"}
<script src="__PUBLIC__/item/layui.js"></script>
{/block}

{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/css/reset.css">
<link rel="stylesheet" href="__PUBLIC__/item/css/layui.css">
<link rel="stylesheet" href="__PUBLIC__/css/meet.css">
{/block}

{block name="main"}

<div class="if_wrap">
    <div class="meet-wrap meet-home">
    <div class="meet-top layui-form">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <select name="select_type" id="select_type">
                    <option value="1">与我相关的会议</option>
                    <option value="2">我发起的会议</option>
                    <option value="3">我参与的会议</option>
                    <option value="4">所有会议</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-inline">
                <label class="layui-form-label">日期范围</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input select-time" id="start_date"  placeholder="请选择日期">
                </div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input select-time" id="end_date"  placeholder="请选择日期">
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-inline">
                <label class="layui-form-label">会议主题</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="meeting_title" style="width: 170px;" placeholder="会议主题">
                </div>
            </div>
        </div>
        <div class="layui-inline" style="margin-left: 10px">
            <div class="layui-btn search-btn">查询</div>
        </div>
    </div>
    <div class="home-content meetSet">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="click-tab layui-this" data-tab="yy">已预约</li>
                <li class="click-tab" data-tab="ing">进行中</li>
                <li class="click-tab" data-tab="end">已结束</li>
                <li class="click-tab" data-tab="not">过时未进行</li>
                <li class="click-tab" data-tab="cancel">已取消</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show" id="yy">
                    <ul class="meet-ul">
                    <!--
                        <li>
                            <div style="margin: 10px 0 0 20px;">
                                <div class="meet-row flex" style="float: left">
                                    <div class="room-right">
                                        <div class="room-name">会议主题 <small>2018-11-30 2018-12-01</small></div>
                                    </div>
                                </div>
                            </div>

                            <div class="meet-left flex">
                                <div class="meet-set-left meet-row flex">
                                    <div class="room-img"><img src="/img/meet-img.jpg" alt=""></div>
                                    <div class="room-right">
                                        <div class="room-name">1号会议室 <small>坐席10人</small></div>
                                        <div class="room-tip">会议室地点：奥宇科技英巢3号楼509</div>
                                        <div class="room-tip">发起人：张薇 主持人：张薇 与会者：1人</div>
                                        <div class="meet-row">
                                            <span class="room-span">白板</span>
                                            <span class="room-span">彩笔</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="meet-set-right">
                                    <div class="home-state">未进行</div>
                                    <div class="home-search">查看详情</div>
                                </div>
                            </div>
                        </li>
                        -->

                    </ul>
                    <div class="meet-page" id="yy-page"></div>
                </div>

                <div class="layui-tab-item" id="ing">
                    <ul class="meet-ul">

                    </ul>
                    <div class="meet-page" id="ing-page"></div>
                </div>

                <div class="layui-tab-item" id="end">
                    <ul class="meet-ul">

                    </ul>
                    <div class="meet-page" id="end-page"></div>
                </div>

                <div class="layui-tab-item" id="not">
                    <ul class="meet-ul">

                    </ul>
                    <div class="meet-page" id="not-page"></div>
                </div>

                <div class="layui-tab-item" id="cancel">
                    <ul class="meet-ul">

                    </ul>
                    <div class="meet-page" id="cancel-page"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element','form'], function () {
        var laydate = layui.laydate //日期
                ,laypage = layui.laypage //分页
                ,layer = layui.layer //弹层
                ,table = layui.table //表格
                ,form = layui.form;//表单操作
//        laypage.render({
//            elem: 'meet-page'
//            ,count: 10
//            ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
//            ,jump: function(obj){
//
//            }
//        });

        var select_type = 1;
        var start_date = "";
        var end_date = "";
        var meeting_title = "";
        var click_tab = 'yy';
        var click_page='yy-page';

        //总条数
        var count_num = "{$count}";

        //页数 每页条数
//        var page = 0;
//        var pageSize;

       page_reload();
        function page_reload(){
            laypage.render({
                elem: click_page
                ,count: count_num
                ,theme: '#01b88a'
                ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                ,limits:[3,5,10,20,30,40,50]
                ,jump: function(obj){
                    var page  = obj.curr;
                    var pageSize = obj.limit;
                    $.ajax({
                        type:'POST',
                        url:'/oa/Meeting/myMeet',
                        data:{page:page,pageSize:pageSize,select_type:select_type,start_date:start_date,end_date:end_date,meeting_title:meeting_title,click_tab:click_tab},
                        success:function(res){
                            //console.log(res);
                            if(res.code == 200){
                                count_num=res.count;
                                var data = res.data;
                                var str = getStr(data);
                            }else{
                                var str = '';
                            }
                            $('#'+click_tab).find('.meet-ul').html(str);
                        }
                    });
                }
            });
        }

        //列表刷新
//        function page_reload(data){
//            laypage.render({
//                elem: click_page
//                ,count: count_num
//                ,theme: '#01b88a'
//                ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
//                ,limits:[3,5,10,20,30,40,50]
//                ,jump: function(obj){
//                    page  = obj.curr;
//                    pageSize = obj.limit;
//                    var str = getStr(data);
//                    $('#'+click_tab).find('.meet-ul').html(str);
//                }
//            });
//        }

        //根据数据获取列表样式
        function getStr(data){
            var str = '';
            for(var i=0; i<data.length;i++){
                str += '<li class="parent-li" data-id="'+data[i].id+'">';
                str += '<div style="margin: 10px 0 0 20px;">';
                str += '<div class="meet-row flex" style="float: left">';
                str += '<div class="room-right">';
                str += '<div class="room-name">'+data[i].meeting_title+' <small>'+data[i].meeting_start+' 至 '+data[i].meeting_end+'</small></div>';
                str += '</div>';
                str += '</div>';
                str += '</div>';
                str += '<div class="meet-left flex">';
                str += '<div class="meet-set-left meet-row flex">';
                str += '<div class="room-img"><img src="/img/meet-img.jpg" alt=""></div>';
                str += '<div class="room-right">';
                str += '<div class="room-name">'+data[i].room_name+' <small>坐席'+data[i].people_num+'人</small></div>';
                str += '<div class="room-tip">会议室地点：'+data[i].address + '&nbsp;' + data[i].building + '&nbsp;' + data[i].floor + '&nbsp;' + data[i].indoor+'</div>';

                var join_num = 0;
                if(data[i].join_staff_id){
                    var join_staff_array = data[i].join_staff_id.split(',');
                    join_num = join_staff_array.length;

                }
                str += '<div class="room-tip">发起人：'+data[i].staff_name+' 主持人：'+data[i].host_staff_name+' 与会者：'+join_num+'人</div>';
                str += '<div class="meet-row">';

                if(data[i].device_name){
                    var device_array = data[i].device_name.split(',');
                    var device_str = '';
                    $.each(device_array,function(k,v){
                        str += '<span class="room-span">'+v+'</span>';
                    });
                }

                str += '</div>';
                str += '</div>';
                str += '</div>';
                str += '<div class="meet-set-right">';
                if(data[i].status == 1){
                    str += '<div class="home-state">未进行</div>';
                }else if(data[i].status == 2){
                    str += '<div class="home-state">进行中</div>';
                }else if(data[i].status == 3){
                    str += '<div class="home-state">已结束</div>';
                }else if(data[i].status == 4){
                    str += '<div class="home-state">已取消</div>';
                }

                str += '<div class="home-search get-info">查看详情</div>';
                if(click_tab == 'yy'){
                    str += '<div class="home-search recall" style="margin-top: 10px;color: #d9534f;">取消</div>';
                }

                str += '</div>';
                str += '</div>';
                str += '</li>';
            }
            return str;
        }

        //选择时间插件
        $('.select-time').each(function(){
            laydate.render({
                elem: this
                ,type: 'date'
            });
        });

        function clickReload(){
            $.ajax({
                type:'POST',
                url:'/oa/Meeting/myMeet',
                data:{select_type:select_type,start_date:start_date,end_date:end_date,meeting_title:meeting_title,click_tab:click_tab},
                success:function(res){
                    //console.log(res);
                    if(res.code == 200){
                        count_num=res.count;
                        var data = res.data;
                        page_reload(data);
                    }
                }
            });
        }

        //根据所点击tab 更新变量tab值
        $('.click-tab').click(function(){
            click_tab = $(this).attr('data-tab');
            click_page = $('#'+click_tab).find('.meet-page').attr('id');

            select_type = $('#select_type').val();
            start_date =$('#start_date').val();
            end_date = $('#end_date').val();
            meeting_title = $('#meeting_title').val();

            clickReload()
        });

        $('.search-btn').click(function(){
            select_type = $('#select_type').val();
            start_date =$('#start_date').val();
            end_date = $('#end_date').val();
            meeting_title = $('#meeting_title').val();

            clickReload()
        });

        //回车键
        $(document).keyup(function(event){
            if(event.keyCode ==13){
                $("#search-btn").trigger("click");
            }
        });

        $('body').on('click','.get-info',function(){
            var id = $(this).parents('.parent-li').attr('data-id');
            location.href = '{:url("meetingInfo")}'+'?meeting_id='+id;
        });

        $('body').on('click','.recall',function(){
            var id = $(this).parents('.parent-li').attr('data-id');
            layer.confirm('你确定取消此会议吗？', {
                btn: ['确定','取消'] //按钮
            }, function(index){
                $.ajax({
                    type: "POST",
                    url: '{:url("recallMeeting")}',
                    data: {id:id},
                    success: function(msg){
                        if( msg.code == 200 ){
                            layer.close(index);
                            clickReload()
                        }else{
                            layer.alert(msg.msg);
                        }
                    }
                });
            });
        })

    });
</script>
{/block}