$(document).ready(function () {
    var status = 0;
    var currentPage = 1; // 定义变量，用于存储当前的页码
    var pageSize = 20; // 定义变量，用于存储当前页条数
    var totalPages = 0;
    var pageData = []
    // 渲染分页按钮
    function renderPagination() {
        const pageNumbers = $('#page-numbers');
        pageNumbers.empty();

        // 总页数小于等于 7 时，显示所有页码
        if (totalPages <= 7) {
            for (let i = 1; i <= totalPages; i++) {
                pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`);
            }
        } else {
            // 总页数大于 7 时，显示部分页码并用省略号代替
            if (currentPage <= 4) {
                // 前 5 页 + 省略号 + 最后一页
                for (let i = 1; i <= 5; i++) {
                    pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`);
                }
                pageNumbers.append('<span>...</span>');
                pageNumbers.append(`<span>${totalPages}</span>`);
            } else if (currentPage >= totalPages - 3) {
                // 第一页 + 省略号 + 最后 5 页
                pageNumbers.append('<span>1</span>');
                pageNumbers.append('<span>...</span>');
                for (let i = totalPages - 4; i <= totalPages; i++) {
                    pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`);
                }
            } else {
                // 第一页 + 省略号 + 当前页及前后两页 + 省略号 + 最后一页
                pageNumbers.append('<span>1</span>');
                pageNumbers.append('<span>...</span>');
                for (let i = currentPage - 2; i <= currentPage + 2; i++) {
                    pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`);
                }
                pageNumbers.append('<span>...</span>');
                pageNumbers.append(`<span>${totalPages}</span>`);
            }
        }

        // 绑定页码点击事件
        pageNumbers.find('span').click(function () {
            const page = parseInt($(this).text());
            if (!isNaN(page)) {
                currentPage = page;
                getRenderData();
            }
        });

        if(totalPages>0){
            $(".pagination").removeClass('hide');
        }else{
            $(".pagination").addClass('hide');
        }
    }

    // 初始化渲染
    getRenderData();

    function getRenderData(){
        $.ajax({
            type: "post",
            dataType: 'json',
            url: '/index/ajax_user_list',
            data: {
                currentPage,
                pageSize
            },
            success: function (res) {
                if(!res.status){
                    alert(`请求失败`);
                }

                renderData(res.data)
            }
        })
    }
    function renderData(data){
        totalPages = data.last_page;
        var pageData = data.list
        $('#tbody-wrap').empty()
        renderList()

        var html = '';
        pageData.forEach((item)=>{
            html += ` <tr data-id="${item.id}">
                            <td>${item.nickname}</td>
                            <td>${item.realname}<img class="action-icon" src="../../images/edit.svg" alt=""></td>
                            <td>${item.addtime}</td>
                            <td>
                                <label class="switch">
                                    <input type="checkbox" ${item.status == 1 ? 'checked' : ''}>
                                    <span class="slider"></span>
                                </label>
                            </td>
                        </tr>`
            $('#tbody-wrap').html(html)
        })

        renderPagination()

    }
// 当文档加载完成后执行以下函数
function renderList() {
    function createPagination(currentPage, totalPages) {
        var paginationHtml = ""; // 初始化一个字符串，用于存放分页条的HTML代码

        // 如果当前页不是第一页，则生成一个“上一页”按钮
        // if (currentPage > 1) {
        paginationHtml += "<li>&lt;</li>";
        // }

        // 始终显示第一页的页码
        paginationHtml += generatePageNumberHtml(1, currentPage);

        // 如果总页数大于1页，则继续生成分页条的其余部分
        if (totalPages > 1) {
            // 如果当前页码大于3，则在第一页和当前页之间添加省略号
            if (currentPage > 3) {
                paginationHtml += "<li>...</li>";
            }
            // 遍历当前页附近的页码，并生成对应的分页按钮
            for (
                let i = Math.max(currentPage - 2, 2); i <= Math.min(currentPage + 2, totalPages - 1); i++
            ) {
                paginationHtml += generatePageNumberHtml(i, currentPage);
            }
            // 如果当前页码小于总页数减去2，则在当前页和最后一页之间添加省略号
            if (currentPage < totalPages - 2) {
                paginationHtml += "<li>...</li>";
            }
        }

        // 始终显示最后一页的页码
        paginationHtml += generatePageNumberHtml(totalPages, currentPage);

        // 如果当前页不是最后一页，则生成一个“下一页”按钮
        if (currentPage < totalPages) {
            paginationHtml += "<li>&gt;</li>";
        }

        // 返回生成的分页条HTML字符串
        return paginationHtml;
    }
    // 创建分页条的函数

    // 生成单个页码按钮的HTML的函数
    function generatePageNumberHtml(pageNumber, currentPage) {
        // 返回一个格式化后的HTML字符串，包含激活状态的判断
        return (
            '<li class="' +
            (pageNumber === currentPage ? "pagActive" : "") +
            '">' +
            pageNumber +
            "</li>"
        );
    }

    // 选择页码的函数
    function selectPage(pageNumber) {
        // 更新当前页码的变量，并重新生成分页条
        currentPage = pageNumber;
        $("#pagination").html(createPagination(currentPage, totalPages));
    }

    // 为分页条上的每个按钮绑定点击事件
    $("#pagination").on("click", "li", function (event) {
        let pageNumber = $(this).text(); // 获取点击的页码或按钮文本

        // 如果点击的是省略号，则不执行任何操作
        if (pageNumber === "...") {
            event.preventDefault();
            return;
        }

        // 根据点击的按钮，调用selectPage函数更新当前页码
        if (pageNumber === "<") {
            if (currentPage < 2) {
                return
            }
            selectPage(currentPage - 1);
        } else if (pageNumber === ">") {
            // if(currentPage <2){
            //     return
            // }
            selectPage(currentPage + 1);
        } else {
            selectPage(parseInt(pageNumber));
        }
    });

    // 初始化分页条，总页数为20，默认显示第一页
    $("#pagination").html(createPagination(currentPage, totalPages));
}
    // 上一页
    $('#prev-page').click(function () {
        if (currentPage > 1) {
            currentPage--;
            getRenderData();
        }
    });

    // 下一页
    $('#next-page').click(function () {
        if (currentPage < totalPages) {
            currentPage++;
            getRenderData();
        }
    });

    // 跳转到指定页
    $('#go-to-page').click(function () {
        const page = parseInt($('#jump-to-page').val());
        if (page >= 1 && page <= totalPages) {
            currentPage = page;
            getRenderData();
        } else {
            alert(`请输入有效的页码（1-${totalPages}）`);
        }
    });

    let currentRow = null;

      // 显示操作图标
      $('tr').hover(
        function () {
          $(this).find('.action-icon').show();
        },
        function () {
          $(this).find('.action-icon').hide();
        }
      );

      // 点击编辑图标
      $('#tbody-wrap').on('click','.action-icon',function () {
        const row = $(this).closest('tr');
        currentRow = row;
        const cell = row.find('td').eq(1); // 编辑第2列数据
        const currentValue = cell.text();
        $('#editInput').val(currentValue);
        $('#editPopover').css({
          top: row.offset().top - $('#editPopover').height() - row.height(),
          left: cell.offset().left - Math.ceil($('#editPopover').width() /2)
        }).show();
      });

      // 确认修改
      $('#confirmBtn').click(function () {
        const newValue = $('#editInput').val();
        if (newValue && currentRow) {
          const id = currentRow.data('id');
          const realname = newValue;
          $.ajax({
            type: "post",
            dataType: 'json',
            url: '/index/ajax_change_user',
            data: {
              id,
              realname
            },
            success: function (res) {
              if(!res.status){
                alert(res.info);
              }else{
                  currentRow.find('td').eq(1).html(newValue+'<img class="action-icon" src="../../images/edit.svg" alt="">');
              }
              $('#editPopover').hide();
            }
          })
        }
      });

      // 取消修改
      $('#cancelBtn').click(function () {
        $('#editPopover').hide();
      });

    //Switch 开关切换
    $('#tbody-wrap').on('change','.switch input',function () {
        const that = $(this);
        const row = that.closest('tr');
        const isChecked = that.is(':checked');

        const id = row.data('id');
        const status =  isChecked ? '1' : '2';
        $.ajax({
            type: "post",
            dataType: 'json',
            url: '/index/ajax_change_user',
            data: {
                id,
                status
            },
            success: function (res) {
                if(!res.status){
                    alert(res.info);
                    if(isChecked){
                        that.prop('checked', false)
                    }else{
                        that.prop('checked', true)
                    }
                }
            }
        })
    });

    checkAddNewBtn();
    function checkAddNewBtn(){
        if($('#bind_id').val().length>0){
            $('.addChildNumWrap, .modal-overlay').fadeIn();
        }
    }

    $('.addNewBtn').click(function () {
        $('.addChildNumWrap, .modal-overlay').fadeIn();
    });
    $('.cancelBtn').click(function(){
        $('.addChildNumWrap, .modal-overlay').fadeOut();
        if(!$('.scanSuccess').hasClass('hide')){
            setTimeout(function (){ window.location.href = '/index/user_list'},1000)
        }
    })
    $('.confirmBtn').click(function(){
        const id = $('#bind_id').val();
        const realname = $('#bind_realname').val();
        $.ajax({
            type: "post",
            dataType: 'json',
            url: '/index/ajax_change_user',
            data: {
                id,
                realname
            },
            success: function (res) {
                if(!res.status){
                    alert(res.info);
                }
                $('.addChildNumWrap, .modal-overlay').fadeOut();
                setTimeout(function (){ window.location.href = '/index/user_list'},1000)
            }
        })
    })
})