$(document).ready(function () {

    $('body').on('click', '.status', function () {
        var checked = $(this).hasClass('checked');
        var status = !checked ? 1 : 0;
        if (checked) {
            $(this).removeClass("checked");
            $(this).addClass("unchecked");
            $(this).find('.txt').text('未启动')
        } else {
            $(this).removeClass("unchecked");
            $(this).addClass("checked");
            $(this).find('.txt').text('启动')
        }

         $.ajax({
            url: "/setting/upMileage/"+getCmptId()+"/"+status,
            type: 'post',
            success: function (data) {
                console.log(data);

            }
        })
    })


   $('#search').click(function () {
       var param = $('.search').val();
       if(!param){
           layer.alert('请输入内容查询');
           return ;
       }
      $.ajax({
        url : "/gk/score/getScore/"+getCId()+"/"+param,
          success:function (data) {
            var result = data.content;
              $('#score-body').empty();
              if(result.scores.length > 0){
                  $('#data').fadeIn();
                  $('#score-body').append('<tr>' +
                      '<td>' + result.user.userName + '</td>' +
                      '<td>' + result.user.roadName + '</td>' +
                      '<td>' + result.user.markNo + '</td>' +
                      '<td>' + result.date + '</td>' +
                      '<td>' + result.total + '</td>' +
                      '<td></td>' +
                      '<td></td>' +
                      '</tr>');
                  $.each(result.scores,function (i,e) {

                      $('#score-body').append(" <tr class='line-tr' data-id='"+e.id+"'>\n" +
                          "                    <td></td>\n" +
                          "                    <td></td>\n" +
                          "                    <td></td>\n" +
                          "                    <td>"+e.date+"</td>\n" +
                          "                    <td>"+e.durationStr+"</td>\n" +
                          "                    <td style='text-align: center'>第"+(i+1)+"次</td>\n" +
                          "                    <td style='justify-content: center;display: flex;'>" +
                          "                    <div class='opt' style='justify-content: center;'>" +
                          "                    <span class=\"icon-del\">" +
                          "                    </span><span style='font-size: 18px'>删除</span></div>  </td>\n" +
                          "                </tr> ")
                  })
              }else{
                  $('#data').fadeOut();
                  layer.msg("未查询到结果！");
              }
          }
      })
   });

   $('.cancel').click(function () {
       $('.mask').fadeOut();
       $('.dialog').removeAttr('data-id');
   })

    $('.sure').click(function () {
        var name = $('.dialog input').val();
        if(!name){
            layer.alert("请输入名称！");
            return ;
        }
        if(name.length > 10){
            layer.alert("不能超过十个字符！");
            return ;
        }
        var id = $('.dialog').attr('data-id');
        var param ={id:id,fieldName:name,cmptId:getCId(),fieldType:1};
        if(!id){
            var index = $('.rule-field tbody tr:last').attr('data-index') == undefined ? 0 :$('.rule-field tbody tr:last').attr('data-index');
            param.filedIndex = Number(index)+1;
        }
        var tr = $('tr[data-id='+id+']');
        $.ajax({
            url : "/api/cmptScoreField/saveOrUpdate",
            type: 'post',
            data: param,
            success:function (data) {
                if(data.status){
                    if(id){
                        layer.msg('更新成功!')
                        tr.find('.name').text(name);
                    }else{
                        layer.msg('添加成功!');

                        $('.rule-field tbody').append(' <tr data-id="'+data.content.id+'" data-index="'+data.content.filedIndex+'">' +
                            '                           <td class="name">'+data.content.fieldName+'</td>\n' +
                            '                            <td style="text-align: right">\n' +
                            '                               <div>\n' +
                            '                                   <div class="opt edit.opt">\n' +
                            '                                       <span class="icon-edit"></span><span class="edit">编辑</span>\n' +
                            '                                   </div>\n' +
                            '                                   <div class="opt del">\n' +
                            '                                       <span class="icon-del"></span><span >删除</span>\n' +
                            '                                   </div>\n' +
                            '                               </div>\n' +
                            '                            </td>')
                    }
                }else{
                    layer.msg('操作失败！')
                }
            }
        })
        $('.mask').fadeOut();
        $('.dialog').removeAttr('data-id');
    })

    $('.add-btn').click(function () {
        $('.dialog').removeAttr('data-id');
        $('.dialog input').val('');
        $('.mask').fadeIn();
    })

    $('.rule-field').on('click','.edit',function () {
        var tr =$(this).parents('tr');
        var name = tr.find('.name').text();
        var id = tr.attr('data-id');
        $('.mask').fadeIn();
        $('.dialog input').val(name);
        $('.dialog').attr('data-id',id)
    });
    $('.rule-field').on('click','.del',function () {
        var tr =$(this).parents('tr');
        var id = tr.attr('data-id');
        qikoo.dialog.confirm('确认要删除？',
            function () {
                $.ajax({
                    url: '/api/cmptScoreField/del/' + id,
                    type: 'get',
                    success: function (data) {
                        if (data.status) {
                            tr.remove();
                            layer.msg("删除成功！")
                        } else {
                            layer.msg("操作失败！")
                        }
                    }
                })
            }, function () {

            });
    });

    $('.count-input').keyup(function () {
        var value = $(this).val();
        if(value > 10){
            layer.msg('最多只能设置9次！');
            return ;
        }
        if(value <= 0){
            layer.msg('请输入大于0的数字！');
            return ;
        }
        var rules = $('#rule-section .rule-item');
        if(value > rules.length){
            for(var i=0;i<value-rules.length;i++){
                var item = null;
                if($('#rule-section .rule-item').length == 0){
                    item = $('.template').clone().clone().show();
                    item.removeClass("template")
                }else{
                    item = $('#rule-section .rule-item').last().clone().clone();
                }
                var number = item.find('label').text().replace(/[^0-9]/ig,"");
                item.removeAttr('data-id')
                item.find('label').text('第'+($('#rule-section .rule-item').length+1)+"次上传成绩的起止时间")
                $('#rule-section').append(item);
                $('#rule-section').append($('#rule-section .clear'));
            }
        }else{
            for(var i=value;i < rules.length;i++){
                var id = $('#rule-section .rule-item:eq('+i+')').attr('data-id');
                console.log(id)
                delItem(id)
                $('#rule-section .rule-item:eq('+i+')').hide();
            }
            $('#rule-section .rule-item:hidden').remove();
        }
    });
    
    $('.save-btn').click(function () {
        var rules = $('#rule-section .rule-item');
        var flag = true;
        var param = new Array();
        $.each(rules,function (i,e) {
            var obj = {};
            var startTime = $(e).find('input[name="start"]').val();
            var endTime  = $(e).find('input[name="end"]').val();
            if(!startTime || !endTime){
                layer.alert("请设置完整的时间");
                flag = false;
                return false;
            }
            var id = $(e).attr('data-id');
            obj.startTime =startTime + " 00:00:00";
            obj.endTime = endTime+ " 23:59:59";
            obj.id = id;
            obj.index = i;
            obj.cmptId = getCId()
            param.push(obj)
        });

        if(flag){ // 设置保存
            $.ajax({
                url : '/api/cmptScoreRule/saveCmptScoreRule',
                data:JSON.stringify(param),
                contentType:'application/json',
                type:'post',
                success:function (data) {
                    if(data.status){
                        layer.msg("保存成功！");
                    }
                }
            })
        }
    });


    $('#score-body').on('click','.opt',function () {
        var tr = $(this).parents('tr');
        var id = tr.attr('data-id');
        if(id){
            qikoo.dialog.confirm('确认要删除？',
                function () {
                    $.ajax({
                        url : '/gk/score/delScore/'+$('.search').val()+'/'+id,
                        type:'post',
                        success:function (data) {
                            if(data.status){
                                tr.remove()
                                layer.msg('删除成功！');
                            }else{
                                layer.msg('操作失败！');
                            }
                            console.log(data);
                        }
                }, function () {

                });
            })
        }

    });

    getCharts();

    $('.export').click(function () {
        window.open(window.location.origin+"/gk/score/export/"+getCId())
    })
});

function getCharts() {
    $.ajax({
        url : '/gk/score/chartsV2/'+getCId(),
        success:function (data) {
            var roads = data.content.roads;
            var roadNames = [];
            var numbers = [];
            $.each(roads,function (i,e) {
                roadNames.push(e.roadName);

                numbers.push(Number(e.enrollCount));
            })
            var statics = data.content.counts;
            var series = [];
            var pointPlacement = -0.3
            var values = Object.values(statics);
            var idx=0;

            var index = 0
            for(var i in values){
                var total = {
                    name: '总量',
                    color: 'rgba(234,234,234,1)',
                    data: numbers,
                    pointPadding: 0.4,
                    pointPlacement: pointPlacement,
                    showInLegend:false,
                };
                if(index > 0){
                    total.yAxis = 1;
                }
                total.pointPlacement=pointPlacement;
                series.push(total);
                var p = {
                    name: '第'+(++idx)+'次',
                    data: values[i],
                    color:'rgba(206,57,57,1)',
                    pointPadding: 0.4,
                    pointPlacement: pointPlacement,
                    yAxis: 1
                }
                i++;
                series.push(p);
                pointPlacement += 0.2
            }
            console.log(JSON.stringify(series))
            drawChart(roadNames,series)
        }
    })
}
function delItem(param) {
    $.ajax({
        url : '/api/cmptScoreRule/del/'+param,
        contentType:'application/json',
        type:'post',
        success:function (data) {
            console.log(data);

        }
    })
}

function drawChart(roads,series) {
    var chart = Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: roads
        },
        yAxis: [{

            title: {
                text: ''
            },opposite: true
        }, { min: 0,
            title: {
                text: '打卡次数'
            }
        }],
        legend: {
            shadow: false
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                grouping: false,
                shadow: false,
                borderWidth: 0
            }
        },
        series: series
    });
}