import {FC, useEffect, useMemo, useState} from "react";
import {Image, Text, View} from "@tarojs/components";
import Taro, {useRouter} from "@tarojs/taro";
import {ArticleRecord, brandApi} from "@/api";
import styles from "@/pages/preview/illness/article/article.module.scss";
import down from "@/static/img/doubleDown.png";
import {Profile} from "@/store";
import {parse} from "@/utils/marked/marked";


const article:FC = () => {
  const {token,} = Profile.useContainer()
  const {id} = useRouter().params as unknown as { id: number}
  const [articleInfo,setArticleInfo] = useState<ArticleRecord>()
  const { children } = useMemo(() => parse(articleInfo?.content || ''), [articleInfo])
  useEffect(() => {
    getData()
  }, [id])

  const getData = async () => {
    try {
      const data = await brandApi.articleInfo(id)
      Taro.setNavigationBarTitle({title:data.title})
      setArticleInfo(data)
    } catch (e) {
    }
  }
  function helloWorld() {
    return (
      <>
        <View style={{padding:'10px',height:!token ? Taro.getWindowInfo().windowHeight-60+'px' : 'auto',overflow:!token ? 'hidden':'auto'}}>
          { children }
        </View>
        {
          !token &&
          <View className={styles.fixedBox}>
            <View className={styles['fixedBox-inner']}>
              <View className={styles['fixedBox-inner-icon']}>
                <Image src={down}></Image>
              </View>
              <View className={styles['fixedBox-inner-box']} onClick={()=>{Taro.navigateTo({url: '/pages/login/login'})}}>
                <Text>登录查看更多内容</Text>
              </View>
            </View>
          </View>
        }
      </>
      )

  }
  return helloWorld()
}
export default article