import {useEffect, useState} from "react";
import {ArrowRight} from '@nutui/icons-react-taro'
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import Taro from '@tarojs/taro'
import {useRouter} from '@tarojs/taro'
import {BaseUrl} from "@/utils/config";
import {TEMPLATE_ID} from "@/utils/server";

/**
 * 帮助中心
 * @constructor
 */
const Help = () => {
  const {params} = useRouter();
  const [categoryId, setCategoryId] = useState<number>(3494)
  const [list, setList] = useState<CmsArticle[]>([])

  const reload = () => {
    if (params.id) {
      setCategoryId(Number(params.id))
    }
    Taro.request({
      url: BaseUrl + '/cms/cms-article/page',
      method: 'GET',
      data: {
        categoryId
      },
      header: {
        'content-type': 'application/json',
        TenantId: TEMPLATE_ID
      },
      success: function (res) {
        const data = res.data.data;
        if (data?.list) {
          setList(data?.list)
        }
      }
    })
  }

  useEffect(() => {
    reload()
  }, [])

  return (
    <div className={'px-3 mb-10'}>
      <div className={'flex flex-col justify-between items-center bg-white rounded-lg p-4'}>
        <div className={'title-bar flex justify-between items-center w-full mb-2'}>
          <div className={'font-bold text-lg flex text-gray-800 justify-center items-center'}>帮助中心</div>
          <a className={'text-gray-400 text-sm'} onClick={() => Taro.navigateTo({url: `/cms/article?id=${categoryId}`})}>查看全部</a>
        </div>
        <div className={'bg-white min-h-36 w-full'}>
          {
            list.map((item, index) => {
              return (
                <div key={index} className={'flex justify-between items-center py-2'} onClick={() => Taro.navigateTo({url: `/cms/help?id=${item.articleId}`}) }>
                  <div className={'text-sm'}>{item.title}</div>
                  <ArrowRight color={'#cccccc'} size={18} />
                </div>
              )
            })
          }
        </div>
      </div>
    </div>
  )
}
export default Help