// 创建 BroadcastChannel
const channel = new BroadcastChannel('data_channel');
/** 
 * @param {*value 当前日期基础上添加、减天数} value 
 * @returns 返回天数后的日期 格式为：yyyy-MM-dd hh:mm:ss
 * 目前多为保存数据是取当前日期时间
 */
function timescopePlus(AddDay) {
    if (AddDay == undefined)
        AddDay = 0;
    var date = new Date();
    date.setDate(date.getDate() + Number(AddDay));
    var year = date.getFullYear().toString();
    var month = (date.getMonth() + 1);
    var day = date.getDate().toString();
    var hour = date.getHours().toString();
    var minutes = date.getMinutes().toString();
    var seconds = date.getSeconds().toString();
    if (month < 10) {
        month = "0" + month;
    }
    if (day < 10) {
        day = "0" + day;
    }
    if (hour < 10) {
        hour = "0" + hour;
    }
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
    return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
}
/**
 * @param {*传入日期} mDate 
 * @returns 返回日期 格式为:yyyy-MM-dd hh:mm:ss 
 * 日前为显示dbgrid日期转换格式
 */
Time_format = function (mDate) {

    let result = '';
    if (mDate != '' && mDate != undefined) {
        var date = new Date(mDate);
        var year = date.getFullYear().toString();
        var month = (date.getMonth() + 1);
        var day = date.getDate().toString();
        var hour = date.getHours().toString();
        var minutes = date.getMinutes().toString();
        var seconds = date.getSeconds().toString();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        if (hour < 10) {
            hour = "0" + hour;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        if (mDate.toString().search('GMT') != -1) {
            result = year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
        } else if (mDate.toString() == '') {
            result = ' ';
        } else {
            result = year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
        }
    }
    return result;
}
Time_formats = function (mDate) {
    console.log(mDate);

    let result = '';
    if (mDate != '' && mDate != undefined) {
        var date = new Date(mDate);
        console.log(date);

        var year = date.getFullYear().toString();
        var month = (date.getMonth() + 1);
        var day = date.getDate().toString();
        var hour = date.getHours().toString();
        var minutes = date.getMinutes().toString();
        var seconds = date.getSeconds().toString();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        if (hour < 10) {
            hour = "0" + hour;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        if (mDate.toString().search('GMT') != -1) {
            result = year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
        } else if (mDate.toString() == '') {
            result = ' ';
        } else {
            result = year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
        }
    }
    console.log(result);

    return result;
}
class CountUp {
    constructor(element, startValue, endValue, duration, options = {}) {
        this.element = document.querySelector(element);
        console.log(element)
        this.startValue = startValue;
        this.endValue = endValue;
        this.duration = duration;
        this.options = options;
        this.frameDuration = 1000 / 60; // 每秒60帧
        this.frameStart = null;
        this.currentValue = startValue;
        this.isRunning = false;
    }

    // 启动动画
    start() {
        if (this.isRunning) return;
        this.isRunning = true;
        this.frameStart = null;
        requestAnimationFrame(this.animate.bind(this));
    }

    // 动画函数
    animate(timestamp) {
        if (!this.frameStart) {
            this.frameStart = timestamp;
        }
        const progress = Math.min((timestamp - this.frameStart) / this.duration, 1); // 计算动画进度
        this.currentValue = this.lerp(this.startValue, this.endValue, progress); // 线性插值
        this.updateDisplay();

        if (progress < 1) {
            requestAnimationFrame(this.animate.bind(this)); // 继续动画
        } else {
            this.isRunning = false;
        }
    }

    // 线性插值函数
    lerp(start, end, progress) {
        return start + (end - start) * progress;
    }

    // 更新显示的数值
    updateDisplay() {
        this.element.textContent = this.formatNumber(this.currentValue);
    }

    // 格式化数字（可以添加分隔符，保留小数等）
    formatNumber(number) {
        return this.options.useComma
            ? number.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 })
            : number.toFixed(0);
    }
}
// 视口滚动到底部

function is_scrollTop() {

    var communicationContainer = document.getElementById('communicationId');

    // 检查元素是否存在
    if (communicationContainer) {
        // 将滚动条位置设置为内容的高度，实现滚动到底部
        communicationContainer.scrollTop = communicationContainer.scrollHeight;
    } else {
        console.error('聊天内容容器不存在');
    }
}
// window.onerror = function(message, source, lineno, colno, error) {
//     console.log('资源加载失败：', message, source, lineno, colno, error);
//     // 进行相应处理，比如重定向到404页面
//     window.location.href = '/src/blue/uimaker/404.html';
// };
// window.addEventListener('error', function (e) {
//     console.log(e);
//     // 进行相应处理，比如重定向到404页面
//     window.location.href = '/src/blue/uimaker/404.html';
// });


// 消息提示框5秒内自动消失
/**
 * 
 * @param {string} state 状态类型>>>>>>成功:succeedd|失败:error|警告: hint
 * @param {string} name 提示的内容
 */
var isThrottled = false
// 定义一个映射对象，用于存储不同状态的样式
const alertStyles = {
    succeed: {
        name: '成功',
        background: '#d4edda',
        color: '#155724',
        borderColor: '#c3e6cb'
    },
    error: {
        name: '失败',
        background: '#f8d7da',
        color: '#721c24',
        borderColor: '#f5c6cb'
    },
    hint: {
        name: '警告',
        background: '#fff3cd',
        color: '#856404',
        borderColor: '#ffeeba'
    }
};

// 创建一个用于存储alertDiv引用的变量
let alertDiv;
function showAlert(state, name) {
    // 如果alertDiv不存在，则创建并添加到body中
    if (!alertDiv) {
        alertDiv = document.createElement('div');
        alertDiv.id = 'alertDiv';
        alertDiv.style.display = 'flex'; // 设置为Flexbox布局
        alertDiv.style.flexDirection = 'column'; // 子元素垂直排列
        document.body.appendChild(alertDiv);
    }

    // 获取状态对应的样式
    const styleObj = alertStyles[state];
    if (!styleObj) {
        console.error(`Unknown alert state: ${state}`);
        return;
    }

    // 创建alertContainer元素，并设置样式
    const alertContainer = document.createElement('div');
    alertContainer.className = 'alertContainer';
    alertContainer.style.background = styleObj.background;
    alertContainer.style.color = styleObj.color;
    alertContainer.style.borderColor = styleObj.borderColor;
    alertContainer.innerHTML = name;
    alertContainer.style.opacity = 1; // 初始设置为完全可见

    // 将新的alertContainer添加到alertDiv中，并显示
    alertDiv.appendChild(alertContainer);
    alertContainer.classList.add('show');

    // 为每条消息单独设置消失计时器
    setTimeout(() => {
        fadeAndRemove(alertContainer);
    },2000);
}

// 添加一个函数来逐渐淡出并移除alertContainer
function fadeAndRemove(element) {
    let opacity = 1; // 初始透明度
    const fadeInterval = 50; // 淡出间隔（毫秒）
    const fadeSteps = 10; // 淡出步骤数

    const fadeOut = setInterval(() => {
        opacity -= 1 / fadeSteps; // 减少透明度
        if (opacity <= 0) {
            clearInterval(fadeOut); // 停止淡出
            element.remove(); // 移除元素
        } else {
            element.style.opacity = opacity; // 更新透明度
        }
    }, fadeInterval);
}
let page = 1;
let size = '10';
let ttlpage;
/**
 * @param {*侧边栏用户列表calss类名} element_userUl
 * @param {*聊天内容class类名} element_communication
 * @param {*发送者IKEY} staff_IKEY 
 * @param {*聊天内容class类名} scrollTop
 * **/
// 聊天侧边栏用户显示
async function isUserlsit(element_userUl, element_communication, staff_IKEY, scrollTop) {
    page = 1
    console.log(page);
    // 获取 MQTT 列表
    console.log(staff_IKEY);

    let rest = getMqttList(staff_IKEY).rows;
    console.log(rest);
    // 更新用户列表
    rest.forEach(function (item, index) {
        console.log(item);
        let msgStatus = isReadMsg(item.SEND_STAFF_IKEY, true)
        let msgHtml = `<span id="msg_${item.SEND_STAFF_IKEY}" style="position:absolute;right:40px;${msgStatus == '0' ? 'display:none' : ''}" class="ITM_TYPE">${msgStatus}</span>`
        let listItem = `
            <li value='${item.SEND_STAFF_IKEY + ',' + item.SENDER}'>
                <div style="display: flex;padding: 0 5%;align-items:center;">
                    <div class="communication_center_icon communication_center_img">
                        <img src="/public/img/avatar-ceeb03f6.jpg" alt="" width="40" height="40">
                    </div>
                    <span calss="${'senderName' + index}" style="font-size: 15px;margin-left: 10px;position: relative;">${item.SENDER}</span>
                    ${msgHtml}
                </div>
            </li>
        `;
        element_userUl.append(listItem); // 添加到列表中
    });
    let dataLoaded = false;
    let msgArry;

    // 滚动事件处理函数
    function handleScroll() {
        let receiver = $('.user_ul').datalist('getSelections')[0];
        if (!dataLoaded) {
            msgArry = isMqttArry(receiver, page);
            dataLoaded = true;
        }
    }
    // 使用事件委托绑定点击事件
    $(document).on('click', '#communicationId_tbn', function () {
        let receiver = $('.user_ul').datalist('getSelections')[0];
        console.log('触发了多次嘛');
        $('#communicationId_tbn').remove();
        page++;
        console.log(page);
        if (ttlpage >= page) {
            msgArry = isMqttArry(receiver, page);
            console.log(msgArry);
            let originalContentHeight = $('#communicationId')[0].scrollHeight; // 记录原始内容高度
            request_right(receiver.RECEIVER_STAFF_IKEY.split(',')[0], staff_IKEY, element_communication, scrollTop, msgArry.rows);
            // 请求完成后执行滚动位置调整
            console.log('触发新消息')
            let newContentHeight = $('#communicationId')[0].scrollHeight;
            let deltaHeight = newContentHeight - originalContentHeight;
            is_scrollTop(scrollTop, deltaHeight)
            $('#communicationId').prepend(`<a href="#" id="communicationId_tbn" style="display: block;width: fit-content; margin: 0 auto;color:#202ef3">查看更多消息</a>`);
        }
    });
    // 获取 MQTT 消息数组
    function isMqttArry(receivers, pages) {
        console.log(receivers, pages);
        isChangeMsgStatus(receivers.RECEIVER_STAFF_IKEY.split(',')[0], staff_IKEY);
        let rest = getMqttMsg(staff_IKEY, receivers.RECEIVER_STAFF_IKEY.split(',')[0], pages, size);
        ttlpage = rest.ttlpage;
        return rest;
    }
    // 记录上一次滚动条位置的变量
    let lastScrollPosition = 0;

    // 监听滚动事件，记录滚动条位置
    $(window).scroll(function () {
        lastScrollPosition = $(this).scrollTop();
    });
    // 初始化 DataList
    element_userUl.datalist({
        textField: 'RECEIVER',
        valueField: 'RECEIVER_STAFF_IKEY',
        lines: true,
        onClickRow: function (index, row) {
            $(".communication_center").empty();
            page = 1;
            size = '10';
            dataLoaded = false;
            element_communication.empty();
            handleScroll();
            request_right(row.RECEIVER_STAFF_IKEY.split(',')[0], staff_IKEY, element_communication, scrollTop, msgArry.rows);
            if (ttlpage != page) {
                $('#communicationId').prepend(`<a href="#" id="communicationId_tbn" style="display: block;width: fit-content; margin: 0 auto;color:#202ef3">查看更多消息</a>`);
            }
        },
        // onLoadSuccess: function (data) {
        //     $('.form_calss').empty();
        //     $(".communication_center").empty();
        //     element_userUl.datalist('selectRow', 0);
        //     handleScroll();
        //     request_right(data.rows[0].RECEIVER_STAFF_IKEY.split(',')[0], staff_IKEY, element_communication, scrollTop, msgArry.rows);
        //     if (ttlpage != page) {
        //         $('#communicationId').prepend(`<a href="#" id="communicationId_tbn" style="display: block;width: fit-content; margin: 0 auto;color:#202ef3">查看更多消息</a>`);
        //     }
        // }
    });
}
// 渲染信息聊天数据
function request_right(index, staff_ikey, element_communication, scrollTop, msgRest) {
    console.log(msgRest);
    // 渲染信息
    for (let i = 0; i < msgRest.length; i++) {
        const currentItem = msgRest[i];
        // 判断消息是发送者的还是接收者的，分别渲染到左边或右边
        if (currentItem.SEND_STAFF_IKEY == staff.IKEY) {
            // console.log(currentItem, '右边');
            // 发送者的消息渲染到右边
            $(template('communication_rightNew', {
                right_Date: Time_format(currentItem.SEND_DATE),
                htmlTitle_right: currentItem.MSG
            })).prependTo(element_communication);
        } else {
            console.log(currentItem, '左边');
            // 接收者的消息渲染到左边
            $(template('communication_leftNew', {
                left_Date: Time_format(currentItem.SEND_DATE),
                htmlTitle_left: currentItem.MSG
            })).prependTo(element_communication);
        }
    }
    is_scrollTop()
}
// 插入一条到侧边栏
function isAppend(obj) {
    console.log($('.user_ul').datalist('getData').rows);
    let index = $('.user_ul').datalist('getData').rows.length
    let listItems = `
        <li value='${obj.IKEY + ',' + obj.STAFF_ID}'>
            <div style="display: flex;padding: 0 5%;align-items:center;">
                <div class="communication_center_icon communication_center_img">
                    <img src="/public/img/avatar-ceeb03f6.jpg" alt="" width="40" height="40">
                </div>
                <span calss="${'senderName' + index}" style="font-size: 15px;margin-left: 10px;">${obj.STAFF_ID}</span>
            </div>
        </li>
        `;
    $('.user_ul').datalist('appendRow', {
        RECEIVER: listItems,
        RECEIVER_STAFF_IKEY: obj.IKEY + ',' + obj.STAFF_ID
    });
    $('.user_ul').datalist('selectRow', $('.user_ul').datalist('getData').rows.length - 1)
    $(".communication_center").empty();
    // request_right(data.rows[0].RECEIVER_STAFF_IKEY.split(',')[0], staff_IKEY, element_communication, scrollTop)
    // request_right(obj.IKEY,staff.IKEY,$(".communication_center"),communicationCenter)
    // console.log('...1');
}

/**
 * 判断并处理侧边栏用户数据
 *
 * @param ikey 企业档案中的IKEY
 * @param staffIKey 传入staff的ikey
 * @param center 传入可视区中心内容
 * @param cationCenter 传入cationCenter
 * @returns 无返回值
 */
function ifcation(ikey, staffIKey, center, cationCenter) {
    console.log(ikey, staffIKey, center, cationCenter);
    let authStaff = { FView_auth_staffData: { IKEY: ikey } }
    let authStaffData = GetData(authStaff).rows
    console.log(authStaffData);
    // 判断左边侧边栏是否存在点击进来的用户，不存在新增一个，存在跳转到用户
    console.log($('.user_ul').datalist('getData').rows);
    let data = $('.user_ul').datalist('getData').rows
    let fal = true
    for (let i = 0; i < data.length; i++) {
        // console.log(data[i].RECEIVER_STAFF_IKEY.split(',')[0] == authStaffData[0].IKEY);
        // console.log(data[i].RECEIVER_STAFF_IKEY.split(',')[0], authStaffData[0].IKEY);
        if (data[i].RECEIVER_STAFF_IKEY.split(',')[0] == authStaffData[0].IKEY) {
            $('.user_ul').datalist('selectRow', i)
            isChangeMsgStatus(ikey, staffIKey);
            let mqttMsgArry = getMqttMsg(staffIKey, authStaffData[0].IKEY, page, size);
            ttlpage = mqttMsgArry.ttlpage;
            console.log(mqttMsgArry);
            $(".communication_center").empty();
            // request_right(data.rows[0].RECEIVER_STAFF_IKEY.split(',')[0], staff_IKEY, element_communication, scrollTop, msgArry.rows);
            request_right(authStaffData[0].IKEY, staffIKey, center, cationCenter, mqttMsgArry.rows)
            console.log(i);
            fal = false
        }
    }
    if (fal) {
        isAppend(authStaffData[0])
    }
    // document.addEventListener('DOMContentLoaded', function() {
    //     // 获取占位符元素
    //     var placeholder = document.getElementById('header-placeholder');
    //     // 创建头部元素
    //         // 创建北部容器
    //         var $northWra = $('<div>').addClass('north_wra').css({
    //             display: 'flex',
    //             width: '13%',
    //             height: '100%',
    //             justifyContent: 'center',
    //             alignItems: 'center'
    //         });

    //         // 创建logo图片并添加到北部容器
    //         $('<img>').attr('src', './src/assets/image/logo.png').css({
    //             width: '100%',
    //             height: '100%'
    //         }).appendTo($northWra);

    //         // 创建北部标题容器
    //         var $northH1 = $('<div>').addClass('north_h1').css({
    //             width: '89%',
    //             height: '100%',
    //             display: 'flex',
    //             alignItems: 'center'
    //         });

    //         // 创建第一个子容器
    //         var $firstSubContainer = $('<div>').css({
    //             width: '45%',
    //             marginLeft: '1%',
    //             fontSize: '16px',
    //             display: 'flex',
    //             alignItems: 'center',
    //             justifyContent: 'space-between'
    //         });

    //         // 创建并添加main_title和message等元素...
    //         $('<span>').attr('id', 'main_title').css({
    //             fontFamily: 'SourceHanSansCN-Bold',
    //             fontWeight: 700,
    //             fontSize: '16px',
    //             color: '#16181a'
    //         }).text('Main Title').appendTo($firstSubContainer);

    //         var $divFlex = $('<div>').css('display', 'flex');
    //         $('<h2>').addClass('company').text('Company').appendTo($divFlex);
    //         $('<li>').attr('id', 'message').addClass('iconfont icon-yiyanzheng1').css('color', '#929292').appendTo($divFlex);
    //         $divFlex.appendTo($firstSubContainer);

    //         // 创建第二个子容器并添加元素...
    //         var $secondSubContainer = $('<div>').css({
    //             width: '54%',
    //             display: 'flex',
    //             justifyContent: 'flex-end',
    //             marginRight: '1%',
    //             alignItems: 'center'
    //         });

    //         var createLink = function(href, text, icon, title) {
    //             var $link = $('<a>').attr('href', href).css({
    //                 fontSize: '16px'
    //             });
    //             if (title) {
    //                 $link.attr('title', title);
    //             }
    //             var $spanIcon = $('<span>').css('color', '#929292');
    //             $('<i>').css('font-size', '24px').html(icon).appendTo($spanIcon);
    //             $spanIcon.appendTo($link);
    //             $('<span>').text(text).appendTo($link);
    //             return $link;
    //         };

    //         createLink('javascript:void(0)', '录入企业认证资料入口', '&#xe655;', null).appendTo($secondSubContainer);
    //         createLink('javascript:void(0)', '控制台', '&#xe766;', null).css('margin', '0 2%').appendTo($secondSubContainer);
    //         createLink('javascript:void(0)', '', '&#xe636;', '联系我们').css({
    //             'margin': '0 2%',
    //             'fontSize': '24px'
    //         }).appendTo($secondSubContainer);
    //         $('<a>').attr('href', 'javascript:void(0)').attr('title', '接口文档').css({
    //             'margin': '0 2%'
    //         }).on('click', function() {
    //             apiClick();
    //         }).append($('<i>').addClass('iconfont').css('fontSize', '24px').html('&#xe74d;')).appendTo($secondSubContainer);

    //         // 最后，将子容器添加到北部标题容器，并将两个主要容器添加到body
    //         $northH1.append($firstSubContainer, $secondSubContainer);
    //         $('body').append($northWra, $northH1);


    //     // 假设apiClick是在其他地方定义的函数
    //     function apiClick() {
    //         console.log('API Documentation Clicked');
    //     }
    // });
}
/**
 * 在页面右下角显示消息提示框。
 */
function bottomRight(msg) {
    $.messager.show({
        title: '消息提示',
        msg: '您有1条新消息！来自用户:' + msg + '的消息',
        showType: 'show',
        timeout: 1500,
        width:'300px',
        height:'120px'
    });
}
//处理用户已读未读消息
function isReadMsg(ikey, status) {
    // 查询全部未读和指定ikey的消息数量
    let obj = { SEND_STAFF_IKEY: ikey, STATUS: '0', SEND_STAFF_IKEY_LIKE: '<>' }
    if (status) {
        obj = { SEND_STAFF_IKEY: ikey, STATUS: '0' }
    }
    let msgCondition = { FMqtt_msgData: obj }
    let msgArry = GetData(msgCondition)
    console.log(msgArry);
    return msgArry.rows.length
}
// 点击用户改变消息状态
function isChangeMsgStatus(ikey, userIkey) {
    try {
        let msgCondition = { FMqtt_msgData: { SEND_STAFF_IKEY: ikey, STATUS: '0' } }
        let msgArry = GetData(msgCondition).rows
        console.log(msgArry);
        let msg = { rows: [] }
        for (let i = 0; i < msgArry.length; i++) {
            msg.rows.push({ FMqtt_msgData: { IKEY: msgArry[i].IKEY } })
        }
        let rest = ReceiveMqttMsg(msg)
        if (rest.result == '1') {
            let qty = $('.tmMsg').html()
            console.log(qty);
            console.log(msgArry.length);
            $('#msg_' + ikey).hide()
            let numQty = isReadMsg(userIkey, false)
            $('.tmMsg').html(numQty)
            channel.postMessage({ type: 'data_update', data: numQty });
        } else {
            showAlert('消息状态更新失败', 'error')
        }
    } catch (error) {
        showAlert('消息状态更新失败', 'error')
    }
}
// 处理显示用户未读消息数量显示控制
function isShowMsgNum(ikey, userIkey) {
    $('#msg_' + ikey).show()
    let qty = isReadMsg(ikey, true)
    const numQty = isReadMsg(userIkey, false)
    $('.tmMsg').html(numQty)
    channel.postMessage({ type: 'data_update', data: numQty });
    $('#msg_' + ikey).html(qty)

}

//判定是否存在cookie，不存在跳转到登录页面
if (!$.cookie('indexLogin') && window.location.pathname == '/login.html') {
    console.log(window.location.pathname)
    window.location.href = '/index.html'
}