import {useEffect, useState} from 'react'
import {Tag} from '@nutui/nutui-react-taro'
import {useRouter, useShareAppMessage, useShareTimeline} 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 './item.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)
      }
    })
  }

  useShareTimeline(() => {
    return {
      title: item?.title,
      path: `/bszx/item?id=${item?.articleId}`
    };
  });

  useShareAppMessage(() => {
    return {
      title: item?.title,
      path: `/bszx/item?id=${item?.articleId}`,
      success: function (res) {
        console.log('分享成功', res);
      },
      fail: function (res) {
        console.log('分享失败', res);
      }
    };
  });

  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'}>
        <Tag type={'success'}>{item?.categoryName}</Tag>
        <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