let timerDone = false;
let scrollDone = false;
const banner = document.getElementById('imageBanner');

// 计时器 - 4分钟 (240000ms)
setTimeout(() => {
    timerDone = true;
    if (scrollDone) banner.classList.add('show');
}, 2000);

// 滚动监听
window.addEventListener('scroll', () => {
    if (scrollDone) return;
    
    const scrollY = window.scrollY;
    const winHeight = window.innerHeight;
    const docHeight = document.documentElement.scrollHeight;
    const maxScroll = docHeight - winHeight;
    
    if (maxScroll <= 0) return;
    
    const percent = (scrollY / maxScroll) * 100;
    if (percent >= 60) {
        scrollDone = true;
        if (timerDone) banner.classList.add('show');
    }
});

// 页面加载时检查一次
window.addEventListener('load', () => {
    const scrollY = window.scrollY;
    const winHeight = window.innerHeight;
    const docHeight = document.documentElement.scrollHeight;
    const maxScroll = docHeight - winHeight;
    
    if (maxScroll > 0) {
        const percent = (scrollY / maxScroll) * 100;
        if (percent >= 60) {
            scrollDone = true;
            if (timerDone) banner.classList.add('show');
        }
    }
});
function observeElement(selector, callback, timeout = 5000) {
			// 1. 先同步检查
			const existingEl = document.querySelector(selector);
			if (existingEl) {
				callback(existingEl);
				return { disconnect: () => {} }; // 返回假观察者
			}

			// 2. 设置观察者
			const observer = new MutationObserver((_, obs) => {
				const el = document.querySelector(selector);
				if (el) {
				obs.disconnect();
				callback(el);
				}
			});

			// 3. 扩展监听范围
			observer.observe(document.body, {
				childList: true,
				subtree: true,
				attributes: true,
				characterData: true
			});

			// 4. 超时处理
			const timer = timeout && setTimeout(() => {
				observer.disconnect();
				console.warn(`Timeout: ${selector} not found`);
			}, timeout);

			// 返回观察者以便手动取消
			return {
				disconnect: () => {
				clearTimeout(timer);
				observer.disconnect();
				}
			};
}
observeElement("#add_wechat", function() {
    	document.getElementById('add_wechat').addEventListener('click', function(){
    	    document.getElementById('moren').style.display = 'none';
        	document.getElementById('chatContainer').style.display = 'block';


    	// 40秒后设置计时器过期标志
    		setTimeout(() => {
    		timerExpired = true;
    		updateScrollThreshold();
    
    		// 初始检查
    		if (window.scrollY >= scrollThreshold) {
    			showBanner();
    		}
    
    		// 添加滚动监听
    		window.addEventListener('scroll', checkScroll);
    		// 添加resize监听以更新阈值（如果页面高度变化）
    		window.addEventListener('resize', updateScrollThreshold);
    		}, 40000); // 40秒 = 40000毫秒
        	});
	
	})
observeElement("#add_wechat0", function() {
    	document.getElementById('add_wechat0').addEventListener('click', function(){
    	    document.getElementById('moren').style.display = 'none';
        	document.getElementById('chatContainer').style.display = 'block';


    	// 40秒后设置计时器过期标志
    		setTimeout(() => {
    		timerExpired = true;
    		updateScrollThreshold();
    
    		// 初始检查
    		if (window.scrollY >= scrollThreshold) {
    			showBanner();
    		}
    
    		// 添加滚动监听
    		window.addEventListener('scroll', checkScroll);
    		// 添加resize监听以更新阈值（如果页面高度变化）
    		window.addEventListener('resize', updateScrollThreshold);
    		}, 40000); // 40秒 = 40000毫秒
        	});
	
	})
	observeElement("#add_wechat1", function() {
    	document.getElementById('add_wechat1').addEventListener('click', function(){
    	    document.getElementById('moren').style.display = 'none';
        	document.getElementById('chatContainer').style.display = 'block';


    	// 40秒后设置计时器过期标志
    		setTimeout(() => {
    		timerExpired = true;
    		updateScrollThreshold();
    
    		// 初始检查
    		if (window.scrollY >= scrollThreshold) {
    			showBanner();
    		}
    
    		// 添加滚动监听
    		window.addEventListener('scroll', checkScroll);
    		// 添加resize监听以更新阈值（如果页面高度变化）
    		window.addEventListener('resize', updateScrollThreshold);
    		}, 40000); // 40秒 = 40000毫秒
        	});
	
	})
	observeElement("#add_wechat2", function() {
    	document.getElementById('add_wechat2').addEventListener('click', function(){
    	    document.getElementById('moren').style.display = 'none';
        	document.getElementById('chatContainer').style.display = 'block';


    	// 40秒后设置计时器过期标志
    		setTimeout(() => {
    		timerExpired = true;
    		updateScrollThreshold();
    
    		// 初始检查
    		if (window.scrollY >= scrollThreshold) {
    			showBanner();
    		}
    
    		// 添加滚动监听
    		window.addEventListener('scroll', checkScroll);
    		// 添加resize监听以更新阈值（如果页面高度变化）
    		window.addEventListener('resize', updateScrollThreshold);
    		}, 40000); // 40秒 = 40000毫秒
        	});
	
	})
// 设置滚动阈值为页面高度的90%
    let scrollThreshold = document.body.scrollHeight * 0.60;
    let bannerShown = false;
    let timerExpired = false;

    // 更新滚动阈值（当页面高度变化时）
    function updateScrollThreshold() {
      scrollThreshold = document.body.scrollHeight * 0.60;
    }

    // 滚动事件处理函数
    function checkScroll() {
      const currentScroll = window.scrollY;

      // 如果已经滚动到90%且计时器已过期且横幅未显示
      if (currentScroll >= scrollThreshold && timerExpired && !bannerShown) {
        showBanner();
      }
      // 如果向上滚动回到90%以下且横幅已显示
      else if (currentScroll < scrollThreshold && bannerShown) {
        hideBanner();
      }
    }

    // 显示banner的函数
    function showBanner() {
      document.getElementById("banner").style.display = "block";
      bannerShown = true;
    }

    // 隐藏banner的函数
    function hideBanner() {
      document.getElementById("banner").style.display = "none";
      bannerShown = false;
    }
    
    	// 高度变化时滚动至底部
		let scrollFuc = () => {
      let scroll = $('.chat');
      scroll.scrollTop(scroll[0].scrollHeight);
    }

    $(".goChat,#banner").click(function () {
      $("#js_article,#banner").hide();
      setTimeout(() => {
        $(".chatContainer").show();
      }, 500);
      // 加载动画，延迟一秒关闭
      setTimeout(function () {
        $(".loader").hide();
      }, 500);

      // 第一个问题，在动画消失后0.5秒出现
      setTimeout(() => {
        $("#question1").removeClass("faq");
        $("#choise1").css({
          "visibility": "visible",
          "opacity": "1"
        });
        scrollFuc();
      }, 500);
    });

    // 第一个问题选择
    $("#choise1 .choiseItem").click(function () {
      let text = $(this).text();
      $("#answer1 .chatDiv").text(text);
      $("#answer1").removeClass("faq");
      $("#choise1").css({
        "opacity": "0",
        "visibility": "hidden"
      });
      setTimeout(() => {
        if (text == "70岁以上") {
          $("#dontNeed").removeClass("faq");
        }
        else {
          $("#question2").removeClass("faq");
          scrollFuc();
          $("#choise2").css({
            "visibility": "visible",
            "opacity": "1"
          });
        }
        scrollFuc();
      }, 500);
    });

    // 第二个问题选择
    $("#choise2 .choiseItem").click(function () {
      let text = $(this).text();
      $("#answer2 .chatDiv").text(text);
      $("#answer2").removeClass("faq");
      $("#choise2").css({
        "opacity": "0",
        "visibility": "hidden"
      });
      setTimeout(() => {
        $("#question3").removeClass("faq");
        scrollFuc();
        $("#choise3").css({
          "visibility": "visible",
          "opacity": "1"
        });
      }, 500);
    });

    // 第三个问题选择
    $("#choise3 .choiseItem").click(function () {
      let text = $(this).text();
      $("#answer3 .chatDiv").text(text);
      $("#answer3").removeClass("faq");
      $("#choise3").css({
        "opacity": "0",
        "visibility": "hidden"
      });
      setTimeout(() => {
        $("#question4").removeClass("faq");
        scrollFuc();
        $("#choise4").css({
          "visibility": "visible",
          "opacity": "1"
        });
      }, 500);
    });
    // 第四个问题选择
    $("#choise4 .choiseItem").click(function () {
      let text = $(this).text();
      $("#answer4 .chatDiv").text(text);
      $("#answer4").removeClass("faq");
      $("#choise4").css({
        "opacity": "0",
        "visibility": "hidden"
      });
      setTimeout(() => {
        $("#question5").removeClass("faq");
        scrollFuc();
        $("#choise5").css({
          "visibility": "visible",
          "opacity": "1"
        });
      }, 500);
    });


    $("#choise5 .choiseItem").click(function () {
      let text = $(this).text();
      $("#answer5 .chatDiv").text(text);
      $("#answer5").removeClass("faq");
      $("#choise5").css({
        "opacity": "0",
        "visibility": "hidden"
      });
      setTimeout(() => {

        if (text == "不愿意") {
          $("#dontNeed").removeClass("faq");
          scrollFuc();
        } else {
          $("#question6").removeClass("faq");
          scrollFuc();
         
        }

      }, 500);
    });