import {useEffect, useState} from "react";
import Taro from '@tarojs/taro';
import {listCmsArticle} from "@/api/cms/cmsArticle";
import {Avatar, Cell, Divider} from '@nutui/nutui-react-taro'
import {ArrowRight} from '@nutui/icons-react-taro'
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
import {listCmsNavigation} from "@/api/cms/cmsNavigation";
// 显示html富文本
import {View, RichText} from '@tarojs/components'
import {listCmsDesign} from "@/api/cms/cmsDesign";
import {CmsDesign} from "@/api/cms/cmsDesign/model";
import { useConfig } from "@/hooks/useConfig"; // 使用新的自定义Hook


const Helper = () => {
  const [nav, setNav] = useState<CmsNavigation>()
  const [design, setDesign] = useState<CmsDesign>()
  const [category, setCategory] = useState<CmsNavigation[]>([])
  const { config } = useConfig(); // 使用新的Hook

  const reload = async () => {
    const navs = await listCmsNavigation({model: 'page', parentId: 0});
    if (navs.length > 0) {
      const nav = navs[0];
      setNav(nav);
      // 查询页面信息
      const design = await listCmsDesign({categoryId: nav.navigationId})
      setDesign(design[0])
      // 查询子栏目
      const category = await listCmsNavigation({parentId: nav.navigationId})
      category.map(async (item, index) => {
        category[index].articles  = await listCmsArticle({categoryId: item.navigationId});
      })
      setCategory(category)
      // 注意：config 现在通过 useConfig Hook 获取，不再在这里调用 configWebsiteField
    }
  }

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

  return (
    <div className={'px-3'}>
      <Cell>
        {nav && (
          <View className={'flex flex-col justify-center items-center w-full'}>
            <Avatar
              src={design?.photo}
              size={'100'}
            />
            <View className={'font-bold text-sm'}>
              {design?.comments}
            </View>
            <View className={'text-left py-3 text-gray-600'}>
              <RichText
                nodes={design?.content || '关于我们的简单描述'}/>
            </View>
          </View>
        )}
      </Cell>
      {category.map((item, index) => (
        <Cell
          title={(
            <div className={'font-bold'} id={`${index}`}>
              {item.categoryName}
            </div>
          )}
          description={(
            <>
              <Divider/>
              {item.articles?.map((child, _) => (
                <View className={'item flex justify-between items-center my-2'}>
                  <View
                    onClick={() => Taro.navigateTo({url: `/cms/detail/index?id=${child.articleId}`})}>{child.title}</View>
                  <ArrowRight size={16} className={'text-gray-400'}/>
                </View>
              ))}
            </>
          )}
        >
        </Cell>
      ))}
      <Cell className={'flex flex-col'}>
        <span>服务热线：{config?.tel}</span>
        <span>工作日：{config?.workDay}</span>
      </Cell>
    </div>
  );
};

export default Helper;