import React, { useCallback } from 'react'
import styles from './index.module.scss'
import { Image } from 'antd-mobile'
import backImg from '@/assets/img/back.png'
import { ImageViewer, Swiper } from 'antd-mobile'

function C1map() {
  const toHomeHtml = useCallback(() => {
    window.location.href = '/web/home.html'
  }, [])

  const lookImg = useCallback((index: number) => {
    ImageViewer.Multi.show({
      images: mapImgArr.map(v => `${process.env.PUBLIC_URL}/home/${v}`),
      defaultIndex: index
    })
  }, [])

  return (
    <div className={styles.C1map}>
      <img className='C1bgBack' src={backImg} alt='' onClick={toHomeHtml} />

      <div className='C1tit'>
        <p>点击图片可放大缩小查看</p>
        <p>长按图片可保存</p>
      </div>

      <div className='C1img'>
        <Swiper>
          {mapImgArr.map((item, index) => (
            <Swiper.Item key={item}>
              <div>
                <Image
                  onClick={() => lookImg(index)}
                  lazy
                  src={`${process.env.PUBLIC_URL}/home/${item}`}
                  placeholder={<div className='imgLoding1'>加载中...</div>}
                />
              </div>
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
    </div>
  )
}

const MemoC1map = React.memo(C1map)

export default MemoC1map
