import React from 'react';
import Taro from '@tarojs/taro';
import { View, Image, RichText } from '@tarojs/components';
import Page from '@/layouts/index';
import { getTaNoticeById } from '@/services/tanotice';
import { getDtStr } from '@/utils/date';
import style from './style.module.less';

export default (props) => {

  const [loading, setLoading] = React.useState(false);
  const [detail, setDetail] = React.useState();
  const dateStr = React.useMemo(() => detail?.createDate ? getDtStr(detail.createDate) : '-', [detail]);

  const router = Taro.useRouter();
  const { id } = router.params;

  const onPreview = () => {
    if (!detail?.thumb) return;

    Taro.previewMedia({
      sources: [
        {
          url: detail.thumb,
        },        
      ],
      current: 0,
    })
  }

  React.useEffect(() => {
    if (id) {
      setLoading(true);
      getTaNoticeById(id).then((res) => {
        setDetail(res);
        Taro.setNavigationBarTitle({
          title: res.title,
        })
        setLoading(false);
      }).catch(er => {
        console.error(er);
        setLoading(false);
      });
    }
  }, [id]);

  
  return (
    <Page loading={loading}>
      <View className={style['notice-wrapper']} style={style}>
        <View className={style['notice-hd']}>
          {detail?.title}
          <View className={style['notice-hd2']}>{dateStr}</View>
        </View>
        <View className={style['notice-bd']}>
          <Image src={detail?.thumb} onClick={onPreview}></Image>
          <RichText nodes={detail?.content} />
        </View>
        <View className={style['notice-ft']}>

        </View>
      </View>
    </Page>
  )
}