{extend name="Public/base" /}

{block name="js"}
<script src="__PUBLIC__/js/jquery-3.2.1.min.js"></script>
<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 meet-detail">
    <div class="meet-top">
        <button class="layui-btn layui-btn-primary" onClick="javascript :history.back(-1);">返回</button>
        <button class="layui-btn" id="save-btn" style="float: right">发起会议</button>
    </div>
    <div class="meet-con">
        <div class="meet-con-wrap">
            <div class="meet-ul-wrap">
                <ul class="meet-ul">
                    <li>
                        <div class="meet-left flex">
                            <div class="meet-row flex" style="float: left">
                                <div class="room-img"><img src="__PUBLIC__/img/meet-img.jpg" alt=""></div>
                                <div class="room-right">
                                    <div class="room-name">{$detail.room_name} <small>坐席{$detail.people_num}人</small></div>
                                    <div class="room-tip">会议室地点：{$detail.address}{$detail.building}{$detail.floor}{$detail.indoor}</div>
                                </div>
                            </div>
                            <div class="meet-row top-right-row">
                                <div>
                                    {volist name='device' id='vo'}
                                    <span class="room-span">{$vo}</span>
                                    {/volist}
                                </div>
                                <div>会议日期：<span id="meeting-start-time">2018-11-28 11:15</span>至<span  id="meeting-end-time">2018-11-28 11:30</span></div>
                                <div>会议时长：<span id="meeting-minute">15分钟</span></div>
                            </div>
                        </div>
                        <div class="meet-right">
                            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                                <ul class="layui-tab-title">
                                    <li class="layui-this click-day" data-day="0">今天</li>
                                    <li class="click-day" data-day="1">明天</li>
                                    <li class="click-day" data-day="2">后天</li>
                                    <li>
                                        <input type="text" class="layui-input choose-date" id="date">
                                    </li>
                                </ul>
                                <div class="layui-tab-content">
                                    <ul class="pc-ul">
                                        {volist name='cycle' id='vv'}
                                        <li>
                                            <div class="pc-time">{$vv.hour}:00</div>
                                            <div class="pc-con" data-hour="{$vv.hour}">
                                            {volist name="$vv.array" id="val"}
                                                {if $val.status=='0'}
                                                <div data-start="{$val.start}" data-end="{$val.end}" class="pc-white"></div>
                                                {elseif $val.status=='1'}
                                                <div data-start="{$val.start}" data-end="{$val.end}" class="pc-block canChoose"></div>
                                                {elseif $val.status=='2'}
                                                <div data-start="{$val.start}" data-end="{$val.end}" class="pc-block forbid"></div>
                                                {elseif $val.status=='3'}
                                                <div data-start="{$val.start}" data-end="{$val.end}" class="pc-block blue-bg disChoose">
                                                    <div class="dsp-text">{$val.staff_name}</div>
                                                    <div class="dsp-text">已预约</div>
                                                </div>
                                                {elseif $val.status=='4'}
                                                <div data-start="{$val.start}" data-end="{$val.end}" class="pc-block green-bg disChoose">
                                                    <div class="dsp-text">{$val.staff_name}</div>
                                                    <div class="dsp-text">已预约</div>
                                                </div>
                                                {elseif $val.status=='5'}
                                                <div data-start="{$val.start}" data-end="{$val.end}" class="pc-block dsp-bg disChoose">
                                                    <div class="dsp-text">{$val.staff_name}</div>
                                                    <div class="dsp-text">待审批</div>
                                                </div>
                                                {/if}
                                            {/volist}

                                            </div>
                                        </li>
                                        {/volist}

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="meet-from layui-form" id="form1">

                    <div class="meet-form-left">
                        <div class="meet-form-row flex choose-host">
                            <div class="meet-form-label">主持人</div>
                            <div class="meet-form-content">
                                <span class="border-span host-staff">{$Think.session.staff_name}</span>
                                <!--<img class="head-img" src="__PUBLIC__/img/head-img.png" alt="">-->
                            </div>
                            <div class="r_arw"></div>
                        </div>

                        <div class="meet-form-row choose-join">
                            <div class="row-content flex">
                                <div class="meet-form-label">参会人员</div>
                                <div class="meet-form-content join-num">1人</div>
                            </div>
                            <div class="row-content flex">
                                <div class="meet-form-label join-staff" style="width: 87%;">
                                    <!--<img class="head-img" src="__PUBLIC__/img/head-img.png" alt="">-->
                                    <span class="border-span">{$Think.session.staff_name}</span>
                                </div>
                                <div class="meet-form-content" style="width: 17%;">
                                    <span class="form-span">请选择</span>
                                    <!--<span>|</span>-->
                                    <!--<span class="border-span">选择群组</span>-->
                                </div>
                                <div class="r_arw"></div>
                            </div>
                        </div>
                        <!--<div class="meet-form-row flex">-->
                            <!--<div class="meet-form-label">抄送人员</div>-->
                            <!--<div class="meet-form-content">请选择</div>-->
                            <!--<div class="r_arw"></div>-->
                        <!--</div>-->

                        <div class="meet-form-row flex" id="remind-btn">
                            <div class="meet-form-label" style="width: 10%;">提醒</div>
                            <div class="meet-form-content" style="width: 90%;">
                                <span id="remind-str">无提醒</span>
                            </div>
                            <input type="hidden" name="">
                            <div class="r_arw"></div>
                        </div>

                        <div class="meet-form-row flex">
                            <div class="meet-form-label">
                                预计参会人数
                                <input type="text" autocomplete="off" id="join_num" placeholder="输入人数" class="meet-label-input layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="meet-form-right">
                        <div class="meet-form-row flex">
                            <div class="right-row-content flex">
                                <span>会议主题</span>
                                <input type="text" autocomplete="off" id="meeting_title" placeholder="*必填-请输入本次会议的主题" class="meet-label-input meet-right-input layui-input">
                            </div>
                            <div class="font-num">50字</div>
                        </div>
                        <div class="meet-form-row flex flex-start">
                            <div class="right-row-content flex flex-start">
                                <span>会议描述</span>
                                <textarea id="meeting_content" placeholder="请输入本次会议的描述" class="meet-label-input meet-right-input layui-textarea"></textarea>
                            </div>
                            <div class="font-num">500字</div>
                        </div>
                        <div class="meet-form-row">
                            <div class="right-row flex" style="height: 65px;">
                                <div class="right-row-content flex">
                                    <span>会议议题</span>
                                    <input type="text" id="meeting_issue" autocomplete="off" placeholder="输入会议议题" class="meet-label-input meet-right-input layui-input">
                                </div>
                                <div class="font-num">50字</div>
                                <!--删除议题-->
                                <!--<div class="form-operation delete-btn"><img src="__PUBLIC__/img/delete.png" alt=""></div>-->
                            </div>
                            <div class="right-row">
                                <!--加多个议题-->
                                <!--<div class="form-operation add-btn"><img src="__PUBLIC__/img/add.png" alt=""></div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!--添加模板-->
<div id="template" class="right-row flex" style="display: none">
    <div class="right-row-content flex">
        <span>会议议题</span>
        <input type="text" autocomplete="off" placeholder="输入会议议题" class="meet-label-input meet-right-input layui-input">
    </div>
    <div class="font-num">0/50</div>
    <div class="form-operation delete-btn"><img src="__PUBLIC__/img/delete.png" alt=""></div>
</div>
<!--提醒-->
<div id="remind-wrap" style="display: none;padding: 20px">
    <div class="layui-form">
        <div class="remind-row">
            <input type="checkbox" name="tip" lay-skin="primary" lay-filter="is_remind" title="无提醒" value="no" checked="">
        </div>
        <div class="remind-row remind-add">
            <input type="checkbox" name="tip1" lay-skin="primary" lay-filter="remind" value="0" title="准时提醒">
            <input type="checkbox" name="tip1" lay-skin="primary" lay-filter="remind" value="5" title="提前5分钟">
        </div>
        <div class="remind-row  remind-add">
            <input type="checkbox" name="tip1" lay-skin="primary" lay-filter="remind" value="15" title="提前15分钟">
            <input type="checkbox" name="tip1" lay-skin="primary" lay-filter="remind" value="60" title="提前1小时">
        </div>
        <div class="remind-row  remind-add">
            <input type="checkbox" name="tip1" lay-skin="primary" lay-filter="remind" value="30" title="提前30分钟">
            <input type="checkbox" name="tip1" lay-skin="primary" lay-filter="remind" value="120" title="提前2小时">
        </div>
        <div class="remind-row  remind-add">
            <input type="checkbox" name="tip1" lay-skin="primary" lay-filter="remind" value="1440" title="提前1天">
            <input type="checkbox" name="tip1" lay-skin="primary" lay-filter="remind" value="2880" title="提前2天">
        </div>
        <!--<div class="remind-row">-->
            <!--<input type="checkbox" name="tip1" lay-skin="primary" title="提前一周">-->
        <!--</div>-->
        <!--<div class="remind-row">-->
            <!--<input type="checkbox" name="tip1" lay-skin="primary" title="提前1天">-->
            <!--<input type="checkbox" name="tip1" lay-skin="primary" title="会议结束前15分钟">-->
        <!--</div>-->
    </div>
</div>

<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element','form'], function () {
        var clickDate = "{$date}";
        var meetingStartTime = null;//会议开始时间
        var meetingEndTime = null;  //会议结束时间
        var meeting_duration = null;//会议持续时长

        var laydate = layui.laydate //日期
                ,laypage = layui.laypage //分页
                ,layer = layui.layer //弹层
                ,table = layui.table //表格
                ,carousel = layui.carousel //轮播
                ,upload = layui.upload //上传
                ,element = layui.element//元素操作
                ,form = layui.form;//表单操作
        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);

        //时间插件
        laydate.render({
            elem: '#date'
            ,value: threeDay
            ,min: 3
            ,isInitValue: false //是否允许填充初始值，默认为 true
            ,done: function(value, date, endDate){
                var now_day = new Date("{$date}");
                var click_day = new Date(value);
                var day_num = (click_day - now_day) / (1000 * 60 * 60 * 24);

                clickDate = value;
                //刷新时间段
                reloadOne(value,day_num);
            }
        });

        //点击 今天、明天、后天
        $('.meet-ul').on('click','.click-day',function(){

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

            clickDate = click_day;
            //刷新时间段
            reloadOne(click_day,day_num);

        });


        //给每个时间段编号
        var meetStart=null,meetEnd=null,clickStartTime=null,clickEndTime=null;
        function getNum(num){

            var cycle_num = parseInt($(".pc-block").length) * num;

            $(".pc-block").each(function(index){
                $(this).attr("data-id",cycle_num+index);
            });
        }

        //获取不可编辑数组
        var disArr=[],disNum=null;
        var getDisArr=function(){
            disArr=[];
            $.each($(".disChoose"),function(index,dom){
                var disId=parseInt($(dom).attr("data-id"));
                disArr.push(disId);
            });
        };

        //加载页面后 给今日时间段排序
        getNum(0);
        //获取今日 已预约时间段
        getDisArr();


        //获取截止时间段的开始时间和结束时间
        function updateCycleTime(the_this){
            //选中小时
            var clickHour = the_this.parents('.pc-con').attr('data-hour').toString();
            clickHour = clickHour.length == 2 ? clickHour : '0'+clickHour;
            //选中的分钟
            var clickStartMinute = the_this.attr('data-start');
            var clickEndMinute = the_this.attr('data-end');

            clickStartTime = clickDate + ' ' +clickHour+':'+clickStartMinute+':00';

            if(clickEndMinute == '60'){
                clickHour = parseInt(clickHour) +1;
                clickEndMinute = "00";
            }
            clickEndTime = clickDate + ' ' +clickHour+':'+clickEndMinute+':00';
        }

        var days,allMinute;
        //计算两个时间间隔差
        function getMinute(time1,time2){
            console.log(time2);
            var return_str = '';

            //截取字符串，得到日期部分"2009-12-02",用split把字符串分隔成数组
            var begin1=time1.substr(0,10).split("-");
            var end1=time2.substr(0,10).split("-");

            //相隔天数
            var date1=begin1[2];
            var date2=end1[2];
            days = parseInt(parseInt(date2) - parseInt(date1));

            if(days && days > 0){
                return_str += days+'天';

                //单次可连续预约多天会议（单位天），1不允许，0不限制
                var continuous = "{$set.continuous}";
                if(continuous!=0 && days > continuous){
                    layer.alert('单次可连续预约天数为'+continuous+'天');
                    //return false;
                }
            }

            //小时数和分钟数相加得到总的分钟数
            //time1.substr(11,2)截取字符串得到时间的小时数
            //parseInt(time1.substr(11,2))*60把小时数转化成为分钟
            var min1=parseInt(time1.substr(11,2))*60+parseInt(time1.substr(14,2));
            var min2=parseInt(time2.substr(11,2))*60+parseInt(time2.substr(14,2));

            //两个分钟数相减得到时间部分的差值，以分钟为单位
            var n=min2-min1;
            allMinute = days * 24 * 60 + n;

            //单次会议最大时长限制
            var meeting_duration = "{$set.meeting_duration}";
            if(meeting_duration && meeting_duration != 0 && allMinute > meeting_duration){
                layer.alert('会议最大时长限制'+meeting_duration+'分钟');
                //return false;
            }

            var hours = parseInt(n / 60);
            var minutes = n - hours * 60;
            if(hours && hours > 0 ){
                return_str += hours+'小时';
            }

            if(minutes && minutes > 0 ){
                return_str += minutes+'分钟';
            }

            return return_str;
        }

        //点击预约
        $("body").on("click",".pc-block",function(){
            if($(this).hasClass("forbid")){
                //时间已过 不可选
                layer.msg('时间一去不复返，请选择空闲时间段', {
                    icon: 5,
                    shade: [0.6, '#393D49'],
                    time:1500
                });
            }else if($(this).hasClass("dsp-bg")){
                //待审批
                //alert(2)
            }else if($(this).hasClass("canChoose")){
                $(".pc-block").removeClass("add-bg");
                disNum=null;
                var clickId=parseInt($(this).attr("data-id"));

                //选中此时间段的开始时间和结束时间
                updateCycleTime($(this));

                if(meetStart==null){
                    meetStart=clickId;
                    meetingStartTime = clickStartTime;
                    meetingEndTime = clickEndTime;
                    $(this).addClass("add-bg");
                }else{
                    if(meetStart<clickId){
                        $.each(disArr,function(index,data){
                            if(meetStart<data&&data<clickId){
                                disNum=data;
                                return false;
                            }
                        });
                        if(disNum){
                            meetEnd=disNum-1;
                        }else{
                            meetEnd=clickId;
                        }

                        //会议结束时间 重新赋值
                        var the_this = $("div[data-id='"+meetEnd+"']");
                        updateCycleTime(the_this);
                        meetingEndTime = clickEndTime;

                    }else if(clickId<meetStart){
                        console.log('点击到的--'+clickId);
                        $.each(disArr,function(index,data){
                            if(data>clickId&&data<meetStart){
                                disNum=data;
                                return false;
                            }
                        });
                        console.log('最后一个（已预约的）--'+disNum);

                        if(disNum){
                            meetEnd=disNum-1;
                        }else if(meetEnd==null){
                            meetEnd=meetStart;
                        }
                        meetStart=clickId;

                        console.log('开始'+meetStart);

                        //会议开始时间 重新赋值
                        updateCycleTime($(this));
                        meetingStartTime = clickStartTime;

                        //结束时间 重新赋值
//                        var end_this = $("div[data-id='"+meetEnd+"']");
//                        updateCycleTime(end_this);
//                        meetingEndTime = clickEndTime;

                    }else if(clickId==meetStart){
                        meetStart=null;
                        meetEnd=null;
                    }
                }
            }
            console.log(meetingStartTime,meetingEndTime);
            $('#meeting-start-time').html(meetingStartTime);
            $('#meeting-end-time').html(meetingEndTime);
            meeting_duration = getMinute(meetingStartTime,meetingEndTime);
            $('#meeting-minute').html(meeting_duration);
            selectCycle();
        });

        //把应该选中的时间段标绿
        function selectCycle(){
            $.each($(".pc-block"),function(index,dom){
                var dataId=$(dom).attr("data-id");
                if(meetStart<=dataId&&dataId<=meetEnd){
                    $(dom).addClass("add-bg");
                }else if(meetStart==null&&meetEnd==null){
                    $(".pc-block").removeClass("add-bg");
                }
            })
        }

        //刷新某会议室某一天的预约情况
        function reloadOne(one_day,day_num){
            var room_id = "{$detail.id}";
            $.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"  data-hour="'+val.hour+'">';

                        var timeArray = val.array;
                        //console.log(timeArray)
                        $.each(timeArray,function(k,v){
                            if(v.status == '0'){
                                str += '<div data-start="'+ v.start+'" data-end="'+ v.end+'" class="pc-white"></div>';
                            }else if(v.status == '1'){
                                str += '<div data-start="'+ v.start+'" data-end="'+ v.end+'" class="pc-block canChoose"></div>';
                            }else if(v.status == '2'){
                                str += '<div data-start="'+ v.start+'" data-end="'+ v.end+'" class="pc-block forbid"></div>';
                            }else if(v.status == '3'){
                                str += '<div data-start="'+ v.start+'" data-end="'+ v.end+'" class="pc-block blue-bg disChoose">';
                                str += '<div class="dsp-text">'+ v.staff_name+'</div>';
                                str += '<div class="dsp-text">已预约</div>';
                                str += '</div>';
                            }else if(v.status == '4'){
                                str += '<div data-start="'+ v.start+'" data-end="'+ v.end+'" class="pc-block green-bg disChoose">';
                                str += '<div class="dsp-text">'+ v.staff_name+'</div>';
                                str += '<div class="dsp-text">已预约</div>';
                                str += '</div>'
                            }else if(v.status == '5'){
                                str += '<div data-start="'+ v.start+'" data-end="'+ v.end+'" class="pc-block dsp-bg disChoose">';
                                str += '<div class="dsp-text">'+ v.staff_name+'</div>';
                                str += '<div class="dsp-text">待审批</div>';
                                str +='</div>';
                            }

                        });

                        str += '</div>';
                        str += '</li>';
                    });
                    $('.pc-ul').html(str);

                    //给时间段排序
                    getNum(day_num);
                    //获取已预约时间段
                    getDisArr();
                    //将该选中的时间段标绿
                    selectCycle();
                }
            })
        }

        var host_staff_id = "{$Think.session.staff_id}",host_staff_name = "{$Think.session.staff_name}",join_staff_id = [],join_staff_name = [],remind = [],remind_title = [];

        //会议主持人
        $('.choose-host').click(function(){
            load_page(
                '/oa/Dept/selector?get_type=3',
                '选择会议主持人',
                function(){
                    get_select(function(res){
                        host_staff_id = res[0].staffid;
                        host_staff_name = res[0].name;
                        $('.host-staff').html(host_staff_name);
                    });
                },
                ['确定','取消'],
                900,600
            );
        });

        //参会人员
        $('.choose-join').click(function(){
            load_page(
                '/oa/Dept/selector?get_type=3',
                '选择会议主持人',
                function(){
                    get_select(function(res){

                        $.ajax({
                            type:'post',
                            url:'/oa/Dept/get_all_tkp_staff',
                            data:{data:res},
                            success:function(result){
                                join_staff_id = [];
                                join_staff_name = [];
                                join_staff_id.push("{$Think.session.staff_id}");
                                join_staff_name.push("{$Think.session.staff_name}");

                                var staffData = result.data;
                                var join_str = '<span class="border-span">'+"{$Think.session.staff_name}"+'</span>';
                                $.each(staffData,function(key,value){

                                    var num = join_staff_id.indexOf(value);
                                    if (num == '-1') {
                                        join_staff_id.push(value.id);
                                        join_staff_name.push(value.staffname);
                                        join_str += '<span class="border-span">'+value.staffname+'</span>';
                                    }

                                });
                                $('.join-staff').html(join_str);
                                $('.join-num').html(join_staff_id.length+'人');
                            }
                        })
                    });
                },
                ['确定','取消'],
                900,600
            );
        });


        //添加会议议题
        $("body").on("click",".add-btn",function(){
            var tem=$("#template").clone();
            tem.attr("id","");
            tem.show();
            $(this).parent().before(tem);
        });

        //删除会议议题
        $("body").on("click",".delete-btn",function(){
            if($(".delete-btn").length<3){
                return false;
            }else{
                $(this).parent().remove();
            }
        });

        //提醒弹窗
        $("#remind-btn").click(function(){
            layer.open({
                title: '提醒时间',
                type: 1,
                skin: 'layui-layer-rim',
                area: ['740px', '550px'],
                content: $('#remind-wrap'),
                btn: ['确定']
            });
        });

        //选择会议提醒
        form.on('checkbox(remind)', function(data){
            if(data.elem.checked){
                remind.push(data.value);
                remind_title.push(data.elem.title);
            }else{
                $.each(remind,function(id,item){
                    if(item==data.value){
                        remind.splice(id, 1);
                    }
                });

                $.each(remind_title,function(id,item){
                    if(item==data.elem.title){
                        remind_title.splice(id, 1);
                    }
                });
            }

            $('#remind-str').html(remind_title.join(','));
        });

        $('#save-btn').click(function(){
            var room_id = "{$detail.id}";
            var meeting_is_sp = "{$detail.is_sp}";
            var join_num = $('#join_num').val();
            var meeting_title = $('#meeting_title').val();
            var meeting_content = $('#meeting_content').val();
            var meeting_issue = $('#meeting_issue').val();

            if(!meeting_title){
                layer.alert("请填写会议主题");
                return false;
            }

            //单次可连续预约多天会议（单位天），1不允许，0不限制
            var continuous = "{$set.continuous}";
            if(continuous!=0 && days > continuous){
                layer.alert('单次可连续预约天数为'+continuous+'天,请联系会议室管理员');
                return false;
            }

            //单次会议最大时长限制
            var set_meeting_duration = "{$set.meeting_duration}";
            if(set_meeting_duration && set_meeting_duration != 0 && allMinute > set_meeting_duration){
                layer.alert('会议最大时长限制'+set_meeting_duration+'分钟');
                return false;
            }

            $.ajax({
                type:'post',
                url:'/oa/Meeting/reserve',
                data:{room_id:room_id,meeting_is_sp:meeting_is_sp,meeting_start:meetingStartTime,meeting_end:meetingEndTime,meeting_duration:meeting_duration,host_staff_id:host_staff_id,host_staff_name:host_staff_name,join_staff_id:join_staff_id,join_staff_name:join_staff_name,remind:remind,join_num:join_num,meeting_title:meeting_title,meeting_content:meeting_content,meeting_issue:meeting_issue},
                success:function(res){
                    if(res.code == 200){
                        layer.alert('预约成功,返回预约列表页',function(){
                            history.back(-1);
                        });
                    }
                }
            })
        })

    });
</script>
{/block}