ScienceEduBaseBase/src/pages/A2layout/components/Look/index.tsx

import React, { useState, useRef } from 'react'
import styles from './index.module.scss'
import { isMobileFu } from '@/utils/history'
import { Swiper, SwiperSlide } from 'swiper/react'

import 'swiper/css'
import 'swiper/css/effect-coverflow'
import 'swiper/css/pagination'
import 'swiper/css/navigation'

import { EffectCoverflow, Pagination, Navigation } from 'swiper/modules'
function Look({
  style,
  setIsHideSider
}: {
  style: React.CSSProperties
  setIsHideSider: (isHideSider: boolean) => void
}) {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
  const [selectIndex, setSelectIndex] = useState<number | null>(null)
  const swiperRef = useRef<any>(null)
  const iframeRef = useRef<HTMLIFrameElement>(null)

  // 添加全屏切换函数
  const toggleFullscreen = () => {
    if (!iframeRef.current) return

    const iframe = iframeRef.current

    // 检查是否已经全屏
    if (!document.fullscreenElement) {
      // 直接请求iframe元素全屏（而非内部文档）
      if (iframe.requestFullscreen) {
        iframe
          .requestFullscreen()
          .then(() => { })
          .catch(err => {
            console.error('进入全屏失败:', err)
          })
      }
    } else {
      // 退出全屏
      if (document.exitFullscreen) {
        document
          .exitFullscreen()
          .then(() => { })
          .catch(err => {
            console.error('退出全屏失败:', err)
          })
      }
    }
  }

  return (
    <div className={styles.look} style={style}>
      {/* 顶部仅在pc端显示 */}
      <div className='top'>
        <div className='logo'>
          <img src={require('@/assets/img/sceneLogo.png')} alt='' />
        </div>
        <div className='title'>矿石赏析</div>
      </div>
      {selectIndex === null ? (
        <div className='content'>
          {/* 移动端 */}
          {isMobileFu() && (
            <Swiper
              ref={swiperRef}
              loopPreventsSliding={false}
              effect={'coverflow'}
              grabCursor={true}
              centeredSlides={true}
              slidesPerView={'1'}
              coverflowEffect={{
                rotate: 0,
                stretch: 0,
                depth: 180,
                modifier: 4
              }}
              pagination={{ el: '.swiper-pagination', clickable: true }}
              modules={[EffectCoverflow, Pagination, Navigation]}
              className='swiper_container'
              // 添加Swiper尺寸观察器
              observer={true}
              observeParents={true}
              // 初始化后强制更新布局
              onInit={(swiper: any) => {
                setTimeout(() => {
                  swiper.update()
                }, 0)
              }}
            >
              {/* 保持原有的slide渲染代码不变 */}
              {oreData.map((item, index) => (
                <SwiperSlide key={index}>
                  <div
                    className='itemCard'
                    key={index}
                    // onMouseEnter={() => setHoveredIndex(index)}
                    // onMouseLeave={() => setHoveredIndex(null)}
                    onClick={() => {
                      setSelectIndex(index)
                      setIsHideSider(true)
                    }}
                  >
                    <div className='itemImage'>
                      <img
                        src={hoveredIndex === index ? item.activeImg : item.img}
                        alt={item.title}
                      />
                    </div>
                    <div className='viewButton'>查看详情</div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          )}

          {/* pc端 */}
          {!isMobileFu() &&
            oreData.map((item, index) => (
              <div
                className='itemCard pcItem'
                key={index}
                onMouseEnter={() => setHoveredIndex(index)}
                onMouseLeave={() => setHoveredIndex(null)}
                onClick={() => {
                  setSelectIndex(index)
                  setIsHideSider(true)
                }}
              >
                <div className='itemImage'>
                  <img
                    src={hoveredIndex === index ? item.activeImg : item.img}
                    alt={item.title}
                  />
                </div>
                <div className='viewButton'>查看详情</div>
              </div>
            ))}
        </div>
      ) : (
        <>
          <div
            className='back'
            onClick={() => {
              setSelectIndex(null)
              setIsHideSider(false)
            }}
          >
            <img src={require('@/assets/img/back.png')} alt='' />
          </div>

          <div className='detail'>
            <div className='left'>
              <div className='fullscreen' onClick={toggleFullscreen}>
                <img src={require('@/assets/img/enlarge_on.png')} alt='' />
              </div>
              <iframe
                ref={iframeRef}
                title='3D Model'
                src={selectIndex !== null ? oreData[selectIndex].modelSrc : ''}
                allow='src'
              />
            </div>
            <div className='right'>
              <div className='oreTitle'>
                {selectIndex !== null ? oreData[selectIndex].title : ''}
              </div>
              <div className='intro' dangerouslySetInnerHTML={{ __html: selectIndex !== null ? oreData[selectIndex].text : '' }}>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  )
}

const MemoLook = React.memo(Look)

export default MemoLook