import React, { useCallback } from 'react'
import styles from './index.module.scss'
import { Swiper } from 'antd-mobile'
import { myInfo } from '@/utils/history'
function A1home() {
  // 新窗口打开页面
  const openPage = useCallback((url: string) => {
    window.open(url, '_self')
  }, [])

  return (
    <div className={styles.A1home}>
      <div className='A1top'>
        <Swiper loop autoplay>
          {myInfo.swArr.map(item => (
            <Swiper.Item key={item.id}>
              <img
                src={`./myData/img/${item.id}h.jpg`}
                alt=''
                onClick={() => openPage(item.link)}
              />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>

      <div className='A1box1'>
        <div className='A1tit'>展览精选</div>
        <div className='A1_1list'>
          {myInfo.swArr.map(item => (
            <div className='A1_1row' key={item.id}>
              <img
                src={`./myData/img/${item.id}s.jpg`}
                alt=''
                onClick={() => openPage(item.link)}
              />
              <div className='A1_1row1'>{item.name}</div>
              <div className='A1_1row2'>{item.partOf}</div>
            </div>
          ))}
        </div>
      </div>

      <div className='A1BottomTxt'>持续上新，敬请期待</div>
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home
