import React, { useState } from 'react'
import styles from './index.module.scss'
import { backPageFu } from '@/utils/history'

function A5wenwu() {
  const [currentTab, setCurrentTab] = useState('tab1')
  return (
    <div className={styles.A5wenwu}>
      <div className='back' onClick={() => backPageFu('/yblm')}>
        <img src={require('@/assets/img/btn_back.png')} alt='' />
      </div>

      <div className="gesture">
        <img src={require('@/assets/img/A5_gesture.png')} alt="" />
        <div className="txt">单指滑动进行旋转</div>
      </div>

      {/* 左边 */}
      <div className='A5_tabBar'>
        <div className={`tab`} onClick={() => setCurrentTab('tab1')}>
          <img
            src={require(`@/assets/img/A5_size${currentTab === 'tab1' ? 'Ac' : ''}.png`)}
            alt=''
          />
          <div className='txt'>尺寸</div>
        </div>
        <div className={`tab`} onClick={() => setCurrentTab('tab2')}>
          <img
            src={require(`@/assets/img/A5_tapian${currentTab === 'tab2' ? 'Ac' : ''}.png`)}
            alt=''
          />
          <div className='txt'>拓片</div>
        </div>
        <div className={`tab`} onClick={() => setCurrentTab('tab3')}>
          <img
            src={require(`@/assets/img/A5_line${currentTab === 'tab3' ? 'Ac' : ''}.png`)}
            alt=''
          />
          <div className='txt'>线图</div>
        </div>
      </div>

      {/* 右边 */}
      <div className='A5_tabBarR'>
        <div className={`tab`}>
          <img src={require(`@/assets/img/A5_zoomin.png`)} alt='' />
          <div className='txt'>放大</div>
        </div>
        <div className={`tab`}>
          <img src={require(`@/assets/img/A5_zoomout.png`)} alt='' />
          <div className='txt'>缩小</div>
        </div>
        <div className={`tab`}>
          <img src={require(`@/assets/img/A5_reset.png`)} alt='' />
          <div className='txt'>重置</div>
        </div>
      </div>
    </div>
  )
}

const MemoA5wenwu = React.memo(A5wenwu)

export default MemoA5wenwu
