import {useEffect, useState} from 'react'
import {useRouter} from '@tarojs/taro'
import {CmsArticle} from "@/api/cms/cmsArticle/model"
import {Eye} from '@nutui/icons-react-taro'
// 显示html富文本
import {View, RichText} from '@tarojs/components'
import './pdf.scss'
import {wxParse} from "@/utils/common";
import {getCmsArticle} from "@/api/cms/cmsArticle";

function Item() {
  const {params} = useRouter();
  // 文章详情
  const [item, setItem] = useState<CmsArticle>()
  // 浏览量
  const [views, setViews] = useState<number>()

  const reload = () => {
    getCmsArticle(Number(params.id)).then(data => {
      if(data){
        data.content = wxParse(data.content)
        setItem(data)
        setViews(data.actualViews)
      }
    })
  }

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

  return (
    <div className={'bg-white nr-bg'}>
      <div className={'p-3 font-bold text-lg'}>{item?.title}</div>
      <div className={'flex justify-between px-3'}>
        <div className={'flex items-center gap-2 text-sm text-gray-400'}><Eye size={14}/>{views}</div>
      </div>
      <View className={'content text-gray-700 text-sm'}>
        <RichText nodes={item?.content}/>
      </View>
    </div>
  )
}

export default Item
