import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { HomeDataRow, myData, myUrl } from '@/utils/history'
import classNames from 'classnames'
import { DownOutlined, UpOutlined } from '@ant-design/icons'

type Props = {
  info: HomeDataRow
  closeFu: (id: number) => void
}

function A1info({ info, closeFu }: Props) {
  const [open, setOpen] = useState(true)

  // 隐藏关闭按钮
  const [colseHide, setCloseHide] = useState(true)

  useEffect(() => {
    if (window.location.href.includes('?x=h')) {
    } else setCloseHide(false)
  }, [])

  // 操作模型
  const btnModelFu = useCallback((val: 1 | 2 | 3) => {
    const dom: any = document.querySelector('#ifr')
    if (dom && dom.contentWindow && dom.contentWindow.webview) {
      val === 1
        ? dom.contentWindow.webview.zoomIn()
        : val === 2
        ? dom.contentWindow.webview.zoomOut()
        : dom.contentWindow.webview.resetView()
    }
  }, [])

  return (
    <div className={classNames(styles.A1info, open ? styles.A1infoOpen : '')} id='A1info'>
      {/* 关闭按钮 */}
      <img
        hidden={colseHide}
        className='A1Dclose'
        src={myUrl + 'img/close.png'}
        alt=''
        onClick={() => closeFu(info.id)}
      />

      <div className='A1Dtop'>
        <iframe id='ifr' src={info.modelUrl} frameBorder='0' title='model'></iframe>
      </div>

      {/* 内容主体 */}
      <div
        className='A1Dmain'
        style={{ backgroundImage: `url(${myUrl + myData.infoImg})` }}
      >
        {/* 展开 */}
        <div className='A1Dopen' onClick={() => setOpen(true)}>
          <DownOutlined rev={undefined} />
          <p>收</p>
          <p>起</p>
        </div>

        {/* 标题 */}
        <div className='A1Dtit'>
          <h2>{info.name}</h2>
          {info.age ? (
            <p>
              <span>年代：</span>
              {info.age}
            </p>
          ) : null}
          {info.level ? (
            <p>
              <span>级别：</span>
              {info.level}
            </p>
          ) : null}
        </div>

        {/* 文本内容 */}
        <div className='A1Dtxt' dangerouslySetInnerHTML={{ __html: info.text }}></div>
      </div>

      {/* 收起、操作模型按钮 */}
      <div className='A1DHide'>
        <div>
          <img src={myUrl + 'img/icon_zoomin.png'} onClick={() => btnModelFu(1)} alt='' />
        </div>
        <div>
          <img
            src={myUrl + 'img/icon_zoomout.png'}
            onClick={() => btnModelFu(2)}
            alt=''
          />
        </div>
        <div>
          <img src={myUrl + 'img/icon_rotate.png'} onClick={() => btnModelFu(3)} alt='' />
        </div>
        <div className='A1DHbtn' onClick={() => setOpen(false)}>
          <UpOutlined rev={undefined} />
        </div>
      </div>

      {/* 展开状态顶部的名称 */}
      <div className='A1DshowTitle' hidden={!open}>
        {info.name}
      </div>
    </div>
  )
}

const MemoA1info = React.memo(A1info)

export default MemoA1info
