{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="style"}

{/block}

{block name="main"}

<div class="if_wrap">
    <div class="meet-wrap">
        <div class="meet-top layui-form">
            <div class="layui-inline">
                <!--
                <label class="layui-form-label">会议时</label>
                <div class="layui-input-inline">
                    <select name="meetTime">
                        <option value=""></option>
                        <option value="0">15分钟</option>
                        <option value="1">30分钟</option>
                        <option value="2">45分钟</option>
                        <option value="3">1小时</option>
                        <option value="4">2小时</option>
                        <option value="4">3小时</option>
                        <option value="4">4小时</option>
                        <option value="4">5小时</option>
                        <option value="4">6小时</option>
                        <option value="4">7小时</option>
                        <option value="4">8小时</option>
                        <option value="4">8小时以上</option>
                    </select>
                </div>
                -->
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">参会人</label>
                <div class="layui-input-inline">
                    <select name="people-num" id="people-num">
                        <option value=""></option>
                        <option value="1-10">1-10人</option>
                        <option value="11-20">11-20人</option>
                        <option value="21-30">21-30人</option>
                        <option value="31-40">31-40人</option>
                        <option value="41-50">41-50人</option>
                        <option value="51-60">51-60人</option>
                        <option value="61-70">61-70人</option>
                        <option value="71-80">71-80人</option>
                        <option value="81-90">81-90人</option>
                        <option value="91-100">91-100人</option>
                        <option value="100-9999">100人以上</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="margin-left: 10px">
                <div class="layui-btn search-btn">查询</div>
                <div class="layui-btn layui-btn-primary" id="reset">重置</div>
                <!--<span class="filter-span active">高级选项</span>-->
                <span class="filter-span" id="add-meeting">添加会议室</span>
            </div>
        </div>
        <div class="meet-con">
            <div class="meet-con-wrap">
                <div class="meet-ul-wrap">
                    <ul class="meet-ul">
                    <!--

                        <li>
                            <a class="meet-left" href="javascript:void(0);">
                                <div class="meet-row flex">
                                    <div class="room-img"><img src="__PUBLIC__/img/meet-img.jpg" alt=""></div>
                                    <div class="room-right">
                                        <div class="room-name">1号会议室</div>
                                        <div class="room-tip">坐席10人</div>
                                    </div>
                                </div>
                                <div class="meet-row meet-addr">会议室地点：奥宇科技英巢3号楼509</div>
                                <div class="meet-row">
                                    <span class="room-span">投影仪</span>
                                    <span class="room-span">投影仪</span>
                                    <span class="room-span">投影仪</span>
                                    <span class="room-span">投影仪</span>
                                </div>
                                <div class="meet-btn">不可预订</div>
                            </a>
                            <div class="meet-right">
                                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this">今天</li>
                                        <li>明天</li>
                                        <li>后天</li>
                                        <li>
                                            <input type="text" class="layui-input choose-date" >
                                        </li>
                                    </ul>
                                    <div class="layui-tab-content">
                                        <ul class="pc-ul">

                                            <li>
                                                <div class="pc-time">12:00</div>
                                                <div class="pc-con">
                                                    <div class="pc-block"></div>
                                                    <div class="pc-block"></div>
                                                    <div class="pc-block"></div>
                                                    <div class="pc-block"></div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="pc-time">13:00</div>
                                                <div class="pc-con">
                                                    <span class="pc-block"></span>
                                                    <span class="pc-block"></span>
                                                    <span class="pc-block"></span>
                                                    <span class="pc-block"></span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="pc-time">14:00</div>
                                                <div class="pc-con">
                                                    <div class="pc-block"></div>
                                                    <div class="pc-block"></div>
                                                    <div class="pc-block"></div>
                                                    <div class="pc-block"></div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="pc-time">15:00</div>
                                                <div class="pc-con">
                                                    <span class="pc-block"></span>
                                                    <span class="pc-block"></span>
                                                    <span class="pc-block"></span>
                                                    <span class="pc-block"></span>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
-->


                    </ul>
                    <div id="meet-page"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>


    layui.use(['laydate','laypage','layer','table'], function () {
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,form = layui.form;//表单操作

        var count_num = '{$count}';
        var people_num = '';
        var click_date = getDay(0);

        page_reload();
        function page_reload(){
            laypage.render({
                elem: 'meet-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:'meetingList',
                        data:'page='+page+'&pageSize='+pageSize+'&people_num='+people_num,
                        success:function(res){
                            //console.log(res);
                            if(res.code == 200){

                                count_num=res.count;
                                var data = res.data;
                                var str = '';

                                for(var i=0; i<data.length;i++){
                                    str += '<li>';
                                    str += '<a class="meet-left" data-id="'+data[i].id+'" href="javascript:void(0);">';
                                    str += '<div class="meet-row flex">';
                                    str += '<div class="room-img"><img src="__PUBLIC__/img/meet-img.jpg" alt=""></div>';
                                    str += '<div class="room-right">';
                                    str += '<div class="room-name">'+data[i].room_name+'</div>';
                                    str += '<div class="room-tip">坐席'+data[i].people_num+'人</div>';
                                    str += '</div>';
                                    str += '</div>';
                                    str += '<div class="meet-row meet-addr">会议室地点：'+data[i].address + '&nbsp;' + data[i].building + '&nbsp;' + data[i].floor + '&nbsp;' + data[i].indoor+'</div>';
                                    str += '<div class="meet-row">';
                                    //设备
                                    if(data[i].device_name){
                                        var devices = data[i].device_name.split(',');
                                        $.each(devices,function(id,item){
                                            str += '<span class="room-span">'+item+'</span>';
                                        });
                                    }

                                    str += '</div>';

//                                        str += '<div class="meet-btn" style="margin-right: 10px;">不可预订</div>';
                                    if(data[i].is_status == 2){
                                        str += '<div class="meet-btn" style="margin-right: 10px;">禁用</div>';
                                    }
                                    if(data[i].is_sp == 1){
                                        str += '<div class="meet-btn">需审批</div>';
                                    }
                                    str += '</a>';
                                    str += '<div class="meet-right" id="'+data[i].id+'">';
                                    str += '<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">';
                                    str += '<ul class="layui-tab-title">';
                                    str += '<li class="click-day layui-this" data-day="0">今天</li>';
                                    str += '<li class="click-day" data-day="1">明天</li>';
                                    str += '<li class="click-day" data-day="2">后天</li>';
                                    str += '<li>';
                                    str += '<input type="text" class="layui-input choose-date" id="'+data[i].id+'">';
                                    str += '</li>';
                                    str += '</ul>';
                                    str += '<div class="layui-tab-content">';
                                    str += '<ul class="pc-ul">';


                                    var timeData = data[i].arr;

                                    $.each(timeData,function(key,val){
                                        str += '<li>';
                                        str += '<div class="pc-time">'+val.hour+':00</div>';
                                        str += '<div class="pc-con">';

                                        var timeArray = val.array;
                                        //console.log(timeArray)
                                        $.each(timeArray,function(k,v){
                                            if(v.status == '0'){
                                                str += '<span class="pc-white"></span>';
                                            }else if(v.status == '1'){
                                                str += '<span class="pc-block"></span>';
                                            }else if(v.status == '2'){
                                                str += '<div class="pc-block forbid"></div>';
                                            }else if(v.status == '3'){
                                                str += '<div class="pc-block blue-bg" data-id="'+v.staff_id+'" data-name="'+v.staff_name+'"></div>';
                                            }else if(v.status == '4'){
                                                str += '<div class="pc-block green-bg" data-id="'+v.staff_id+'" data-name="'+v.staff_name+'"></div>'
                                            }else if(v.status == '5'){
                                                str += '<div class="pc-block dsp-bg" data-id="'+v.staff_id+'" data-name="'+v.staff_name+'"></div>'
                                            }

                                        });

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


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

                                $('.meet-ul').html(str);


                                //同时绑定多个
                                lay('.meet-ul .choose-date').each(function(){
                                    var the_this = $(this);
                                    laydate.render({
                                        elem: this
                                        ,value: threeDay
                                        ,min: 3
                                        ,isInitValue: false //是否允许填充初始值，默认为 true
                                        ,done: function(value, date, endDate){
                                            var div_id = the_this.parents('.meet-right').attr('id');

                                            //更新详情日期
                                            click_date = value;

                                            //刷新时间段状态
                                            reloadOne(div_id,value);
                                        }
                                    });
                                });

                                $('.meet-ul').on('click','.click-day',function(){
                                    var div_id = $(this).parents('.meet-right').attr('id');

                                    var day_num = $(this).attr('data-day');
                                    var newTime = getDay(day_num);

                                    //更新详情日期
                                    click_date = newTime;

                                    //刷新时间段状态
                                    reloadOne(div_id,newTime);
                                });

                            }
                        }
                    });
                }
            });
        }

        function reloadOne(room_id,one_day){
            console.log(room_id);
            console.log(one_day);
            $.ajax({
                type:'post',
                url:'/oa/Meeting/meetingCycle',
                data:{room_id:room_id,date:one_day},
                success:function(res){

                    var list = res.data;
                    var str = '';
                    $.each(list,function(key,val){
                        str += '<li>';
                        str += '<div class="pc-time">'+val.hour+':00</div>';
                        str += '<div class="pc-con">';

                        var timeArray = val.array;
                        //console.log(timeArray)
                        $.each(timeArray,function(k,v){
                            if(v.status == '0'){
                                str += '<span class="pc-white"></span>';
                            }else if(v.status == '1'){
                                str += '<span class="pc-block"></span>';
                            }else if(v.status == '2'){
                                str += '<div class="pc-block forbid"></div>';
                            }else if(v.status == '3'){
                                str += '<div class="pc-block blue-bg" data-id="'+v.staff_id+'" data-name="'+v.staff_name+'"></div>';
                            }else if(v.status == '4'){
                                str += '<div class="pc-block green-bg" data-id="'+v.staff_id+'" data-name="'+v.staff_name+'"></div>'
                            }else if(v.status == '5'){
                                str += '<div class="pc-block dsp-bg" data-id="'+v.staff_id+'" data-name="'+v.staff_name+'"></div>'
                            }

                        });

                        str += '</div>';
                        str += '</li>';
                    });
                    console.log(str)
                    $('#'+room_id).find('.pc-ul').html(str);
                    form.render();
                }
            })
        }

        function getDay(day){
            var today = new Date();
            var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
            today.setTime(targetday_milliseconds); //注意，这行是关键代码
            var tYear = today.getFullYear();
            var tMonth = today.getMonth();
            var tDate = today.getDate();
            tMonth = doHandleMonth(tMonth + 1);
            tDate = doHandleMonth(tDate);
            return tYear+"-"+tMonth+"-"+tDate;
        }

        function doHandleMonth(month){
            var m = month;
            if(month.toString().length == 1){
                m = "0" + month;
            }
            return m;
        }

        var threeDay=getDay(3);


        $('.meet-ul').on('click','.meet-left',function(){
            var room_id = $(this).attr('data-id');
            location.href = "/oa/Meeting/reserve?room_id="+room_id+"&date="+click_date;
        });

        $('.meet-ul').on('click','.pc-block',function(){
            var room_id = $(this).parents('.meet-right').attr('id');
            if($(this).hasClass("forbid")){
                layer.msg('时间一去不复返，请选择空闲时间段', {
                    icon: 5,
                    shade: [0.6, '#393D49'],
                    time:1500
                });
            }else if($(this).hasClass("blue-bg")||$(this).hasClass("green-bg")||$(this).hasClass("dsp-bg")){
                var staff_name = $(this).attr('data-name');
                layer.alert('发起人：'+staff_name);
            }else{
                location.href = "/oa/Meeting/reserve?room_id="+room_id+"&date="+click_date;
            }

        });


        //点击添加会议室
        //返回列表
        $('#add-meeting').click(function(){
            location.href = "/oa/Meeting/meetSet?view_type=edit";
        });



        //所搜
        $('.search-btn').click(function(){
            people_num = $('#people-num').val();

            $.ajax({
                type:'POST',
                url:'/oa/Meeting/meetingList',
                data:'people_num='+people_num,
                success:function(res){
                    //console.log(res);
                    if(res.code == 200){
                        count_num=res.count;
                        var data = res.data;
                        page_reload();
                    }
                }
            });

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

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

            $(".meet-top input").val("");
            $(".meet-top select").val("");

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



    });
</script>
{/block}