import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer";
import { PageLayout } from "@/layouts/PageLayout";
import { getNews, getNewsDetail } from "@/service/api";
import dayjs from "dayjs";
import { useCallback, useEffect, useState } from "react";
import { useParams } from "react-router";
import { useNavigate } from "react-router-dom";
import { map } from "rxjs";

interface NewsDetailsType extends IProps{}
export const NewsDetails = (props:NewsDetailsType)=>{
    const params = useParams()
    const [data,setData] = useState<any>()
    const [latestNews,setLatestNews] = useState<any>()
    const navigate =useNavigate()
    useEffect(() => {
        if(params['id']){
            getNewsDetail(params['id']).subscribe(v=>{
                setData(v)
            })
        }
    },[params])
    useEffect(()=>{
        getNews().pipe(map(v=> v.data.list)).subscribe(v=>{
            const d = v.sort((a:any,b:any)=>{
                return b.time_stamp - a.time_stamp
            })
            const output = d.filter((i:any,index:number)=>{
                return index<5
            })
            setLatestNews(output)
        })
    },[])
    const getDate = (time: number) => {
        const d = dayjs.unix(Math.floor(time/1000) )
        return {
          year: d.year().toString(),
          day: d.date(),
          month: d.month()+1>10?d.month()+1:"0"+(d.month()+1)
        };
      };
    
    
      const useDate = useCallback((time: number)=>getDate(time),[params])
    
    return(
        <PageLayout className=" overflow-y-scroll">
            <AppContianer>
                <div className="flex normal-text ">
                    <div className="w-2/12">
                        <div className='flex-col pr-5 pt-12 text-center '>
                                <div className='py-5'>
                                    <div>- 来源 -</div>
                                    <div className='content-sub-title-cn'>杭州复杂美科技</div>
                                </div>
                                <div className='py-5'>
                                    <div>- 日期 -</div>
                                    <div className=' hero-title'>{useDate(data&&data.time_stamp).day}</div>
                                    <div className='content-sub-title-cn'>{useDate(data&&data.time_stamp).year}/{useDate(data&&data.time_stamp).month}</div>
                                </div>
                                <div className='py-5'>
                                <div>- 作者 -</div>
                                    <div className='content-sub-title-cn'>{data&&data.publisher}</div>
                                </div>
                        </div>
                    </div>
                    <div className="w-8/12">
                        <div className='richRender pt-5 px-20 pb-24'>
                            <div className='title-1-cn'>{data&&data.title}</div>
                            <div dangerouslySetInnerHTML={{__html:data&&data.content}} className="py-5"></div>
                        </div>
                    </div>
                    <div className='w-2/12 '>
                        <div className='flex-col  pt-12'>
                            <div className='content-sub-title-cn'>最新消息</div>
                            <div>
                                {
                                  latestNews&&latestNews.map((k:any,index:number)=>(
                                    <div key={index} onClick={()=>navigate(`/news/${k.id}`)} className="py-1 normal-text cursor-pointer hover:text-theme-blue">{k.title}</div>
                                  ))  
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </AppContianer>
        </PageLayout>
    )
    
}