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

export default withLayout((props) => {
  const { trackData } = props
  const { id } = props.router.params;

  const [data, setData] = useState(null);
  const [IsPull, setPull] = useState(false);
  const [PullTimer, setPullTimer] = useState(null);


  const [isSave, handleFavor] = useFavor(data?.isSave, {
    id,
    buildingId: data?.buildingId,
    ...trackData,
  });

  const PageRefresh = () => {
    // 页面下拉刷新回调
    setPull(true);
  };

  useEffect(() => {
    // 下拉刷新触发
    if (IsPull) {
      clearTimeout(PullTimer);
      setPullTimer(
        setTimeout(() => {
          setPull(false);
        }, 2000)
      );
    }
  }, [IsPull]);

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

      setData(res);
      Taro.hideLoading();
    });
  };

  const shareTimeline = () => {
    Taro.showToast({
      title: '请点击右上角分享到朋友圈',
      icon: 'none',
      duration: 3000,
    })
  }

  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
              scroll-y
              refresher-enabled
              refresher-triggered={IsPull}
              onrefresherrefresh={PageRefresh}
              refresher-background='#fff'
            >
              <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>
                    <text className='Share'>分享好友</text>
                  </view>
                </view>

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