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

const article: FC = () => {
  const {token} = Profile.useContainer()
  const {id} = useRouter().params as unknown as { id: number }
  const [show, setShow] = useState(false)
  const [articleInfo, setArticleInfo] = useState<ArticleRecord>()
  const {children, headings} = useMemo(() => parse(articleInfo?.content || ''), [articleInfo])
  const query = Taro.createSelectorQuery()

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

  const getData = async () => {
    Taro.setNavigationBarTitle({title: '疾病文章详情'})
    try {
      const data = await brandApi.articleInfo(id)
      Taro.setNavigationBarTitle({title: data.title})
      setArticleInfo(data)
    } catch (e) {
    }
  }

  function mao(id: string) {
    console.log(id)
    setShow(false)
    Taro.nextTick(() => {
      query.select(`#${id}`).boundingClientRect()
      query.exec((res) => {
        if (res.length) {
          Taro.pageScrollTo({
              scrollTop: res[res.length - 1].top,
              duration: 300
            }
          )
        }
      })
    })
  }

  function helloWorld() {
    return (
      <>
        <View className={styles.botmBox} style={{display: show ? 'none' : 'flex'}} onClick={() => setShow(true)}>
          <View>文章导航</View>
        </View>
        <View style={{
          padding: '10px',
          height: !token ? Taro.getWindowInfo().windowHeight - 60 + 'px' : 'auto',
          overflow: !token ? 'hidden' : 'auto'
        }}>
          <View>
            <View className={styles.articleTitle}>{articleInfo?.title}</View>
            {
              articleInfo?.brands.map(d => <View className={styles.article}>
                <Img src={d.logo} width={80} height={80} className={styles.articleImag} errorType="avatar"/>
                <View className='ml-2'>
                  <View>{d?.name}</View>
                  <View className='flex mt-1 text-muted font-24'>
                    <View className='mr-2'>{beforeTime(articleInfo?.created_at)} . </View>
                    <View>阅读 {articleInfo.page_view || 1}</View>
                  </View>
                </View>
              </View>)
            }
          </View>
          <View></View>
          {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>
        }

        <PageContainer onClickOverlay={() => {
          setShow(false)
        }} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0.3)'}>
          <View className="px-3 py-5">
            {headings.length > 0 &&
              headings.map((d) =>
                <View className="pb-3" style={{fontSize: '28rpx', fontWeight: '500', color: '#323635'}} onClick={() => {
                  mao(d.id)
                }}>{d.text}</View>
              )
            }
          </View>
        </PageContainer>
      </>
    )
  }
  return helloWorld()
}
export default article
