import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import { useParams } from 'react-router-dom'
import A1info from '../A1home/A1info'
import history, { HomeDataRow, myData, myUrl } from '@/utils/history'
import { Button } from 'antd'
import classNames from 'classnames'

function A2details() {
  const { id } = useParams<any>()

  const [info, setInfo] = useState({} as HomeDataRow)

  // id找不到数据
  const [err, setErr] = useState(false)

  // 画布播放完毕

  useEffect(() => {
    const info = myData.homeData.find(v => v.id === Number(id))
    if (info) {
      setInfo(info)

      // 开始播放画布
      // if (info.videoUrl) {
      //   const params = {
      //     objectFit: 'cover', // 视频的object-fit样式, 默认 cover
      //     loop: false, // 是否循环, 默认false
      //     autoplay: true, // 自动播放, 默认false
      //     onPlay: () => {}, // 触发播放事件
      //     onPause: () => {}, // 触发暂停事件
      //     onEnded: () => {
      //       setInfo(info)
      //     } // 触发播放结束事件
      //   }
      //   const player = F_Video(myUrl + info.videoUrl, params)
      //   const dom = document.querySelector('.A2videoBox')!
      //   dom.append(player.domElement)
      // } else setErr(true)
    } else setErr(true)
  }, [id])

  return (
    <div className={styles.A2details}>
      {/* 视频画布页面  */}
      {/* <div className={classNames('A2videoBox', info.id ? 'A2videoBoxHide' : '')}></div> */}

      {/* 详情页面 */}
      {info.id ? (
        <A1info info={info} closeFu={id => history.replace(`/?m=${id}`)} />
      ) : null}

      {/* 错误页面 */}
      {err ? (
        <div className='A2err'>
          <p>页面参数错误</p>
          <Button onClick={() => history.replace('/')}>去列表页</Button>
        </div>
      ) : null}
    </div>
  )
}

const MemoA2details = React.memo(A2details)

export default MemoA2details
