import React, { useState } from 'react'
import styles from './index.module.scss'
import { sceneLink } from './data'
import classNames from 'classnames'
import { CaretDownOutlined } from '@ant-design/icons'

function A1home() {
  const [current, setCurrent] = useState(1)

  const [code, setCode] = useState(sceneLink[0].items[0].link)

  const [show, setShow] = useState(true)

  return (
    <div className={styles.A1home}>
      <div className={classNames('A1mian', show ? '' : 'A1mianHide')}>
        <div className='topBar'>
          <div className='txt'>北人亦创国际会展中心</div>
        </div>

        <div className='top'>
          <div className='exhibition'>
            {sceneLink.map(item => {
              return (
                <div
                  className={classNames(
                    'exhibitionTitle',
                    current === item.id ? 'exhibitionTitleAc' : ''
                  )}
                  key={item.id}
                  onClick={() => setCurrent(item.id)}
                >
                  {item.title}
                </div>
              )
            })}
          </div>
          <div className='sceneList'>
            {sceneLink
              .find(item => item.id === current)
              ?.items.map((item, index) => {
                return (
                  <div
                    className={classNames('scene', code === item.link ? 'sceneAc' : '')}
                    key={item.link}
                    onClick={() => {
                      setCode(item.link)
                      setShow(false)
                    }}
                  >
                    <img
                      className='sceneImg'
                      src={`https://houseoss.4dkankan.com/project/DEMO/BeiRen/imgBase/${item.link}.jpg`}
                      alt=''
                      draggable='false'
                    />
                    <p>{item.title}</p>
                  </div>
                )
              })}
            <div className='jiantou' onClick={() => setShow(false)}></div>
          </div>
        </div>
      </div>

      <div className='showJiantou' hidden={show} onClick={() => setShow(true)}>
        <CaretDownOutlined rev={undefined} />
      </div>

      <iframe
        key={code}
        src={`https://www.4dkankan.com/spg.html?m=${code}&lang=zh`}
        frameBorder='0'
        title='场景'
      ></iframe>
    </div>
  )
}

const MemoA1home = React.memo(A1home)

export default MemoA1home
