import {useEffect, useState} from "react";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
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'


const Helper = () => {
  const [list, setList] = useState<CmsArticle[]>([])
  const [nav, setNav] = useState<CmsNavigation>()
  const [category, setCategory] = useState<CmsNavigation[]>([])

  const reload = async () => {
    const navs = await listCmsNavigation({model: 'page', parentId: 0});
    if (navs.length > 0) {
      const nav = navs[0];
      setNav(nav);
      // 查询子栏目
      const category = await listCmsNavigation({parentId: nav.navigationId})
      setCategory(category)
    }

    listCmsArticle({model: 'page'}).then(res => {
      setList(res)
    }).catch(error => {
      console.error("Failed to fetch goods detail:", error);
    })
  }

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

  if (list.length == 0) {
    return (
      <div className={'text-center'}>
        <View className={'text-gray-500'}>
          暂无数据
        </View>
      </div>
    )
  }

  return (
    <div className={'px-3'}>
      <Cell>
        {nav && (
          <View className={'flex flex-col justify-center items-center w-full'}>
            <Avatar
              src={nav?.icon}
              size={'100'}
            />
            <View className={'font-bold text-sm'}>
              {nav?.comments}
            </View>
            <View className={'text-left py-3 text-gray-600'}>
              <RichText
                nodes={'时里院子市集是一家B2C模式的会员电商平台，以健康安全食品，中国国家地理标志产品，药食同源产品等为主线，愿景是守护5亿家庭餐桌健康;选品原则是健康，好吃，方便，实惠。通过严格的筛选供货商，从选品、采购发货、仓储物流产品检测、售前售后等各环节严格把控，提升用户满意度。平台采取透明公开化，以持续为用户提供物美价廉的好产品为准准则，为用户创造价值为唯一宗旨，倡导终身用户，终身服务的经营理念。'}/>
            </View>
          </View>
        )}
      </Cell>
      {category.map((item, index) => (
        <Cell
          title={(
            <div className={'font-bold'} id={`${index}`}>
              {item.categoryName}
            </div>
          )}
          description={(
            <>
              <Divider/>
              <View className={'item flex justify-between items-center my-2'}>
                <View>{item.categoryName}</View>
                <ArrowRight size={16} className={'text-gray-400'}/>
              </View>
              <View className={'item flex justify-between items-center my-2'}>
                <View>{item.categoryName}</View>
                <ArrowRight size={16} className={'text-gray-400'}/>
              </View>
            </>
          )}
        >
        </Cell>
      ))}
      <Cell className={'flex flex-col'}>
        <span>服务热线：0771-88888888</span>
        <span>工作日：9:00-18:00</span>
      </Cell>
    </div>
  );
};

export default Helper;