import {useEffect, useState} from "react";
import {Image} from '@nutui/nutui-react-taro';
import Taro from '@tarojs/taro';
import {pageCmsArticle} from "@/api/cms/cmsArticle";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import {checkMonthTaskCompleted} from "@/api/hjm/hjmExamLog";
import Questions from '@/components/Questions';
import {getWebsiteField} from "@/api/system/website/field";

/**
 * 文章终极列表
 * @constructor
 */
const Study = () => {
  const [isAdmin, setIsAdmin] = useState<boolean>(false)
  const [loading, setLoading] = useState<boolean>(false)
  const [list, setList] = useState<CmsArticle[]>()
  const [monthTaskCompleted, setMonthTaskCompleted] = useState<boolean>(false)

  const reload = async () => {
    setLoading(true)
    const field = await getWebsiteField(15524);
    if (field.value == '0') {
      setIsAdmin(true)
    }else {
      setIsAdmin(false)
    }
    const article = await pageCmsArticle({categoryId: 4289, status: 0})
    if(article){
      setList(article?.list)
    }
    const promise = await checkMonthTaskCompleted();
    if(promise){
      setMonthTaskCompleted(true)
    }
  }

  useEffect(() => {
    reload().then(() => {
      console.log('初始化完成')
    })
  }, [])

  return (
    <>
      {isAdmin && (
        <div className={'px-3 mt-4 mb-10'}>
          {/* 已完成任务 */}
          {monthTaskCompleted && !loading && (
            <div style={{backgroundColor: 'white', borderRadius: '8px', padding: '24px', textAlign: 'center'}}>
              <h1 style={{fontSize: '20px', fontWeight: 'bold', marginBottom: '16px', color: '#52c41a'}}>🎉
                本月学习任务已完成！</h1>
              <div style={{marginBottom: '16px', color: '#666'}}>
                您已经完成了本月的学习任务，无需再进行考试。
              </div>
            </div>
          )}
          {
            !monthTaskCompleted && list?.map((item, index) => {
              return (
                <div key={index} className={'flex flex-col justify-between items-center bg-white rounded-lg p-2'}
                     onClick={() => Taro.navigateTo({url: `/hjm/practice/practice?id=${item.articleId}`})}>
                  <Image src={item.image} height={200}/>
                </div>
              )
            })
          }
        </div>
      )}
      {!isAdmin && <Questions/>}
    </>
  )
}
export default Study
