let  laypage,table,form,element;

layui.use(['element', 'layer', 'form', 'element','laypage'], function(){
    var layer = layui.layer; //弹层
    element = layui.element; //分页
    laypage = layui.laypage; //分页
    table = layui.table; //表格
    form=layui.form;
    var list = [{name:'111',personnelAvgUseRate:'30'},{name:'222',personnelAvgUseRate:'11'},{name:'333',personnelAvgUseRate:'45'}];
    // console.log(list)
    monthRateEcharts(list)
    getTableData()


})


function getTableData(){
    // $.ajax({
    //     type: 'post',
    //     url: oiPlanUrl + '/dayPlanStatistics/getPersonnelUtilizationRate',
    //     data: {
    //         companyId: companyId,
    //         month: $("#workTime").val(),
    //     },
    //     success: function (data) {
            let data = {
                code:200,
                data:[
                    {   index:1,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:2,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:3,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:4,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:5,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:6,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:7,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:8,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:9,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:10,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:11,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:12,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:13,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:14,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:15,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    },
                    {   index:16,
                        project:"工程xxxxx",
                        gmNum:"10",
                        viewNum:"11",
                        unViewNum:"12",
                        peopleNum:"13",
                        viewPeople:"14",
                        rate:"88.3%"
                    }
                ]
                    
            }
            intervalId = "";
            var html ="";
            $("#personnelTable thead tr").empty();
            $("#personnelTable tbody").empty();
            if (data.code == 200) {
                var list = data.data;
                if(list.length>0){
                    html+= '<th width="10%">序号</th>';
                    html+= '<th width="12%">工程名称</th>';
                    html+= '<th width="12%">杆塔数量</th>';
                    html+= '<th width="12%">已巡数量</th>';
                    html+= '<th width="12%">未巡数量</th>';
                    html+= '<th width="12%">护线员人数</th>';
                    html+= '<th width="12%">已巡视人数</th>';
                    html+= '<th width="12%">到位率</th>';
                    // for (let i = 0; i < list[0].length; i++) {
                    //     html+= '<th title="'+list[0][i].name+'">'+list[0][i].name+'</th>';
                    // }
                    $("#personnelTable thead tr").append(html);
                    var echartArr = [];
                    for (let k = 0; k < list.length; k++) {
                        var obj = {};
                        obj = list[k]
                        // obj.data = list[k][0].date;
                        // for (let i = 0; i < l; i++) {
                        //     obj['personnelAvgUseRate' + i] = Number(list[k][i].personnelAvgUseRate * 100).toFixed(2)+"%";
                        // } 
                        echartArr.push(obj);
                    }
                    var tbody = $('#personnelTable tbody');
                    echartArr.forEach(function(item) {
                        // console.log(item)
                        
                        // console.log(Object.values(item))
                        var row = $('<tr>');
                        Object.values(item).forEach(function(value) {
                            // console.log(value)
                            var cell = $('<td>').text(value);
                            row.append(cell);
                        });
                        tbody.append(row);
                    });
                }
                clearInterval(intervalId);
                // monveinout();
                console.log("ddddd");
                $("#personnelRate").unbind()
                $("#personnelRate").hover(function(){
                    clearInterval(intervalId);
                },function(){
                    intervalId = setInterval(scrolldiv, 40);
                });
                // 开始滚动
                 scrollableDiv = $('.scrollable'); // 假设你的滚动容器类名为.scrollable
                 totalHeight = scrollableDiv[0].scrollHeight;
                 visibleHeight = scrollableDiv.innerHeight();
                 currentScrollTop = 0;
                intervalId = setInterval(scrolldiv, 40); // 这个数字是滚动间隔的时间，单位是毫秒
                // 如果需要停止滚动，可以使用以下代码
                // clearInterval(intervalId);
            }else{

            }
        // },
        // error: function (xhr, textStatus, errorThrown) {
        // }
    // });
}
function monveinout(){
    const element = document.getElementById('personnelRate');
// 鼠标移入事件
    element.addEventListener('mouseover', function(event) {
        // console.log('鼠标移入');
        clearInterval(intervalId);
    });
// 鼠标移出事件
    element.addEventListener('mouseout', function(event) {
        // var scrollableDiv = $('.scrollable'); // 假设你的滚动容器类名为.scrollable
        // var totalHeight = scrollableDiv[0].scrollHeight;
        // var visibleHeight = scrollableDiv.innerHeight();
        // var currentScrollTop = 0;
        // 开始滚动
        intervalId = setInterval(scrolldiv, 40); // 这个数字是滚动间隔的时间，单位是毫秒
    });
}
var scrollableDiv = $('.scrollable'); // 假设你的滚动容器类名为.scrollable
var totalHeight = scrollableDiv[0].scrollHeight;
var visibleHeight = scrollableDiv.innerHeight();
var currentScrollTop = 0;
function scrolldiv() {
    // 如果滚动到最底部，重置到顶部
    if (currentScrollTop + visibleHeight >= totalHeight) {
        currentScrollTop = 0;
        scrollableDiv.scrollTop(currentScrollTop);
    } else {
        // 否则，向下滚动一定的像素数
        currentScrollTop += 1; // 调整这个数字来改变滚动速度
        scrollableDiv.scrollTop(currentScrollTop);
    }
}

//图表
function monthRateEcharts(list) {
    console.log('monthRateEcharts')
    //先销毁
    echarts.init(document.getElementById("monthRate")).dispose();
    var myChart = echarts.init(document.getElementById("monthRate"));

    var value = 0.6;//百分比
    var value1 = 1100//已巡杆塔数
    var value2 = 1300//总杆塔数
    var option = {
        backgroundColor: '#fff',
        title: [
            {
                text: '已巡杆塔数：'+value1,
                left: '50%',
                top: "58%",
                textAlign: 'center',
                textStyle: {
                    fontSize: '18',
                    fontWeight: '400',
                    color: '#fff',
                    
                    textAlign: 'center',
                },
            },
            {
                text: '',
                left: '61.5%',
                top: "58.5%",
                textAlign: 'center',
                textStyle: {
                    fontSize: '18',
                    fontWeight: '400',
                    color: '#fff',
                    
                    textAlign: 'center',
                },
            },
            {
                text: '总杆塔数：'+value2,
                left: '50%',
                top: "64%",
                textAlign: 'center',
                textStyle: {
                    fontSize: '18',
                    fontWeight: '400',
                    color: '#fff',
                    
                    textAlign: 'center',
                },
            },
            {
                text: (value * 100).toFixed(0),
                left: '47.5%',
                top: '40%',
                textAlign: 'center',
                textStyle: {
                    fontSize: 50,
                    color: '#fff',
                },
            },

            {
                text:"%",
                left: '56%',
                top: '43%',
                textAlign: 'center',
                textStyle: {
                    fontSize: 30,
                    color: '#fff',
                },
            },
        ],
        series: [{
                type: 'liquidFill',
                radius: '70%',
                z: 6,
                center: ['50%', '50%'],
                amplitude: 20,
                backgroundStyle: {
                    borderWidth: 1,
                    color: 'rgba(201,219,252, 1)', // 球体
                },
                color: [
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 1,
                                color: '#133480',
                            },
                            {
                                offset: 0,
                                color: '#5F8EE8',
                            },
                        ],
                        globalCoord: false,
                    },
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 1,
                                color: '#133480',
                            },
                            {
                                offset: 0,
                                color: '#5F8EE8',
                            },
                        ],
                        globalCoord: false,
                    },
                    {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 1,
                                color: '#5F8DE8',
                            },
                            {
                                offset: 0,
                                color: '#5F8DE8',
                            },
                        ],
                        globalCoord: false,
                    },
                ],
                data: [value+0.02,
                    {
                        value: value-0.01,
                        direction: 'left',
                    },
                    value-0.01,
                ],
                label: {
                    normal: {
                        formatter: '',
                    }
                },
                outline: {
                    show: true,
                    itemStyle: {
                        borderWidth: 0,
                    },
                    borderDistance: 0,
                }
            },
        
            
        ]
    }

    // 为echarts对象加载数据
    myChart.setOption(option);
    myChart.on('click', function (params, charts, event) {
        detailsClick();
    });
}

