const iframe = document.getElementById("headerIframe");
let observer = null
const backcolor = {
  project: { background: '#F6FEF9', color: '#3C86DF', logo: './image/logo.jpg' },
  mobile: { background: 'none', color: '#000', logo: './image/logo.jpg' },
  about: { background: 'none', color: '#000', logo: './image/logo.jpg' },
  dynamic: { background: 'none', color: '#000', logo: './image/logo.jpg' }
}

function removeListener() {
  if (observer) {
    observer.disconnect();
  }
}
function reinitIframe() {
  if (iframe) {
      console.log('开始执行')
      const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
      const iframeBody = iframeDocument.body
      observer = new MutationObserver(function(mutationsList, observer) {
          const bodyHeight = iframeBody.clientHeight;
          iframe.style.height = `${bodyHeight + 1}px`;
      });

      observer.observe(iframeBody, { attributes: true, childList: true, subtree: true });
  }
}

function handleScroll() {
  const scrollYnma = window.scrollY
  const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
  let imgElement = iframeDocument.getElementById('logo');
  let headerItems = iframeDocument.querySelectorAll('.header-item')
  const urls = window.location.href
  const filed = urls.match(/\/([^\/]+)\.html$/) && urls.match(/\/([^\/]+)\.html$/)[1];
  if(scrollYnma > 1) {
    iframe.style.background = '#fff'
    imgElement.src = './image/logos.jpg'
    iframe.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
    headerItems.forEach(function(item) {
      item.style.color = '#000'; // 设置你想要的字体颜色
    });
    return
  }
  console.log(backcolor[filed], filed)
  iframe.style.background = (backcolor[filed] && backcolor[filed].background) || 'none'
  iframe.style.boxShadow = '0 0 0 rgba(0, 0, 0, 0)';
  imgElement.src = (backcolor[filed] && backcolor[filed].logo) || './image/logos.png'
  headerItems.forEach(function(item) {
    item.style.color = (backcolor[filed] && backcolor[filed].color) || '#fff'; // 设置你想要的字体颜色
  });
}

// 页面滚动事件
document.addEventListener('scroll', handleScroll);

iframe.onload = function() {
  reinitIframe();
  handleScroll()
}

window.addEventListener('beforeunload', function() {
  removeListener();
  document.removeEventListener('scroll', handleScroll);
});

// 设计稿尺寸
function bodyScale() {
    var devicewidth = document.documentElement.clientWidth;
    var scale = devicewidth / 1920;  // 设计稿的尺寸
    document.body.style.zoom = scale;
}
window.onload = window.onresize = function () {
    bodyScale();
};