import React, { useState } from 'react'
import useRequest from '@ahooksjs/use-request/es'

import { PersonalService } from './Personal.service'
import ValidateLogin2p from 'components/ValidateLogin2p'
import styles from './css/AboutUs.module.scss'

/**关于我们 */
const AboutUs: React.FC = () => {
  const [playFlag, setPlayFlag] = useState(false)

  const { data } = useRequest(PersonalService.getAboutUs, {
    formatResult: response => response.data.Data
  })
  // 记录播放
  const { run: applyHistory, loading } = useRequest(PersonalService.postAboutUsHistory, {
    manual: true,
    onSuccess: res => {
      setPlayFlag(true)
    }
  })

  const handlePlay = () => {
    !loading && !playFlag && applyHistory()
  }

  return (
    <div className={`page-max-width `}>
      <ValidateLogin2p>
        <div className={styles['aboutus-page']}>
          <div className="com-fz18 com-fw-bold m-b-md">{data?.Title}</div>
          <div className={styles['aboutus-video-wrapper']} onClick={handlePlay}>
            {data ? (
              <video
                src={data?.Url}
                className={styles['aboutus-video-content']}
                controls={true}
                controlsList="nodownload"
                autoPlay={false}
                loop={false}
                preload="auto"
                webkit-playsinlin="true"
                x-webkit-airplay="allow"
                onContextMenu={e => {
                  e.preventDefault()
                  return false
                }}
              >
                <p> 当前浏览器不支持video标签 </p>
              </video>
            ) : null}
          </div>
        </div>
      </ValidateLogin2p>
    </div>
  )
}

export default AboutUs
