@extends('layouts.crm')
@section('title')添加课题研究@endsection
@section('header')
    <style>
        .my-logo{
            width: 112px;
            height: 142px;
        }

    </style>
@endsection
@section('navbread')
    {{-- */ $navbread = [
        ['name' => '科研探究', 'href' =>  ''],
        ['name' => '课题研究', 'href' =>  ''],

        ] /* --}}
@endsection
@section('body')

    <div class='module-2'>
        <form action="" id="forms">
        {{--<div class='title-box'>--}}
            {{--<h2>--}}
                {{--<span class='head-line-1'>|</span>--}}
                {{--教职工培训信息</h2>--}}
        {{--</div>--}}
        <div class='ipt-box clearfix' style='width:750px;'>
            <div class="ipt-item-2">
                <label for="">教职工号：</label>
                <input style='width:150px;margin-left:10px;padding:5px 10px;' type="text"value="{{ $staff_no }}" readonly placeholder="请输入职工号" autocomplete="">
            </div>
            <input type="hidden" name="user_id" value="{{ $user_id }}">
            <div class="ipt-item-2">
                <label for="">姓名：</label>
                <input style='width:150px;margin-left:10px;padding:5px 10px;' type="text"value="{{ $name }}" readonly placeholder="请输入姓名" autocomplete="">
            </div>
            <div class="ipt-item-2">
                <label for="">课题：</label>
                <input style='width:150px;margin-left:10px;padding:5px 10px;' type="text" name="title" placeholder="请输入课题" autocomplete="">
            </div>
            <div class="ipt-item-2">
                <label for="">授权单位：</label>
                <input style='width:150px;margin-left:10px;padding:5px 10px;' type="text" name="company" placeholder="请输入授权单位" autocomplete="">
            </div>
            <div class="ipt-item-2" style='width:720px'>
                <label for="">参与人员：</label>
                <input style='width:385px;margin-left:10px;padding:5px 10px;' type="text" id="choose_result" readonly required  lay-verify="required" placeholder="请选择参与人员" autocomplete="">
                <input type="hidden" name="join_id">
                <div style='position:relative;top:-2px;margin-left:33px;' class='layui-btn layui-btn-warm scientificR-sr-choose-member'>选择</div>
            </div>
            {!! csrf_field() !!}
            <div class="ipt-item-2" style='width:720px'>
                <label for="">开始日期：</label>
                <input name="start_at" readonly class="layui-input" placeholder="选择时间" style='display:inline-block;height:30px;width:170px;margin-left:10px;padding:5px 10px;' type="text" id="startDate">
                <span class='icon-data' style='position:absolute;left:290px;'></span>
                <label style='margin-left:36px;' for="">结束日期：</label>
                <input name="end_at" readonly placeholder="选择时间" style='display:inline-block;height:30px;width:170px;margin-left:10px;padding:5px 10px;' type="text" class="layui-input" id="scientificR_SR_endDate">
                <span class='icon-data' style='position:absolute;left:595px;'></span>
            </div>
            <div class="ipt-item-2" style='width:720px;height:170px'>
                <label for="">研究目标：</label>
                <textarea name="intro" style='margin-left:10px' name="" id="" ></textarea>
            </div>
            <div class="ipt-item-2" style='width:720px;height:170px;'>
                <label for="">课题研究总结：</label>
                <textarea name="result" style='margin-left:10px' name="" id="" ></textarea>
            </div>
        </div>
            @if(hasPower('research::addResearch'))
        <div style='text-align: center;' class='btn-box'>
            <div class='layui-btn layui-btn-gray' id='no-back'>取消</div>
            <div class='layui-btn layui-btn-normal save-sult'>确认</div>
        </div>
                @endif
        </form>
    </div>

    <!-- 选择 计划 -->
    <script type='text' id='scientificR_sr_choose_member'>
<div class='scientificR-sr-choose-member-layer c-layer-padding cleafix'>
    <div class='left-box p-l'>
        <h2>人员列表</h2>
        <div class='member-list'>
        @foreach($dept as $k=>$v)
            <div class="member-list-item">
                <h2>
                    <span class='layui-icon'>&#xe623;</span>
                    {{ $v['og_name'] }}
                    <span>({{ isset($v['data']) ? count($v['data']) : 0 }})</span>
                </h2>
                @if(isset($v['data']))

                    <ul class="ul-list" style='display:none'>
                        @foreach($v['data'] as $k1=>$v1)
                            <li>
                                <img src='/crm/img/male.png' class='icon icon-avatar'>
                                <span class='name'>{{ $v1['name'] }}</span>
                                <input type="checkbox" name="user_info" class="user" value="{{ $v1['ad_uid'] }}">
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        @endforeach
        </div>
    </div>
    <div class='left-box p-r'>
        <h2>已选择人员列表</h2>
        <div class='member-list'>
            <div class="member-list-item">
                <h2>
                    已选择<span class='chooseNum'>0<span>人
                </h2>
                <ul class='has-choose-list' style=''>
                </ul>
            </div>
        </div>
    </div>
</div>
</script>



@section('footer')
@endsection
<script src="{{ asset('/crm/js/layui/layui.all.js') }}"></script>
<script src="{{ asset('/crm/js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ asset('/crm/js/jq_extend.js') }}"></script>
<script src="{{ asset('/crm/js/main.js') }}"></script>


<script type="text/javascript">
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#startDate' //指定元素
        });
        laydate.render({
            elem: '#scientificR_SR_endDate' //指定元素
        });
    });

    $(document).on('click','#no-back',function () {
        window.location.href = '/object/research';
    })

    $(document).on('click','.save-sult',function(){
        var startDates = $("#startDate").val();
        var endDates = $("#scientificR_SR_endDate").val();
        if(startDates > endDates){
            layer.msg('开始时间不能大于结束时间');
            return false;
        }
        if(!$('[name=title]').val()){
            layer.msg('请输入课题');
            return false;
        }

        if(!$('[name=company]').val()){
            layer.msg('请输入授权单位');
            return false;
        }
        var data = $('#forms').serialize();
        $.ajax({
            url:"{{ $_SERVER['REQUEST_URI'] }}",
            type:'post',
            data: data,
            success:function(re){
                if(re.code == 1){
                    layer.msg('数据保存成功',{time:2000},function(){
                        window.location.href = '/object/research';
                    })
                }else{
                    //console.log(re.errMsg);
                    layer.msg(re.errMsg);
                }
            }
        })
    })

    $(".scientificR-sr-choose-member").on("click",function(){

        var ids = $('[name=join_id]').val();

        $.get_layer({
            title: "预览",
            type:"1",
            html:$("#scientificR_sr_choose_member").html(),
            btn_arr:["取消","确定"],
            area:['670px', '590px'],
            btn1:function(){
                layer.closeAll();
            },
            btn2:function(){
                var o = $(".member-list-item ul li").find("input[type='checkbox']:checked");
                var ll = o.length;
                if(ll>0){
                    var data = '';
                    var id= '';
                    $(o).each(function(i,item){
                        data+=$(item).parent().find(".name").text()+' ';
                        if(ll == i+1){
                            id+=$(item).parent().find(".user").val();
                        }else{
                            id+=$(item).parent().find(".user").val()+',';
                        }

                    })
                    $('#choose_result').val(data);
                    $('[name=join_id]').val(id);
                }

            }

        })

        if(ids){
            $('.ul-list').css('display','block');
            ids = ids.split(',');
            for(var i = 0; i < ids.length; i++){
                $(":checkbox[name=user_info][value='"+ ids[i] +"']").prop("checked", true);
            }
            var o = $(".member-list-item ul li").find("input[type='checkbox']:checked");
            var length = o.length;
            $(".member-list-item").find(".chooseNum").text(length+"人")
            $(o).each(function(i,item){
                $(".has-choose-list").append(`<li>
                        <img src='`+$(item).parent().find("img").attr("src")+`' class='icon icon-avatar'>
                        <span class='name'>`+$(item).parent().find(".name").text()+`</span>
                        <span data-id='`+$(item).parent().find(".user").val()+`' class='layui-icon clear'></span>
                        </li>`)
            })
        }
        //人员列表点击
        $(".member-list .member-list-item").on("click","h2",function(){
            if($(this).parent().find("ul").css("display")=="none"){
                $(this).find(".layui-icon").html("&#xe625;");
                $(this).parent().find("ul").slideToggle();
            }else{
                $(this).find(".layui-icon").html("&#xe623;");
                $(this).parent().find("ul").slideToggle();
            }


        })
        //穿梭框
        $(".member-list-item ul li").find("input").on("change",function(){
            $(".has-choose-list").empty();
            // 获取选择的checkbox
            var o = $(".member-list-item ul li").find("input[type='checkbox']:checked");
            var length = o.length;
            $(".member-list-item").find(".chooseNum").text(length+"人")
            $(o).each(function(i,item){
                $(".has-choose-list").append(`<li>
                        <img src='`+$(item).parent().find("img").attr("src")+`' class='icon icon-avatar'>
                        <span class='name'>`+$(item).parent().find(".name").text()+`</span>
                        <span data-id='`+$(item).parent().find(".user").val()+`' class='layui-icon clear'></span>
                        </li>`)
            })
            //删除选中项
            $(document).on('click','.has-choose-list .clear',function(){
                var id = $(this).attr('data-id');
                $(this).parent().remove();
                $(":checkbox[name=user_info][value='"+ id +"']").prop("checked", false);
                var ll = $(".has-choose-list li").length;
                $(".member-list-item").find(".chooseNum").text(ll+"人")
            })
        })
    })



</script>
@endsection