import Taro from '@tarojs/taro'
import {useEffect, useState} from 'react'
import {useRouter} from '@tarojs/taro'
import {Loading} from '@nutui/nutui-react-taro'
import {View, RichText} from '@tarojs/components'
import {wxParse} from "@/utils/common";
import {getCmsArticle} from "@/api/cms/cmsArticle";
import {CmsArticle} from "@/api/cms/cmsArticle/model"
import Line from "@/components/Gap";
import './index.scss'

function Detail() {
  const {params} = useRouter();
  const [loading, setLoading] = useState<boolean>(true)
  // 文章详情
  const [item, setItem] = useState<CmsArticle>()
  const reload = async () => {
    const item = await getCmsArticle(Number(params.id))

    if (item && item.content) {
      item.content = wxParse(item.content)
      setItem(item)
      Taro.setNavigationBarTitle({
        title: `${item?.categoryName}`
      })
    }
  }

  useEffect(() => {
    reload().then(() => {
      setLoading(false)
    });
  }, []);

  if (loading) {
    return (
      <Loading className={'px-2'}>加载中</Loading>
    )
  }

  return (
    <div className={'bg-white'}>
      <div className={'p-4 font-bold text-lg'}>{item?.title}</div>
      <div className={'text-gray-400 text-sm px-4 '}>{item?.createTime}</div>
      <View className={'content p-4'}>
        {/*如果有视频就显示视频 视频沾满宽度*/}
        {item?.video && <View className={'w-full'}>
          <video src={item?.video} controls={true} width={'100%'}></video>
        </View>}
        <RichText nodes={item?.content}/>
      </View>
      <Line height={44}/>
    </div>
  )
}

export default Detail