<?php 
include './head.php';
?>
</div>

<div class="iframe-container">
  <iframe fk-main="my" src="./my.fx"></iframe>
  <iframe fk-main="trade" src="./trade.fx"></iframe>
  <iframe fk-main="ticket" src="./ticket.fx"></iframe>
</div>
<div style="border-top-left-radius: 15px;
  border-top-right-radius: 15px;
    background-color: rgba(33, 150, 243, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);" class="mdui-bottom-nav mdui-bottom-nav-text-auto">
  <a fk-main-open="my" class="mdui-bottom-nav-active">
    <i class="mdui-icon material-icons">accessibility</i>
    <label>主页</label>
  </a>
  <a fk-main-open="trade">
    <i class="mdui-icon material-icons">dashboard</i>
    <label>商品</label>
  </a>
  <a fk-main-open="ticket">
    <i class="mdui-icon material-icons">chat</i>
    <label>工单</label>
  </a>
</div>
<script>
const navItems = document.querySelectorAll('.mdui-bottom-nav a');
const iframeContainer = document.querySelector('.iframe-container');
const iframes = document.querySelectorAll('iframe'); // 获取所有 iframe
const iframeCount = iframes.length; // 计算 iframe 的数量

navItems.forEach(item => {
  item.addEventListener('click', function() {
    // 移除所有导航项的活动状态
    navItems.forEach(nav => nav.classList.remove('mdui-bottom-nav-active'));
    // 给当前点击的导航项添加活动状态
    this.classList.add('mdui-bottom-nav-active');
    
    // 获取 fk-main-open 属性的值，用于查找相应的 iframe
    const pageId = this.getAttribute('fk-main-open');
    const iframeIndex = Array.from(iframes).findIndex(iframe => iframe.getAttribute('fk-main') === pageId);
    
    // 检查 iframeIndex 是否有效
    if (iframeIndex >= 0 && iframeIndex < iframeCount) {
      // 计算准确的 translateX 值，确保滑动至正确位置
      iframeContainer.style.transform = `translateX(-${(iframeIndex * 100) / iframeCount}%)`;
    }
  });
});</script>

<script>
// 获取所有 class 为 iframe-container 的元素
const containers = document.querySelectorAll('.iframe-container');

// 遍历每个 iframe-container
containers.forEach(container => {
    // 获取当前 container 中的 iframe 数量
    const iframeCount = container.querySelectorAll('iframe').length;

    // 计算容器的宽度，每个 iframe 增加 100%
    const newWidth = iframeCount * 100 + '%';

    // 设置 iframe-container 的宽度，动画通过 CSS 控制
    container.style.width = newWidth;
});
</script>