import React, { useState } from 'react'
import styles from './index.module.scss'
import history, { backPageFu } from '@/utils/history'
import Intro from '@/pages/A2yblm/components/Intro'
import Detail from '@/pages/A2yblm/components/Detail'
import ModalTxt from '@/pages/A2yblm/components/ModalTxt'
function A2yblm() {
  const [currentTab, setCurrentTab] = useState('tab1')
  const [isShowMenu, setIsShowMenu] = useState(false)

  const gotoQuanwenOrWenwu = () => {
    if (currentTab === 'tab3') history.push('/quanwen')
    else history.push('/wenwu')
  }

  const gotoBack = () => {
    if (currentTab === 'tab3') setCurrentTab('tab1')
    else history.push('/base')
  }
  return (
    <div className={styles.A2yblm}>
      <div className='A2_tabBar'>
        <div
          className={`tab ${currentTab === 'tab1' ? 'tab_active' : ''}`}
          onClick={() => setCurrentTab('tab1')}
        >
          石碑
          <br />
          简介
        </div>
        <div
          className={`tab ${currentTab === 'tab2' ? 'tab_active' : ''}`}
          onClick={() => setCurrentTab('tab2')}
        >
          图像
          <br />
          赏析
        </div>
        <div
          className={`tab ${currentTab === 'tab3' ? 'tab_active' : ''}`}
          onClick={() => setCurrentTab('tab3')}
        >
          碑文
          <br />
          解读
        </div>
      </div>

      <div className='back' onClick={gotoBack}>
        <img src={require('@/assets/img/btn_back.png')} alt='' />
      </div>
      <div className='wenwu' onClick={gotoQuanwenOrWenwu}>
        <img src={require(`@/assets/img/A2_${currentTab === 'tab3' ? 'quanwen' : 'wenwu'}.png`)} alt='' />
      </div>
      <div className='menu' onClick={() => setIsShowMenu(true)}>
        <img src={require('@/assets/img/btn_menu.png')} alt='' />
      </div>




      {/* sider内容 */}
      {currentTab === 'tab1' && (
        <div className='sider1'>
          <Intro />
        </div>
      )}
      {currentTab === 'tab2' && (
        <div className='sider2'>
          <Detail />
        </div>
      )}
      {currentTab === 'tab3' && (

        <ModalTxt />

      )}

      {/* menu界面 */}
      <div className={`menuSider ${isShowMenu ? 'show' : ''}`}>
        <div className='sider'>
          <img
            onClick={() => setIsShowMenu(false)}
            src={require(`@/assets/img/menuSiderBtn.png`)}
            alt=''
          />
          <div className='siderContent'>
            <div className='tab' onClick={() => history.push('/yblm')}>
              一碑两面
            </div>
            <div className='tab' onClick={() => history.push('/base')}>
              一碑万象
            </div>
            <div className='tab' onClick={() => history.push('/base')}>
              无尽未竟
            </div>
            <div className='icon'>
              <div className='paint'>
                <img src={require('@/assets/img/icon_paint.png')} alt='' />
                <div className='txt'>碑影智绘</div>
              </div>
              <div className='knowledge'>
                <img src={require('@/assets/img/icon_knowledge.png')} alt='' />
                <div className='txt'>知识图谱</div>
              </div>
              <div className='poster'>
                <img src={require('@/assets/img/icon_poster.png')} alt='' />
                <div className='txt'>分享海报</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

const MemoA2yblm = React.memo(A2yblm)

export default MemoA2yblm
