@extends('layouts.crm')
@section('title')比例设置@endsection
@section('header')
    <style>
        .my-logo{
            width: 112px;
            height: 142px;
        }
        .hidden{
            display: none;
        }
        .score{
            width: 80px;
            padding: 5px 10px;
        }

    </style>
@endsection
@section('navbread')
    {{-- */ $navbread = [
        ['name' => '教职工考评', 'href' =>  ''],
        ['name' => '评价表设置', 'href' =>  ''],
        ['name' => '比例设置', 'href' =>  ''],

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

    <div style='margin-top:20px;' class='main-tab-box-1  clearfix'>
        @if(count($info))
            @foreach($info as $k=>$v)
                <div style='width:130px' class="tab-item {{ $k == 0 ? 'on' : '' }}" data-id="{{ $v['id'] }}">
                    <span>{{ $v['title'] }}</span>
                    <span class='icon-triangle-1'></span>
                </div>
            @endforeach
        @endif
    </div>
    @if(count($info))
    <div class='single-comment-box'>
        @foreach($scale_option as $k=>$v)
            <div class='single-comment-item' data-id="{{ $v['id'] }}">
                <label data-id="{{ $v['id'] }}" for="">{{ $v['name'] }}</label>
                <input data-id="{{ $v['id'] }}" name="percent" style='display:inline-block;width:120px;height:24px;' type="text" value="{{ isset($scale[$v['id']]) ? $scale[$v['id']] : '' }}" autocomplete="off" class="layui-input single-commentt-ipt">
                <span style='color:#666'>%</span>
            </div>
        @endforeach
    </div>


    <div style='width:600px;margin-top:50px;' class='position-btn-box'>
        <button class='layui-btn layui-btn-gray reset'>重置</button>
        <button class='layui-btn layui-btn-normal single-comment-confirm save'>确定</button>
    </div>
    @endif
@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>
    $(".main-tab-box-1").find(".tab-item").on("click",function(){
        var div = $(this);
        var id = $(this).attr('data-id');
        if(div.hasClass('on')){
            return false;
        }
        $('[name=percent]').val('');
        getData(id);

        div.addClass("on").siblings().removeClass("on");
        div.find(".icon-triangle-1").removeClass("hide").parent().siblings().find(".icon-triangle-1").addClass("hide")

    })

    //重置
    $(document).on('click','.reset',function(){
        $('[name=percent]').val('');
    })

    //保存
    $(document).on('click','.save',function(){
        var main_id = $('.tab-item.on').attr('data-id');
        if(main_id){
            var percent = $('.single-comment-item').find('[name=percent]');
            var data = [];
            var scale = 0;
            percent.each(function(index, item){
                var key = {};
                if($(this).val() != ''){
                    key.id = $(this).attr('data-id');
                    key.num = $(this).val();
                    scale+=parseInt($(this).val());
                    data.push(key);
                }
            })


            if(data.length < 1){
                layer.msg('请填写比例');
                return false;
            }

            if(scale != 100){
                layer.msg('比例之和必须为一百');
                return false;
            }

            $.ajax({
                url:"{{ $_SERVER['REQUEST_URI'] }}",
                type:'post',
                data:{
                    data:JSON.stringify(data),
                    id:main_id,
                    _token:"{{ csrf_token() }}"
                },
                success:function(re){
                    if(re.code == 1){
                        layer.msg('保存成功',{icon:1});
                        setTimeout(() => {
                            window.location.href="/review/scaleList";
                        }, 1000);
                    }else{
                        layer.msg(re.errMsg);
                        setTimeout(() => {
                            window.location.href="/review/scaleList";
                        }, 1000);
                    }
                }
            })
        }
    })

    //获取数据
    function getData(id) {
        if(id){
            $.get('/review/getScale?id='+id,function (re) {
                var data = re.data;
                if(re.code == 1 && data.length > 0){
                    for (var i = 0; i < data.length; i++){
                        $('[name=percent][data-id='+data[i]['id']+']').val(data[i]['num']);
                    }
                }
            })
        }
    }

</script>
@endsection