import {useEffect, useState} from "react";
import {Video} from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import {useRouter} from '@tarojs/taro'
import {getCmsArticle} from "@/api/cms/cmsArticle";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import {View} from '@tarojs/components'
import {Config} from "@/api/cms/cmsWebsiteField/model";
import {configWebsiteField} from "@/api/cms/cmsWebsiteField";
import Questions from "@/components/Questions";

/**
 * 文章终极列表
 * @constructor
 */
const VideoForm = () => {
  const {params} = useRouter();
  const [config, setConfig] = useState<Config>()
  const [item, setItem] = useState<CmsArticle>()
  const [source, setSource] = useState({
    src: '',
    type: 'video/mp4',
  })
  const options = {
    autoplay: true,
    muted: true,
    controls: true,
  }
  const play = (elm: any) => console.log('play', elm)
  const pause = (elm: any) => console.log('pause', elm)
  const playend = () => {
    Taro.navigateTo({
      url: '/hjm/exam/exam',
    })
  }

  const reload = () => {
    configWebsiteField().then(data => {
      setConfig(data)
    })
    getCmsArticle(Number(params.id)).then(data => {
      setItem(data)
      Taro.setNavigationBarTitle({
        title: `${data.title}`
      })
      console.log(item)
      setSource({
        src: `${data.pdfUrl || 'https://oss.wsdns.cn/20250605/9e88d2100425471288d4115cc48660ed.mp4'}`,
        type: 'video/mp4',
      })
    })
  }

  useEffect(() => {
    reload()
  }, [])


  if (config?.onWxCheck === '1') {
    console.log(config?.onWxCheck, 'config?.onWxCheckconfig?.onWxCheckconfig?.onWxCheck')
    return (
      <View className={'mt-3'}>
        <Questions/>
      </View>
    )
  }

  if (config?.onWxCheck === '0')
    return (
      <div className={'px-3 mt-4 mb-10'}>
        <div className={'flex flex-col justify-between items-center bg-white rounded-lg p-2'}>
          <Video
            source={source}
            options={options}
            onPlay={play}
            onPause={pause}
            onPlayEnd={playend}
            style={{height: '163px'}}
          />
        </div>
        <View className={'content text-gray-700 text-sm py-4 text-center'}>
          观看完视频后开始考试！
        </View>
      </div>
    )

}
export default VideoForm
