import React, { useCallback } from 'react'
import styles from './index.module.scss'

import backImg from '@/assets/img/back.png'
import { ImageViewer } from 'antd-mobile'

function C1map() {
  const toHomeHtml = useCallback(() => {
    window.location.href = '/web/home.html'
  }, [])
  return (
    <div className={styles.C1map}>
      <img className='C1bgBack' src={backImg} alt='' onClick={toHomeHtml} />

      <div className='C1imgBox'>
        <p>点击图片可放大缩小查看</p>
        <p>长按图片可保存</p>
        <img
          className='C1img'
          src={`${process.env.PUBLIC_URL}/home/map.jpg`}
          alt=''
          onClick={() => {
            ImageViewer.Multi.show({ images: [`${process.env.PUBLIC_URL}/home/map.jpg`] })
          }}
        />
      </div>
    </div>
  )
}

const MemoC1map = React.memo(C1map)

export default MemoC1map
