import { useState, useEffect } from "react";
import Taro from "@tarojs/taro";
import withLayout from "@/layout";
import { ScrollView, Image, RichText, WebView } from "@tarojs/components";
import useParams from '@/utils/hooks/useParams'
import useFavor from "@/utils/hooks/useFavor";
import { queryNewsDetail } from "@/services/news";
import { formatDate } from "@/utils/chatDate";
import useShare from "@/utils/hooks/useShare";
import "@/assets/css/iconfont.css";
import "./index.scss";

export default withLayout((props) => {
  const { router, shareContent, person, trackData, page, showShareTimeline, setNavigationBarTitle } = props
  const { id } = props.router.params;

  const paramsRef = useParams({person, from: `${page.type}_share`})
  const [data, setData] = useState(null);


  const [isSave, handleFavor] = useFavor(data?.isSave, {
    id,
    buildingId: data?.buildingId,
    ...trackData,
  });
  
  const fullTrackData = { ...trackData, buildingId: data?.buildingId };
  
  useShare(
    {
      title: shareContent.shareContentTitle || data?.newsName,
      path: `${router.path}?${paramsRef.current}`,
      image: shareContent.shareContentImg,
    },
    fullTrackData
  );

  const getData = (params) => {
    Taro.showLoading();
    queryNewsDetail(params).then((res) => {

      setData(res);
      setNavigationBarTitle(res?.newsName);
      Taro.hideLoading();
    });
  };

  useEffect(() => {
    if (id) {
      getData(id);
    }
  }, [id]);

  return (
    <view className='Page newsDetail flex-v'>
      {data && (data.newsDetailType === '0' ? <WebView src={data.newsDetail} /> : <>
        <view className='flex-item'>
          <view>
            <ScrollView scrollY>
              <view className='PageContent'>
                <view className='Info'>
                  <view>
                    <text className='Title'>{data.newsName}</text>
                    <view>
                      <text>阅读：{data.pvNum || 0}</text>
                      {/* <text>点赞{data.favorNum || 0}</text> */}
                      <text>收藏{data.saveNum || 0}</text>
                    </view>
                    <text className='Time'>
                      {`时间：${formatDate(data.createDate, 'yyyy-M-d')} `}
                    </text>
                    <button open-type='share' className='Share'>分享好友</button>
                  </view>
                </view>

                <view className='Content'>
                  <RichText nodes={data.newsDetail}></RichText>
                </view>
              </view>
            </ScrollView>
          </view>
        </view>
        <view className='Bottom'>
          <view onClick={() => showShareTimeline(true)}>
            <text className='iconfont icon-pengyouquan1'></text>
            <text>分享朋友圈</text>
          </view>
          <view>
            <text className='iconfont icon-shoucang' style={isSave ? { color: 'red' } : undefined} onClick={handleFavor}></text>
            <text onClick={handleFavor}>{isSave ? '已收藏' : '收藏'}</text>
          </view>
        </view>
      </>)}
    </view>
  );
});
