{% extends 'partials/base.html.twig' %}
{% block content %}
	<div class="container py-4">
		<style>
			.linksmenu {
				display: none; /* 隐藏链接菜单区域 */
			}
			.zhanwei {
				display: none; /* 隐藏占位符 */
			}
			.cardgallery {
				margin: 0.25rem 0rem;

			}
		</style>

        {% if config.plugins.loadimages.enabled %}
		
		  <!-- 分类筛选 -->
		  <div class="mb-4 text-right">
		    <select id="categorySelect" class="form-control w-auto d-inline-block">
		      <option value="all">所有分类</option>
		    </select>
		    <!-- 排序控件 -->
		    <label for="sortOrder" class="ml-3">排序：</label>
		    <select id="sortOrder" class="form-control w-auto d-inline-block">
		      <option value="desc" selected>最新</option>
		      <option value="asc">最早</option>
		    </select>
		  </div>
		
		  <!-- 图片网格（瀑布流布局） -->
		  <div id="gallery" class="row" data-masonry='{"percentPosition": true }'></div>
		
		  <!-- 加载状态指示器（隐藏，加载中显示） -->
		  <div class="text-center my-4" id="loadingIndicator" style="display:none;">
		    <div class="spinner-border text-primary" role="status">
		      <span class="sr-only">加载中...</span>
		    </div>
		  </div>
		 {% else %}
			<div class="col-12">
			<H5>提醒：</H5>
			<hr>
			<p>欢迎您的访问，此页面暂时无可预览的内容。</p>
			<p>请联系管理员：QQ 806666754</p>
			</div>
		{% endif %}
	</div>

{% endblock %}

{% block stylesheets %}
	
	  {{ parent() }}
	{% if config.plugins.loadimages.enabled %}
	  <!-- glightbox 样式 -->
	  <link href="{{ url('theme://css/glightbox/glightbox.min.css') }}" rel="stylesheet">
	  <style>
	    .zanwei {
	      display: none;
	    }
	    /* 统一卡片圆角 */
	    .cardgallery {
	      border-radius: 12px;
	    }
	    .cardgallery img {
	      border-radius: 0.3rem 0.3rem 0 0;
	    }
	    /* 图片比例4:3 */
	    .card-img-top {
	      /* height: 180px; 根据需要调整高度 */
	      object-fit: cover;
	      width: 100%;
	      /* 确保图片填满容器 */
	      height: auto; /* 移除固定高度，让图片根据宽度自适应高度，保持比例 */
	      display: block; /* 移除图片底部的空白 */
	    }
	    /* 调整卡片体高度，避免溢出 */
	    .card-body {
	        flex-grow: 0; /* 防止 card-body 挤压图片 */
	    }
	    /* 标题和日期样式 */
	    .card-title {
	      font-size: 1rem;
	      margin-bottom: 0.25rem;
	    }
	    .card-text {
	      font-size: 0.85rem;
	      margin: 0;
	    }
	    /* 小屏幕单列，优化 */
	    @media(max-width: 768px) {
	      .col-12 {
	        flex: 0 0 100%;
	        max-width: 100%;
	      }
	      .card-img-top {
	        /* height: 150px; 根据需要调整高度 */
	        height: auto; /* 移除固定高度 */
	      }
	    }
	    /* 调整图片网格的列宽，使其更适配 */
	    @media (min-width: 576px) { /* 小屏幕 */
	      .col-sm-6 {
	        flex: 0 0 50%;
	        max-width: 50%;
	      }
	    }
	    @media (min-width: 768px) { /* 中等屏幕 */
	      .col-md-4 {
	        flex: 0 0 33.333333%;
	        max-width: 33.333333%;
	      }
	    }
	    @media (min-width: 992px) { /* 大屏幕 */
	      .col-lg-3 {
	        flex: 0 0 25%;
	        max-width: 25%;
	      }
	    }
	
	  </style>
	{% endif %}
{% endblock %}

{% block javascripts %}
{{ parent() }}
	{% if config.plugins.loadimages.enabled %}
	  
	
	  <!-- 引入glightbox -->
	  <script src="{{ url('theme://js/glightbox/glightbox.min.js') }}"></script>
	  <!-- 引入 Masonry 布局 -->
	  <script src="{{ url('theme://js/masonry/masonry.pkgd.min.js') }}"></script>
	  
	  {#<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" async></script>#}

	
	  <script>
	    // =================== 关键全局变量 ===================
	    // 排序参数（固定排序字段，未来可扩展）
	    let sortField = 'date';
	    let sortOrder = 'desc';
	
	    // 页面加载后执行
	    document.addEventListener("DOMContentLoaded", () => {
	      // 获取分类列表
	      getcategorylist();
	
	      // 绑定分类切换事件
	      document.getElementById('categorySelect').addEventListener('change', () => {
	        category = document.getElementById('categorySelect').value;
	        loadImages(true);
	      });
	
	      // 绑定排序切换事件
	      document.getElementById('sortOrder').addEventListener('change', () => {
	        sortOrder = document.getElementById('sortOrder').value;
	        loadImages(true);
	      });
	
	      // 初始化变量
	      let page = 1;
	      const limit = 12;
	      let total = 0;
	      let category = 'all';
	      let isLoading = false;
	      // *** 新增变量保存滚动位置 ***
	      let savedScrollY = 0;
	
	      // 初始化GLightbox
	      const glightbox = GLightbox({
		    selector: '.glightbox',
		    touchNavigation: true,
		    loop: true,
		    openEffect: 'zoom',
		    closeEffect: 'fade',
		    events: {
		        onOpen: () => {
		            // 记录当前滚动位置
		            savedScrollY = window.scrollY;
		            // 获取滚动条的宽度
		            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
		            // 设置 body 的 margin-right，保持滚动条宽度
		            document.body.style.marginRight = `${scrollbarWidth}px`;
		            // 确保页面可以滚动
		            document.body.style.overflow = 'hidden';
		            console.log('Lightbox opened, saved scroll:', savedScrollY);
		        },
		        onClose: () => {
		            // 恢复滚动位置
		            window.scrollTo(0, savedScrollY);
		            // 恢复 body 的样式
		            document.body.style.marginRight = '0';
		            document.body.style.overflow = 'auto';
		            console.log('Lightbox closed, restoring scroll to:', savedScrollY);
		        }
		    }
		});
	
	      // 节流函数
	      function throttle(func, delay) {
	        let timer = null;
	        return function(...args) {
	          if (!timer) {
	            timer = setTimeout(() => {
	              func.apply(this, args);
	              timer = null;
	            }, delay);
	          }
	        };
	      }
	
	      // 载入图片（核心函数）
	      async function loadImages(reset = false) {
	        if (isLoading) return;
	        isLoading = true;
	        // 显示加载动画
	        document.getElementById('loadingIndicator').style.display = 'block';
	
	        const gallery = document.getElementById('gallery');
	
	        if (reset) {
	          page = 1;
	          gallery.innerHTML = '';
	          // 移除底部结束标志
	          const endDiv = document.getElementById('endDivider');
	          if (endDiv) endDiv.remove();
	
	           // ** 添加：如果使用了 Masonry，在清空后需要重新初始化或销毁再创建 **
	           // 简单粗暴一点：直接移除 data-masonry 属性，依赖 Masonry 的 async script 重新查找
	           gallery.removeAttribute('data-masonry');
	           // 或者更规范地，如果你手动初始化了 Masonry 实例，这里需要销毁它
	           // if (masonryInstance) masonryInstance.destroy();
	        }
	
	        try {
	          // 请求URL加入排序参数
	          const res = await fetch(`/loadimages?page=${page}&limit=${limit}&category=${encodeURIComponent(category)}&sort=${sortField}&order=${sortOrder}`);
	          const data = await res.json();
	          total = data.total;
	
	          const fragment = document.createDocumentFragment();
	
	          data.images.forEach(img => {
	            const col = document.createElement('div');
	            // col.className = 'col-12 col-sm-6 col-md-4 col-lg-3 grid-item'; // Masonry 可能需要 grid-item 类
	             col.className = 'col-12 col-sm-6 col-md-4 col-lg-3'; // 沿用 Bootstrap 列类即可，Masonry 会自动找到子元素
	
	            // 注意：缩略图URL为空时，这里直接用了img.url。
	            // 如果你的thumbnailUrl逻辑会返回空字符串，需要确保img.thumbnailUrl是有效的，或者使用img.url作为fallback
	            const displayUrl = img.thumbnailUrl || img.url;
	
	            col.innerHTML = `
	              <div class="card shadow-sm h-60 cardgallery">
	                <a href="${img.url}" class="glightbox" data-gallery="gallery" data-title="${img.name}" data-description="日期：${img.date}">
	                  <img src="${displayUrl}" class="card-img-top" alt="${img.name}">
	                </a>
	                <div class="card-body d-flex flex-column justify-content-end p-2">
	                  <span class="card-title mb-1 text-truncate" title="${img.name}">${img.name}</span>
	                  <!-- 日期显示已移除 -->
	                </div>
	              </div>
	            `;
	            fragment.appendChild(col);
	          });
	
	          gallery.appendChild(fragment);
	
	          // ** 添加：如果使用了 Masonry，在添加新元素后需要重新布局 **
	          // 如果是依赖 data-masonry 属性和 async script 加载，可能需要移除再添加 data-masonry 属性
	          // 如果是手动初始化，需要调用 masonryInstance.appended(fragment) 并 layout()
	          // 简单的做法是确保 Masonry 的 JS 在 DOMContentLoaded 之后且在元素加载后能正确执行或重新查找
	          // 考虑到你使用了 data-masonry 属性，最简单可能是依赖 Masonry 的 async 加载和初始化，
	          // 或在元素加载后手动触发 Masonry 布局更新。
	          // 这里假设 Masonry 的 async 加载能处理，或者你需要手动初始化 Masonry 实例并调用布局方法。
	          // 例如：
	          // if (typeof Masonry !== 'undefined') {
	          //   var msnry = Masonry.data( gallery );
	          //   if (msnry) {
	          //     msnry.appended( fragment.children ); // append elements
	          //     msnry.layout(); // relayout
	          //   } else {
	          //      // Initialize if not already
	          //      new Masonry( gallery, { percentPosition: true } );
	          //   }
	          // }
	          // 你的 HTML 中使用了 data-masonry 属性，依赖于 Masonry 的 async script，
	          // 理论上 Masonry 在加载后会查找并初始化。但动态添加元素后需要触发布局。
	          // 简单的尝试是在元素添加后重新添加 data-masonry 属性，强制 Masonry 重新查找和初始化
	          gallery.setAttribute('data-masonry', '{"percentPosition": true }');
	
	
	          // GLightbox reload after new elements are added
	          glightbox.reload(); 
	
	          // 递增页码
	          page++;
	
	          // 判断是否加载完全部
	          if ((page - 1) * limit >= total) {
	            if (!document.getElementById('endDivider')) {
	              const endDiv = document.createElement('div');
	              endDiv.id = 'endDivider';
	              endDiv.style.width = '100%';
	              endDiv.style.height = '60px';
	              endDiv.style.display = 'flex';
	              endDiv.style.alignItems = 'center';
	              endDiv.style.justifyContent = 'center';
	              endDiv.innerHTML = '<span style="color:#777;">已加载全部内容</span>';
	              gallery.appendChild(endDiv);
	            }
	          } else {
	            // 移除上次的结束标志（如果有）
	            const existingEnd = document.getElementById('endDivider');
	            if (existingEnd) existingEnd.remove();
	          }
	
	        } catch (error) {
	          console.error('加载失败:', error);
	        } finally {
	          isLoading = false;
	          document.getElementById('loadingIndicator').style.display = 'none';
	        }
	      }
	
	      // 处理滚动加载
	      function handleScroll() {
	        const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
	        const threshold = 200; // 距离底部 200px 时触发
	        if (
	          scrollTop + clientHeight >= scrollHeight - threshold &&
	          !isLoading &&
	          (page - 1) * limit < total // 确保还有更多页
	        ) {
	          loadImages();
	        }
	      }
	
	      window.addEventListener('scroll', throttle(handleScroll, 200));
	
	      // 初次加载
	      loadImages();
	
	    }); // DOMContentLoaded结束
	
	    // 获取分类列表（保持不变）
	    function getcategorylist() {
	      fetch('/loadimages?categorylist=1')
	        .then(response => response.json())
	        .then(data => {
	          const categorySelect = document.getElementById("categorySelect");
	          data.forEach(category => {
	            const option = document.createElement("option");
	            option.value = category.name; // 使用 category.name 作为 value
	            option.textContent = category.name;
	            categorySelect.appendChild(option);
	          });
	        })
	        .catch(error => console.error('获取分类列表失败:', error));
	    }
	  </script>
	{% endif %}
{% endblock %}