$(document).ready(function () {
  // 初始化产品图片切换功能
  initProductGallery();

  // 初始化SKU属性切换
  initSkuSwitcher();

  // 初始化放大镜功能（仅对图片有效）
  initMagnifier();

  // 初始化图片放大功能
  initImageEnlarger();
});

/**
 * 产品图片切换功能（支持视频）
 */
function initProductGallery() {
  $('.preview').each(function () {
    const $preview = $(this);
    const $imageMenu = $preview.find(".imageMenu");
    const $imageList = $imageMenu.find(".image_list");
    const $mediaContainer = $preview.find(".bigImg"); // 改为通用的媒体容器
    const $enlargeImg = $(".enlarge-img img");
    const $scrollButtons = $preview.find('.scrollbutton');

    const mediaItems = $imageList.find("li");
    const count = mediaItems.length;
    const interval = mediaItems.first().height();
    let curIndex = 0;

    // 更新按钮状态
    function updateButtonState() {
      $scrollButtons.removeClass('disabled');
      if (curIndex === 0) $preview.find('.smallImgUp').addClass('disabled');
      if (curIndex === count - 1) $preview.find('.smallImgDown').addClass('disabled');
    }


    // 切换媒体内容（图片或视频）
    function switchMedia(index) {
      curIndex = index;
      const $item = mediaItems.eq(index);
      const mediaUrl = $item.find('img').data('url');
      const isVideo = isVideoUrl(mediaUrl);

      // 更新缩略图状态
      mediaItems.eq(index).addClass('on').siblings().removeClass("on");

      // 清空媒体容器
      $mediaContainer.empty();

      if (isVideo) {
        // 创建视频元素（优化后的版本）
        const videoHtml = `
      <video class="product-video" controls autoplay muted playsinline 
             style="width:100%; max-height:100%; object-fit:contain;">
        <source src="${mediaUrl}" type="video/mp4">
        您的浏览器不支持视频播放
      </video>
    `;
        $mediaContainer.html(videoHtml);

        // 添加视频加载后的处理
        const $video = $mediaContainer.find('video');
        $video.on('loadedmetadata', function () {
          // 确保视频在容器中正确显示
          $(this).css({
            'width': '100%',
            'height': 'auto',
            'max-height': '100%',
            'object-fit': 'contain'
          });

          // 居中显示
          $(this).parent().css({
            'display': 'flex',
            'align-items': 'center',
            'justify-content': 'center'
          });
        });

        // 大图查看器不显示视频
      } else {
        // 显示图片
        $mediaContainer.html(`<img id="midimg" src="${mediaUrl}" style="max-width:100%; max-height:100%;" />`);

        // 更新大图查看器的图片
        $enlargeImg.attr('src', mediaUrl);
      }

      $imageList.stop().animate({ "marginTop": -index * interval + "px" }, 600);
      updateButtonState();
    }

    // 滚动按钮事件
    $scrollButtons.on('click', function () {
      if ($(this).hasClass('disabled')) return false;

      const newIndex = $(this).hasClass('smallImgUp') ? curIndex - 1 : curIndex + 1;
      switchMedia(newIndex);
    });

    // 缩略图点击事件
    $imageList.on('click', 'li img', function () {
      const $li = $(this).parent();
      switchMedia($li.index());
    });

    // 初始化状态
    switchMedia(0);
  });
}

/**
 * 判断URL是否是视频
 */
function isVideoUrl(url) {
  if (!url) return false;
  const videoExtensions = ['.mp4', '.webm', '.ogg'];
  return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
}

/**
 * SKU属性切换功能
 */
function initSkuSwitcher() {
  $(".dowebok").on('click', 'a', function (e) {
    e.preventDefault();
    const skuId = $(this).data('sku_id');

    $(this).addClass('on')
      .parent().siblings().find('a').removeClass('on');

    $(".preview").hide();
    $(`#preview${skuId}`).show();

    // 切换SKU后重置图片查看器
    $(".enlarge-img").hide();
  });
}

/**
 * 放大镜功能（仅对图片有效）
 */
function initMagnifier() {
  // 仅当主图是图片时初始化放大镜
  $(document).on('mouseenter', '#midimg', function () {
    const $midimg = $(this);
    const $winSelector = $("#winSelector");
    const $bigView = $("#bigView");
    const $bigViewImg = $bigView.find("img");

    let selectorWidth = $winSelector.width();
    let selectorHeight = $winSelector.height();
    let imgWidth = $midimg.width();
    let imgHeight = $midimg.height();
    let viewImgWidth, viewImgHeight, viewHeight;

    // 更新大图
    function updateViewImg() {
      $bigViewImg.attr('src', $midimg.attr('src'));
    }

    // 计算选择器位置
    function calculatePosition(e) {
      const imgOffset = $midimg.offset();
      let X = e.pageX - imgOffset.left - selectorWidth / 2;
      let Y = e.pageY - imgOffset.top - selectorHeight / 2;

      X = Math.max(0, Math.min(X, imgWidth - selectorWidth));
      Y = Math.max(0, Math.min(Y, imgHeight - selectorHeight));

      if (!viewImgWidth) {
        viewImgWidth = $bigViewImg.outerWidth();
        viewImgHeight = $bigViewImg.height();

        if (viewImgWidth < 200 || viewImgHeight < 200) {
          viewImgWidth = viewImgHeight = 800;
        }

        viewHeight = selectorHeight * viewImgHeight / imgHeight;
        $bigView.width(selectorWidth * viewImgWidth / imgWidth);
        $bigView.height(viewHeight);
      }

      const scrollX = X * viewImgWidth / imgWidth;
      const scrollY = Y * viewImgHeight / imgHeight;

      $bigViewImg.css({
        "left": -scrollX,
        "top": -scrollY
      });

      $bigView.css({
        "top": 0,
        "left": $(".preview").offset().left + $(".preview").width() + 15
      });

      return { left: X, top: Y };
    }

    // 鼠标事件处理
    function handleMouseOver(e) {
      if ($winSelector.is(":hidden")) {
        $winSelector.add($bigView).show();
      }
      $winSelector.css(calculatePosition(e));
      e.stopPropagation();
    }

    function handleMouseOut() {
      $winSelector.add($bigView).hide();
    }

    // 绑定事件
    $midimg.on({
      mousemove: handleMouseOver,
      mouseout: handleMouseOut
    });

    // 初始化
    updateViewImg();
    $bigView.scrollLeft(0).scrollTop(0);
  });
}

/**
 * 图片放大功能（仅显示图片）
 */
function initImageEnlarger() {
  const $enlargeImg = $(".enlarge-img");
  const $enlargeImgContent = $enlargeImg.find("img");
  const $closeBtn = $enlargeImg.find(".close");

  // 主图点击放大（仅对图片有效）
  $(document).on('click', '.bigImg img', function () {
    const currentImgSrc = $(this).attr('src');
    $enlargeImgContent.attr('src', currentImgSrc);
    $enlargeImg.show();
  });

  // 关闭放大图
  $closeBtn.on('click', function () {
    $enlargeImg.hide();
  });

  // 放大图中的左右切换按钮（仅切换图片）
  $enlargeImg.find('.scrollbutton_01').on('click', function () {
    const $currentPreview = $('.preview:visible');
    const $imageMenu = $currentPreview.find('.imageMenu');
    const $allItems = $imageMenu.find('li');
    const $currentItem = $imageMenu.find('li.on');
    let currentIndex = $allItems.index($currentItem);

    // 只查找图片项（跳过视频）
    let $imageItems = $allItems.filter(function () {
      return !isVideoUrl($(this).find('img').data('url'));
    });

    // 如果没有图片项，直接返回
    if ($imageItems.length === 0) {
      $enlargeImg.hide();
      return;
    }

    // 找到当前图片在纯图片列表中的位置
    let imageIndex = $imageItems.index($currentItem);
    if (imageIndex === -1) imageIndex = 0;

    let newIndex;
    if ($(this).hasClass('smallImgUp')) {
      newIndex = (imageIndex - 1 + $imageItems.length) % $imageItems.length;
    } else {
      newIndex = (imageIndex + 1) % $imageItems.length;
    }

    const newImgSrc = $imageItems.eq(newIndex).find('img').data('url');
    $enlargeImgContent.attr('src', newImgSrc);

    // 同步更新主图显示（如果当前显示的是图片）
    if ($currentPreview.find('video').length === 0) {
      $currentPreview.find('#midimg').attr('src', newImgSrc);
    }

    // 更新激活状态
    $allItems.removeClass('on');
    $imageItems.eq(newIndex).addClass('on');
  });

  // ESC键关闭
  $(document).on('keyup', function (e) {
    if (e.key === "Escape") {
      $enlargeImg.hide();
    }
  });
}