import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import history from '@/utils/history'
import { myData } from '@/utils/http'



function A0base() {
  const [currentBase, setCurrentBase] = useState('base1')
  const [isOpenInteract, setIsOpenInteract] = useState(false)

  const goto = (e: React.MouseEvent, path: string) => {
    e.preventDefault()
    e.stopPropagation()
    history.push(path)
  }
  return (
    <div className={styles.A0base}>
      <div className='A0Container'>
        {myData.baseInfo.map((item, index) => (
          <div key={index}
            className={`base ${currentBase === `base${index + 1}` ? 'A1active' : ''}`}
            onClick={() => setCurrentBase(`base${index + 1}`)}
          >
            <div className='top'>
              <div className='butterfly'>
                <img src={require('@/assets/img/butterflyL.png')} alt='' />
              </div>
              <div className='title'>{item.title}</div>
              <div className='detail' onClick={e => goto(e, item.path)}>
                <div className='icon'>
                  <img src={require('@/assets/img/A0_down.png')} alt='' />
                </div>
                <div className='txt'>查看详情</div>
              </div>
            </div>
            <div className={`content`}>
              {item.text}
            </div>
          </div>
        ))}

      </div>

      {/* 互动 */}
      <div className='interact'>
        <div className={`inter_content ${isOpenInteract ? 'inter_content_active' : ''}`}>
          <div className='inter'>碟影智绘</div>
          <div className='inter'>展览图谱</div>
          <div className='inter'>AI问答</div>
        </div>
        <div className='icon' onClick={() => setIsOpenInteract(!isOpenInteract)}>
          <img src={require('@/assets/img/interaction.png')} alt='' />
        </div>
      </div>

      <div className='home'>
        <img src={require('@/assets/img/home.png')} alt='' />
      </div>

      {/* 先导片 */}
      <div className='guideVideo'>
        <img src={require('@/assets/img/guideVideo.png')} alt='' />
        <div className='guideVideoTitle'>先导片</div>
      </div>
    </div>
  )
}

const MemoA0base = React.memo(A0base)

export default MemoA0base
