{extend name="Public/base" /}

{block name="css"}
<!--<link rel="stylesheet" href="__PUBLIC__/item2/css/layui.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/set.css?v={$Think.const.APP_VERSION}">
{/block}

<style>
    .layui-row{
        min-height:40px!important;
    }
</style>

{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
        <div class="set_tit" style="float:left;"><span>考勤规则</span></div>

        <style type="text/css">
            .layui-input-inline{width:100px !important;}
        </style>

        <form class="layui-form">

            {if condition="$details['id']"}
                <input type="hidden" name="id" value="{$details['id']}">
                <input type="hidden" name="rule_type" value="{$details['rule_type']}">
            {/if}

            <div class="layui-row">

                <div class="layui-col-sm6">

                    <div class="layui-row" style="min-height:40px">
                        <div class="layui-col-sm2" style=":green">
                            <label class="layui-form-label" style="float:right;white-space: nowrap">考勤规则名称</label>
                        </div>
                        <div class="layui-col-sm4">
                            <input class="layui-input" name="name">
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 115px;">选择组织架构</label>
                        <div class="layui-input-block">

                            {if detail.id}
                            <button class="layui-btn" type="button" id="start_choose">&nbsp;&nbsp;增加&nbsp;&nbsp;</button>
                            {else}
                            <button class="layui-btn" type="button" id="start_choose">&nbsp;&nbsp;选择&nbsp;&nbsp;</button>
                            {/if}


                        </div>
                        <!-- <div class="layui-form-mid layui-word-aux"></div> -->
                    </div>

                    {if condition="$details['id']"}
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 115px;">已经选中</label>
                        <div class="layui-input-block">
                            <div  style="background:##01b88a;width:400px;border-radius:20px;line-height:30px">
                                {volist name='str' id='ss'}
                                <p>{$ss}</p>
                                {/volist}
                            </div>
                        </div>

                    </div>
                    {/if}


                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 115px;">新增选中</label>
                        <div class="layui-input-block">
                            <div id="area" style="background:##01b88a;width:400px;border-radius:20px;line-height:30px">

                            </div>
                        </div>
                        <!-- <div class="layui-form-mid layui-word-aux"></div> -->
                    </div>


                    <hr>


                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 115px;">排班类型</label>
                        <div class="layui-input-block" style="width:400px">
                            <input type="radio" name="rule_type" value="1" title="固定班制(每周考勤时间一样)" lay-filter="pb_type" {if $details.rule_type neq 2} checked {/if} {if condition="$details.id"}disabled{/if}>
                            <input type="radio" name="rule_type" value="2" title="排班制（每周考勤时间不一样，自定义设置）" lay-filter="pb_type" {if $details.rule_type eq 2} checked {/if} {if condition="$details.id"}disabled{/if}>
                        </div>
                    </div>


                    <div id="months_schedule_list" {if $details.rule_type eq 2} style="display: none;" {/if}>

                    </div>

                    <div class="layui-form-item" id="diy_banci" {if $details.rule_type neq 2} style="display: none;" {/if}>
                        <label class="layui-form-label" style="width: 115px;">选择班次</label>
                        <div class="layui-input-block" style="width:500px">
                            {volist name="$diy_banci" id="vo"}
                            <div style="float: left;width: 100px;">
                                <input type="checkbox" name="banci[]" value="{$vo['id']}" title="{$vo['name']}" lay-filter="cateCheckbox" {if in_array($vo.id,$banci_option)} checked {/if} lay-skin="primary" >
                            </div>
                            {/volist}
                        </div>
                    </div>


                    <hr>

                    <div class="layui-row" style="margin-top: 20px;">
                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;">wifi限定</label>
                        </div>

                        <div class="layui-col-sm2" >
                            <input type="checkbox" name="limit[]" value="wifi" id="limit_wifi" title="wifi">
                        </div>

                        <div class="layui-col-sm2" >
                            <input type="button" value="+" class="layui-btn " id="jia_wifi">
                            <input type="button" value="-" class="layui-btn layui-btn-danger " id="jian_wifi">
                        </div>

                        <div class="layui-col-sm6">
                            <span id="wifi_list"></span> 
                        </div>

                    </div>

                    <br>

                    <div class="layui-row" style="min-height:40px">
                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;">ip限定</label>
                        </div>

                        <div class="layui-col-sm2">
                            <input type="checkbox" name="limit[]" value="ip" title="&nbsp;&nbsp;ip" class="layui-col-sm2" id="limit_ip">
                        </div>

                        <div class="layui-col-sm2">
                            <input type="button" value="+" class="layui-btn " id="jia_ip">
                            <input type="button" value="-" class="layui-btn layui-btn-danger " id="jian_ip">
                        </div>
                        <div class="layui-col-sm6">
                            <span id="ip_list"></span> 
                        </div>

                    </div>

                    <div class="layui-row" style="min-height:40px">
                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;">弹性否(分钟)</label>
                        </div>
                        <div class="layui-col-sm2">
                            <select name="flex_type">
                                <option value="非弹性">非弹性</option>
                                <option value="弹性">弹性</option>
                            </select>
                        </div>
                        <div class="layui-col-sm2">
                            <input class="layui-input" name="flex_time" placeholder="分钟">
                        </div>
                    </div>

                    <div class="layui-row" style="min-height:40px">
                        
                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;white-space: nowrap">迟到区间(分钟)</label>
                        </div>
                        <div class="layui-col-sm2">
                            <input class="layui-input" name="late_offset" placeholder="分钟">
                        </div>
                    </div>

                    <div class="layui-row" style="min-height:40px">
                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;width:100%">加班起算时长(分钟)</label>
                        </div>

                        <div class="layui-col-sm2">
                            <input class="layui-input" name="today_overtime">
                        </div>
                    </div>

                    <div class="layui-row" style="min-height:40px">
                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;width:100%">隔日加班终止点</label>
                        </div>

                        <div class="layui-col-sm2">
                            <input class="layui-input H_i_s" name="tomorrow_end">
                        </div>
                    </div>

                    <div class="layui-row" style="min-height:40px">
                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;width:100%">加班处理方式</label>
                        </div>

                        <div class="layui-col-sm2" style="width: 200px;">
                            <input type="radio" name="overtime_award" lay-filter="overtime_award" value="1" title="加班费" {if $details.overtime_award eq 1} checked {elseif $details.overtime_award neq 2} checked{/if}>
                            <input type="radio" name="overtime_award" lay-filter="overtime_award" value="2" title="调休" {if $details.overtime_award eq 2} checked{/if}>
                        </div>
                    </div>

                    <div class="layui-row" id="overtime_award_money" {if $details.overtime_award eq 2} style="display: none;min-height:40px;"{else} style="min-height:40px;" {/if}>

                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;width:100%">休息日加班费</label>
                        </div>
                        <div class="layui-col-sm2">
                            <input class="layui-input" name="overtime_award_money" value="{$details.overtime_award_money}" placeholder="多少元/天">
                        </div>
                        <div class="layui-col-sm2">
                           <p style="margin-top: 4px;">元</p>
                        </div>
                    </div>

                    <div class="layui-row" id="overtime_holiday_money" {if $details.overtime_award eq 2} style="display: none;min-height:40px;"{else} style="min-height:40px;" {/if}>

                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;width:100%">节假日加班费</label>
                        </div>
                        <div class="layui-col-sm2">
                            <input class="layui-input" name="overtime_holiday_money" value="{$details.overtime_holiday_money}" placeholder="多少元/天">
                        </div>
                        <div class="layui-col-sm2">
                            <p style="margin-top: 4px;">元</p>
                        </div>
                    </div>


                    <div class="layui-row" style="margin-top: 20px;">

                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;"></label>
                        </div>
                        <div class="layui-col-sm5">
                            <input type="button" class="layui-btn" id="submit" value="保存设置">
                        </div>
                        
                    </div>
                </div>
                <div class="layui-col-sm6" >
                    
                    <div class="layui-row" style="min-height:40px">
                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;">附近街道</label>
                        </div>

                        <div class="layui-col-sm4">
                            <input class="layui-input" name="address" id="suggestId">
                        </div>

                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;">半径(米)</label>
                        </div>
                        <div class="layui-col-sm2">
                            <input class="layui-input" name="radius" id="radius" value="{$details['radius']|default=100}">
                        </div>
                    </div>
                    <div class="layui-row" >

                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;"></label>
                        </div>
                        <div class="layui-col-sm5">
                            <label class="layui-form-label" style="text-align:left;width:100%">
                                <span id="longitude_latitude" style="display: inline-flex;">
                                    <input 
                                    class="layui-input"
                                    type="text" 
                                    maxlength='12' 
                                    style="width:110px;margin-right: 10px;" 
                                    name="longitude" 
                                    id="longitude" 
                                    onkeypress="if(event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false"
                                        />
                                    <input class="layui-input" maxlength="12" style="width:110px;margin-right: 10px;" name="latitude" id="latitude" onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false">
                                    <input type="button" class="layui-btn" value ="搜索坐标" id="search_geo">
                                </span> 
                            </label>
                            <div id="baidu_map" style="width:500px;height:500px;overflow:hidden !important; border:1px solid #dcdcdc"></div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <!-- 页面隐藏的结构 开始 -->
            <span style="display:none;" id="modes">

                <!-- 单个 月份组-排班  开始 -->
                    <div class="layui-row months_schedule" data-key="0" data-months="[]" data-scheduleid="0" style="min-height:40px">

                        <div class="layui-col-sm2">
                            <label class="layui-form-label" style="float:right;">月份组-排班</label>
                        </div>

                        <div class="layui-col-sm2" style="line-height:30px;overflow:auto;">
                            <input class="choose_months_btn layui-btn" type="button" value="选择月份组">
                            <span class="choosed_months"></span>
                        </div>

                        <div class="layui-col-sm2" style="margin-left: 10px">
                            <select class="scheduleid" name="scheduleid"></select>
                        </div>

                        <div class="layui-col-sm4" style="line-height:30px;cursor:pointer;">
                            &nbsp;- <a class="schedule_details">查看</a>
                            <!-- &nbsp;- <a class="schedule_add">添加</a> -->
                             <!-- | <a href="/oa/schedule/add" target="_blank">添加</a> -->
                            &nbsp;
                            <input type="button" value="+" class="layui-btn months_schedule_jia">
                            <input type="button" value="-" class="layui-btn layui-btn-danger months_schedule_jian">
                        </div>


                        <!-- 表单要提交的数据 -->
                        <div class="layui-col-sm2 hidden_months">
                            <!-- <input type="hidden" class="month" value="0"> -->
                            <!-- <input type="hidden" class="month" value="1"> -->
                        </div>
                    </div>
                <!-- 单个 月份组-排班  结束 -->

                <!-- 单个 wifi输入框 开始 -->
                <div class="layui-col-sm4 wifi">
                    <input class="layui-input" name="wifi[]">
                </div>
                <!-- 单个 wifi输入框 结束 -->

                <!-- 单个 ip输入框 开始 -->
                    <div class="layui-col-sm4 ip">
                        <input class="layui-input" name="ip[]">
                    </div>
                <!-- 单个 ip输入框 结束 -->




            </span>
        <!-- 页面隐藏的结构 结束 -->

        
        <!-- <div class="remind-tit"><span style="color: #ff0000">*</span>温馨提示：</div>
        <div class="remind-tip">
            1.集团信息仅有一条 <br>
            2.后续修改提醒天数，请输入天数后点击开关，这时候天数已修改，需要重新开启开关
        </div> -->

    </div>
</div>

<script type="text/javascript">
    layui.use(['laydate','form','layer'], function(){
        var $ = layui.jquery;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;

        // 时间插件 绑定
        $('.H_i_s').each(function(){
            laydate.render({
                elem: $(this).get(0), //指定元素
                type:'time'
            });
        });


        //规则类型，1固定排班，2排班制
        form.on('radio(pb_type)', function(data){
            if(data.value == 1){
                $('#months_schedule_list').css('display','block');
                $('#diy_banci').css('display','none');
                $('#submit').val('保存设置');
            }else{
                $('#diy_banci').css('display','block');
                $('#months_schedule_list').css('display','none');
                $('#submit').val('保存设置，开始排班');
            }
            form.render();
        });

        //加班奖励
        form.on('radio(overtime_award)', function(data){
            if(data.value == 1){
                $('#overtime_award_money').css('display','block');
                $('#overtime_holiday_money').css('display','block');
            }else{
                $('#overtime_award_money').css('display','none');
                $('#overtime_holiday_money').css('display','none');
            }
            form.render();
        });

        // (月份组 - 班次) 新增
        $(document).on('click','.months_schedule_jia',function(){

            // (月份组 - 班次) 对象
            var months_schedule = $('#modes > .months_schedule').clone()

            // (月份组 - 班次) 中 选择排班的内容完善
            months_schedule.find('.scheduleid').append( create_html_select_schedule_options(schedule_list) )

            $('#months_schedule_list').append(months_schedule)

            create_months_schedule_key();

            // 表单项 样式绑定
            form.render()
        })

        // 月组 减少
        $(document).on('click','.months_schedule_jian',function(){
            if($(this).parents('.months_schedule').parent().children('.months_schedule').length>1)
            {
                // 月份 可选
                var months_list = $(this).parents('.months_schedule').data('months')
                months = months.concat(months_list)

                $(this).parents('.months_schedule').remove()

                create_months_schedule_key();
            }else
            {
                layer.alert('至少存在一组月份与排班');
            }

        })  

        // 创建 (月份组 - 班次) 中 可供选择的排班
        function create_html_select_schedule_options(list)
        {
            var html=''
            for(var i in list)
            {
                html += '<option value="' + list[i].id + '">' 
                            + list[i].name + 
                        '</option>'
            }
            return html
        }

        // 获取 排班 列表
        function get_schedule_list()
        {
            if(schedule_list) return schedule_list

            $.ajax({
                async:false,
                url:'{:url('oa/schedule/get_list')}?type=1&page=1&limit=all',
                type:'post',
                data:{},
                dataType:'json',
                success:function(res)
                {
                    schedule_list = res.data
                }         
            })

            return schedule_list
        } 

        // 创建弹出层数据(月份)
        function create_html_layui_month(not_checked_months, checked_months)
        {
            var html='<div class="layui-form" style="clear:both;min-height:200px;">'

            var all_months = not_checked_months.concat(checked_months)
            all_months.sort(function(a,b){return a - b});
            for(var i in all_months)
            {
                if(all_months[i] + 1 <= 9)
                {
                    var title = '0' + (all_months[i]+1) + '月'
                }else
                {
                    var title = (all_months[i]+1) + '月'
                }
                if(checked_months.indexOf(all_months[i]) != -1)
                {
                    html+='<input type="checkbox" checked name="months[]" value="'+all_months[i]+'" title="' + title + '" >'
                }else
                {
                    html+='<input type="checkbox" name="months[]" value="'+all_months[i]+'" title="' + title + '" >'
                }
            }

            html += '</div>'
            return html
        }

        // 每个(月份组 - 排班)单元中 的 input 中 name 的 key 的统一化处理 (为提交表单组成php数组做准备)
        function create_months_schedule_key()
        {
            $('#months_schedule_list .months_schedule').each(function(){
                var key = $(this).index()
                $(this).data('key',key);
            })
        }

        // 选择 月份按钮 点击事件
        $(document).on('click','.choose_months_btn',function(){
            var this_months = $(this).parents('.months_schedule').data('months')
            console.log(this_months);

            // months 可以供用户选择的月份 并排序
//                if(months.length <= 0)
//                {
//                    layer.alert('所有月份均已占用');
//                    return false;
//                }
                months.sort(function(a,b){return a - b});


                // console.log('可供选择的月份');
                // console.log(months);
            // 选择月份-按钮 所在的(月份组 - 排班)单元
            var months_schedule = $(this).parents('.months_schedule')

            // 弹出月份选择  并 回调 选中的月份
            open_layer_choose_months(months,this_months,function(choosed_months){

                // (月份组 - 排班) 每个单元 里 data 声明 选中的 months
                months_schedule.data('months',choosed_months)
                var key = months_schedule.data('key')
                months_schedule.find('.scheduleid').attr('name','months_schedule[' + key + '][scheduleid]' );

                // 选中的月份 隐藏区域 置空
                months_schedule.find('.hidden_months').html('')

                // 选中的月份str 置空
                var choosed_months_str = ''

                for(var i in choosed_months)
                {
                    // 选中的月份 隐藏区域中 新增input hidden
                    months_schedule.find('.hidden_months').append($('<input type="hidden" name="'+'months_schedule[' + key + '][months][]'+'" value="'+choosed_months[i]+'">'))

                    // 去除 可选中月份
                    // console.log('去除了')
                    // console.log(choosed_months[i])

                    if (months.indexOf(choosed_months[i]) != -1)
                    {
                        months.splice( months.indexOf(choosed_months[i]),1)
                    }

                    // console.log('可供选择的月份');
                    // console.log(months);


                    // 生成 可视化选中的月份的 字样
                    if(choosed_months[i] + 1  <= 9)
                    {
                        choosed_months_str += '0'+ ( choosed_months[i] + 1 ) + '月,'
                    }else
                    {
                        choosed_months_str += ( choosed_months[i] + 1 ) + '月,'
                    }
                }

                //若取消选中，则待选择数组中该加回去此月数
                for(var j in this_months){
                    if (choosed_months.indexOf(this_months[j]) == -1)
                    {
                        months.push(this_months[j]);
                    }
                }
                months_schedule.find('.choose_months_btn').val(choosed_months_str);
            })
            form.render();
        })

        // 弹出 月份选择  并 回调 选中的月份
        // months       可选中的月份
        // this_months  这个按钮选中的月份
        // callback()   回调用户选中的月份
        function open_layer_choose_months(months,this_months,callback)
        {
            layui.layer.open({
                type:1,
                title:'月份选择',
                area:['500px'],
                content:create_html_layui_month(months,this_months),
                btn: ['确定', '取消',],
                yes: function(index, layero){

                    // 获取 用户选择的月份list
                    var list=[];
                    $(layero).find('input[type="checkbox"]').each(function(){
                        if($(this).prop('checked'))
                        {
                            list.push( parseInt( $(this).val() ) )
                        }
                    });
                    // console.log('此次选中了的月份');
                    // console.log(list);
                    callback(list)
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                }
            })
        }

        // 根据一条排班对象数据 创建html 的 str
        function create_schedule_details(schedule)
        {
            // console.log(schedule);

            var html = '<div style="padding:10px;">';
            html += '排班 : ' + schedule.name+'<br>';

            html += '周日 : ' + create_banciStr_by_bL(schedule.week.w0)+'<br>';
            html += '周一 : ' + create_banciStr_by_bL(schedule.week.w1)+'<br>';
            html += '周二 : ' + create_banciStr_by_bL(schedule.week.w2)+'<br>';
            html += '周三 : ' + create_banciStr_by_bL(schedule.week.w3)+'<br>';
            html += '周四 : ' + create_banciStr_by_bL(schedule.week.w4)+'<br>';
            html += '周五 : ' + create_banciStr_by_bL(schedule.week.w5)+'<br>';
            html += '周六 : ' + create_banciStr_by_bL(schedule.week.w6)+'<br>';

            html+='</div>'
            return html
        }

        // 创建 banci_list 数组的 html_str
        function create_banciStr_by_bL(banci_list)
        {
            var html = ''
            for(var i in banci_list)
            {
                html += '(' + banci_list[i][0].substr(0,5) + '-' + banci_list[i][1].substr(0,5) + ')'
            }
            return html;
        }

        // 查看 排班的详情
        $(document).on('click','.months_schedule .schedule_details',function(){
            var scheduleid = $(this).parents('.months_schedule').find('.scheduleid').val();
            layer.open({
                type:2,
                title:'排班',
                area:[1000,700],
                content:'/oa/schedule/edit?id='+scheduleid
            })
        })

        // 添加 排班
        $(document).on('click','.months_schedule .schedule_add',function(){
            var scheduleid = $(this).parents('.months_schedule').find('.scheduleid').val();
            layer.open({
                type:2,
                title:'排班',
                area:[1000,700],
                content:'/oa/schedule/add'
            })
        })


        // 点击 添加表单项 弹出层
        $('#addFormOptions').click(function(){

            // alert('弹出 表单项以供选择')
            var html=$('#open_form').html();
            layui.layer.open({
                type:1,
                title:'月份选择',
                area:['500px'],
                content:html,
                btn: ['确定', '取消',],
                yes: function(index, layero){

                    // 获取用户选择的类型列表
                    var list=[];
                    $(layero).find('input[name="type[]"]').each(function(){
                        // console.log($(this).prop('checked'));
                        if($(this).prop('checked'))
                        {
                            list.push($(this).val())
                        }
                    });
                    console.log(list);

                    // 创建html代码 写入页面
                    var html=''
                    for(var i in list)
                    {
                        html+=create_form_option(list[i])
                    }
                    $('#fields').append(html)

                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                }
            })
        })

        // wifi 的 增加 按钮
        $('#jia_wifi').click(function(){
            var ele=$('#modes>.wifi').clone()
            $('#wifi_list').append(ele)
        })

        // wifi 的 减少 按钮
        $('#jian_wifi').click(function(){
            $('#wifi_list>.wifi:last').remove();
        })

        // ip 的 增加 按钮
        $('#jia_ip').click(function(){
            var ele=$('#modes>.ip').clone()
            $('#ip_list').append(ele)
        })

        // ip 的 减少 按钮
        $('#jian_ip').click(function(){
            $('#ip_list>.ip:last').remove();
        })

        // 提交按钮点击事件
        $('#submit').click(function(){

            // 获取提交数据
            // post_data 

            console.log('提交数据');

            var form=$(this).parents('form.layui-form')
            var post_data=form.serialize()

            // console.log(post_data);return;

            $.ajax({
                url:'{:url('papi/rule/save')}', 
                // url:'{:url('oa/test/test2')}', 
                type:'post',
                data:post_data,
                dataType:'json',
                success:function(res)
                {
                    console.log(res)
                    // return false
                    if(res.code===200)
                    {

                        var rule_id = res.data.rule_id;
                        if(arr.length > 0){
                            set(rule_id);
                        }else{
                            jump(rule_id);
                        }

//                        layer.alert('操作成功');
//                        setTimeout(function(){
//                            location.href='{:url('oa/rule/index')}'
//                        },1500);
                    }else if(res.code===201)
                    {
                        layer.alert(res.msg);
                    }
                }         
            })
        })

        // ---------------------------------------------------------------------------------------------------------------------------
        var months=[0,1,2,3,4,5,6,7,8,9,10,11] 
        var schedule_list
        function init()
        {
            // 按月份排班 的 第一个
            // var ele=$('#modes>.months_schedule').clone()
            // $('#months_schedule_list').append(ele)
                // 减号变加号
                // $('#months_schedule_list > .months_schedule:eq(0)').find('.jian').addClass('jia').removeClass('jian').removeClass('layui-btn-danger').val('+')

            // 获取 排班list
            schedule_list = get_schedule_list()

            var id='{$details['id']}'
            if(id)
            {
                // 编辑 时候 将原有的 months_schedule 展示 
                var months_schedule = '{$details['months_schedule']}';
                var months_schedule_list = JSON.parse(months_schedule)
                console.log(months_schedule_list)

                if('{$details.rule_type}' == 1){
                    for(var i in months_schedule_list)
                    {
                        $('.months_schedule_jia:last').click()

                        var months_schedule = $('#months_schedule_list .months_schedule:last')

                        var choosed_months = months_schedule_list[i].months

                        months_schedule.data('months',choosed_months)

                        var key = i;

                        // 选中(月份组 - 排班)单元 的原来的 排班 并声明好 name
                        months_schedule.find('.scheduleid').attr('name','months_schedule[' + key + '][scheduleid]' );
                        months_schedule.find('.scheduleid').val(months_schedule_list[i].scheduleid)

                        // 选中的月份 隐藏区域 置空
                        months_schedule.find('.hidden_months').html('')

                        // 选中的月份str 置空
                        var choosed_months_str = ''


                        for(var i in choosed_months)
                        {
                            choosed_months[i] = parseInt(choosed_months[i]);
                            // 选中的月份 隐藏区域中 新增input hidden
                            months_schedule.find('.hidden_months').append($('<input type="hidden" name="'+'months_schedule[' + key + '][months][]'+'" value="'+choosed_months[i]+'">'))

                            // 去除 可选中月份
                            // console.log('去除了')
                            // console.log(choosed_months[i])

                            if (months.indexOf(choosed_months[i]) != -1)
                            {
                                months.splice( months.indexOf(choosed_months[i]),1)
                            }

                            // console.log('可供选择的月份');
                            // console.log(months);


                            // 生成 可视化选中的月份的 字样
                            if(choosed_months[i] + 1  <= 9)
                            {
                                choosed_months_str += '0'+ ( choosed_months[i] + 1 ) + '月,'
                            }else
                            {
                                choosed_months_str += ( choosed_months[i] + 1 ) + '月,'
                            }
                        }
                        months_schedule.find('.choose_months_btn').val(choosed_months_str);
                    }

                }else{
                    $('.months_schedule_jia').click()
                }


                form.render();

            }else
            {
                $('.months_schedule_jia').click()
            }
            form.render();
        }
        init()
    });
</script>

<!-- 百度地图插件 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qfU35pBQvxv5gg85SirPvDaZMe5C3FCH"></script>

<script type="text/javascript">
    function G(id){
        return document.getElementById(id);
    }
    // 百度地图API功能
    var map = new BMap.Map("baidu_map");
    var ac;
    var circle;
    // 设置一个点 作为地图的中心点 
    var point = new BMap.Point(116.404, 39.915); 
    $("#search_geo").click(function(){
        var longitude = $('#longitude').val();
        var latitude = $('#latitude').val();
        if(!longitude || !latitude){
            layer.alert('请输入经纬度进行搜索。');
            return false;
        }
        var search_point = new BMap.Point(longitude, latitude);
        // 清空标记
        map.clearOverlays(); 

        // 创建标注
        var marker = new BMap.Marker(search_point);  
        
        // 将标注添加到地图中
        map.addOverlay(marker); 
        map.centerAndZoom(search_point, 18);
        // 设置中心点
        map.panTo(search_point); 
        // 点 变为 街道
        get_addressStr_by_point(search_point,function(res){
            ac.setInputValue(res);
        })
        drawCircle(search_point);

    });

    {if condition="$details['id']"}
        // 百度地图 选定 原来的点
        //$('#longitude_latitude').html('{$details['longitude']}'+','+'{$details['latitude']}');
        var lng = '{$details['longitude']}'
        var lat = '{$details['latitude']}'
        var point = new BMap.Point(lng, lat); 
        // 清空标记
        map.clearOverlays(); 
        // 创建标注
        var marker = new BMap.Marker(point);  
        // 将标注添加到地图中
        map.addOverlay(marker); 
        // 设置中心点
        map.centerAndZoom(point, 18);
        map.panTo(point);
        drawCircle(point);
        // 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true); 
        map.addControl(new BMap.NavigationControl());
        // 页面上的 搜索框 - 点击事件 ------------------- 开始 ----------------------
        // 建立一个自动完成的对象(input 框 点击事件)
        ac = new BMap.Autocomplete(
            {
                "input" : "suggestId",
                "location" : map
            }
        );
        ac.setInputValue('{$details['address']}');
    {else}
        //开启定位
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                point = r.point;
                var mk = new BMap.Marker(point);
                map.centerAndZoom(point, 18);
                map.addOverlay(mk);
                map.panTo(point);
                drawCircle(point);
                // 处理地址以及控件符值
                get_addressStr_by_point(point,function(res){
                    ac.setInputValue(res);
                    drawCircle(point);
                    //$('input[name="address"]').val(res);
                })
                var lng = point.lng;
                var lat = point.lat;
                // 页面val
                $('input[name="longitude"]').val(lng);
                $('input[name="latitude"]').val(lat);
            }
            else {
                map.centerAndZoom(point, 18);
                drawCircle(point);
                // 处理地址以及控件符值
                get_addressStr_by_point(point,function(res){
                    ac.setInputValue(res);
                    drawCircle(point);
                    //$('input[name="address"]').val(res);
                })
                var lng = point.lng;
                var lat = point.lat;
                // 页面val
                $('input[name="longitude"]').val(lng);
                $('input[name="latitude"]').val(lat);
            }
        });
        // 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);    
        // 添加控件(放大缩小)
        map.addControl(new BMap.NavigationControl());
        // 页面上的 搜索框 - 点击事件 ------------------- 开始 ----------------------
        // 建立一个自动完成的对象(input 框 点击事件)
        ac = new BMap.Autocomplete(
            {
                "input" : "suggestId",
                "location" : map
            }
        );
    {/if}
        
    //鼠标放在下拉列表上的事件(input 框 点击事件)
    ac.addEventListener("onhighlight", function(e)
    {
        var str = "";
        var _value = e.fromitem.value;
        var value = "";

        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
        
        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        // G("searchResultPanel").innerHTML = str;
    });

    //鼠标点击下拉列表后的事件(input 框 点击事件)
    ac.addEventListener("onconfirm", function(e)
    {
        var _value = e.item.value;
        setPlace(_value.business);
    });
    function drawCircle(point){
        var radius = $('#radius').val();
        if(!radius) return false;
        var pointCenter = point?point:map.getCenter();
        circle = new BMap.Circle(pointCenter, radius, {
            strokeColor: "blue",
            strokeWeight: 1,
            fillColor: "#E2E8F1",
            fillOpacity: 0.6,
            strokeStyle:'dashed',
        });
        map.addOverlay(circle);
    }
    // 根据输入框的文字锁定 地图上的点
    function setPlace(myValue)
    {
        //智能搜索
        var local = new BMap.LocalSearch(
            map,
            {
                onSearchComplete: function(){
                    if (local.getStatus() == BMAP_STATUS_SUCCESS){
                        //获取第一个智能搜索的结果
                        var point = local.getResults().getPoi(0).point; 
                        map.centerAndZoom(point, 18);
                        //清除地图上所有覆盖物
                        map.clearOverlays(); 
                        //添加标注
                        map.addOverlay(new BMap.Marker(point));  
                        var lng=point.lng
                        var lat=point.lat
                        // 页面val
                        $('input[name="longitude"]').val(lng);
                        $('input[name="latitude"]').val(lat);
                        $('input[name="address"]').val(myValue);
                        drawCircle();
                        // $('#longitude_latitude').html(lng+','+lat);
                    }
                }
            }
        );

        local.search(myValue);
    }
    // 页面上的 搜索框 - 点击事件 ------------------- 结束 ----------------------
    // 页面上的 地图 - 点击事件 ------------------- 开始 ----------------------
    // 获取 街道名 根据 点 
    function get_addressStr_by_point(point,callback)
    {
        var geoc = new BMap.Geocoder(); 
        geoc.getLocation(point, function(rs){
            var addComp = rs.addressComponents;
            var address=addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber
            callback(address)
        });
    }

    // 地图添加点击事件
    map.addEventListener("click", function(e){
        var point = e.point
        var lng = e.point.lng
        var lat = e.point.lat
        // console.log(lng)
        // console.log(lat)

        // 清空标记
        map.clearOverlays(); 

        // 创建标注
        var marker = new BMap.Marker(point);  
        
        // 将标注添加到地图中
        map.addOverlay(marker); 
        // 设置中心点
        map.panTo(point); 
        // 点 变为 街道
        get_addressStr_by_point(point,function(res){
            ac.setInputValue(res);
            drawCircle(point);
        })
        // 页面val
        $('input[name="longitude"]').val(lng);
        $('input[name="latitude"]').val(lat);
        // $('#longitude_latitude').html(lng+','+lat);
    })
    // 页面上的 地图 - 点击事件 ------------------- 开始 ----------------------
    //----------------------------------分配规则-----------------------------------
    // 弹出 单位选择插件
    function start_choose_dept_position_starff(func)
    {
        load_page(
                '/oa/Dept/selector',
                '选择组织架构',
                function(){get_select(func);},
                ['确定','取消'],
                900,600
        );
    }

    // 获取所有的规则列表
    function get_rule_list()
    {
        var list;
        $.ajax({
            async:false,
            type:'post',
            url:'{:url('/papi/rule/getList')}?limit=all',
            data:{},
            dataType:'json',
            success:function(res){
                list=res.data
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                console.log('ajax-error:异常');
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
                console.log(this);
                // this; // 调用本次AJAX请求时传递的options参数
            },
        });
        return list;
    }

    // 获取html 选定区
    function get_html_area(arr)
    {
        var html_dept = ''
        var html_position = ''
        var html_staff = ''
        for(var i in arr)
        {
            if(arr[i].staffid>0)
            {
                html_staff+='人员：'+arr[i].full_name+'<br>'
            }else if(arr[i].positionid>0)
            {
                html_position+='岗位：'+arr[i].full_name+'<br>'
            }else
            {
                html_dept+='单位：'+arr[i].full_name+'<br>'
            }

        }
        return html_dept + '<br>' + html_position + '<br>' + html_staff
    }

    // 获取html 规则选项的
    function get_html_rule_options(rule_list)
    {
        var html = ''
        for(var i in rule_list)
        {
            html += '<option value="'+rule_list[i].id+'">' + rule_list[i].name + '</option>'
        }
        return html
    }

    // 确认分配
    function set(ruleid)
    {
        //var ruleid=$('#rule_list').val()

        var n_arr=[]
        for(var i in arr)
        {
            var obj={}
            obj.type=arr[i].type
            obj.keyid=arr[i].keyid
            obj.positionid=arr[i].positionid
            obj.staffid=arr[i].staffid

            obj.ruleid=ruleid

            n_arr.push(obj)
        }

        //return n_arr;
        var p_data={arr:n_arr}

        // console.log(arr);
        // console.log(n_arr);

        // return false;
        $.ajax({
            url:'/papi/rulerel/set',
            type:'post',
            data:p_data,
            dataType:'json',
            success:function(res)
            {
                //console.log(res)
                // return false;
                if(res.code==200)
                {

                    jump(ruleid);

                }else
                {
                    layui.layer.alert(res.msg);
                }
            }
        })
    }

    function jump(rule_id){
        var rule_type = $("input[name='rule_type']:checked").val();

        if(rule_type == 1){
            //固定排班
            layui.layer.confirm('操作成功！',function(){
                location.href='{:url('oa/rule/index')}'
            });
        }else{
            //自定义排班制
            layui.layer.confirm('规则保存成功，继续排班',function(){
                location.href='{:url('oa/rule/diy')}?rule_id='+rule_id;
            });
        }
    }


    // 点击选择按钮
    $('#start_choose').click(function(){
        start_choose_dept_position_starff(function(res){
            // 选择完毕后返回数据
            console.log(res);
            arr=res
            $('#area').html(get_html_area(arr))
        })
    })

    // ----------------------------------------------

    var arr=[] // 选定的 单位|岗位|人员
    var ruleid // 选定的规则id
    var rule_list //规则列表
    function init()
    {
        // 数据置空
        arr=[]
        ruleid=0
        rule_list=[]

        // 执行函数
        rule_list=get_rule_list();
        $('#rule_list').html(get_html_rule_options(rule_list));
    }
    init();

    //----------------------------------分配规则end-----------------------------------


</script>


<!-- 如果是编辑 要显示原有内容 -->
{if condition="$details['id']"}
    <script type="text/javascript">
        layui.use(['form'], function(){
            var $=layui.jquery;
            var form=layui.form
            // id
                $('input[name="id"]').val('{$details['id']}');
            // name
                $('input[name="name"]').val('{$details['name']}');
            // flex_type
                $('select[name="flex_type"]').val('{$details['flex_type']}');
            // flex_time
                $('input[name="flex_time"]').val('{$details['flex_time']}');
            // late_offset
                $('input[name="late_offset"]').val('{$details['late_offset']}');

            // longitude
                $('input[name="longitude"]').val('{$details['longitude']}');

            // latitude
                $('input[name="latitude"]').val('{$details['latitude']}');

            // radius
                $('input[name="radius"]').val('{$details['radius']}');

            // limit
                var limit='{$details['limit']}'
                limit=JSON.parse(limit);
                // console.log(limit);
                if(limit.indexOf("wifi")>=0)
                {
                    // console.log('以前有 wifi 限制')
                    $('#limit_wifi').attr('checked','true');
                }

                if(limit.indexOf("ip")>=0)
                {
                    // console.log('以前有 ip 限制')
                    $('#limit_ip').attr('checked','true');
                }

            // wifi
                var wifi = '{$details['wifi']}'
                wifi = JSON.parse(wifi);

                for(var i in wifi)
                {
                    var ele = $('#modes>.wifi').clone()
                    ele.find('input').val(wifi[i])

                    $('#wifi_list').append(ele)
                }

            // ip       
                var ip='{$details['ip']}'
                ip=JSON.parse(ip);
                for(var i in ip)
                {
                    var ele = $('#modes>.ip').clone()
                    ele.find('input').val(ip[i])

                    $('#ip_list').append(ele)
                }
            //  months_schedule (php选定)
            // today_overtime
                $('input[name="today_overtime"]').val('{$details['today_overtime']}');
            // tomorrow_end
                $('input[name="tomorrow_end"]').val('{$details['tomorrow_end']}');
                form.render()
        })
    </script>
{else /} 

{/if}

{/block}