import {useEffect, useState} from "react";
import {getCmsArticleByCode} from "@/api/cms/cmsArticle";
import {Avatar, Cell, Divider} from '@nutui/nutui-react-taro'
// 显示html富文本
import {View, RichText} from '@tarojs/components'
import {useConfig} from "@/hooks/useConfig";
import {useShopInfo} from "@/hooks/useShopInfo";
import Line from "@/components/Gap";
import {CmsArticle} from "@/api/cms/cmsArticle/model";


const Helper = () => {
  const [about, setAbout] = useState<CmsArticle>()
  const {config} = useConfig()
  const {shopInfo} = useShopInfo()

  const reload = async () => {
    const aboutInfo = await getCmsArticleByCode('about')
    setAbout(aboutInfo)
  }

  useEffect(() => {
    reload().then()
  }, []);

  return (
    <View className={'px-3'}>
      <Cell>
        <View className={'flex flex-col justify-center items-center w-full'}>
          <Avatar
            src={shopInfo?.logo}
            size={'100'}
          />
          <View className={'font-bold text-sm'}>
            {shopInfo?.appName}
          </View>
          <View className={'text-left py-3 text-gray-600'}>
            <RichText
              nodes={shopInfo?.description || '关于我们的简单描述'}/>
          </View>
        </View>
      </Cell>
      <Cell title={about?.title} description={(
        <>
          <Divider/>
          <View className={'text-left text-gray-500'}>
            <RichText
              nodes={about?.content}/>
          </View>
        </>
      )}>
      </Cell>
      <Cell className={'flex flex-col'}>
        <span>服务热线：{config?.tel}</span>
        <span>工作日：{config?.deliveryText}</span>
      </Cell>
      <Line height={44}/>
    </View>
  );
};

export default Helper;
