distribution-management/src/pages/MiniApp/CompConfig/components/hot_category.tsx

import { BetaSchemaForm, useToken } from "@ant-design/pro-components";
import styles from './index.less'
import Header from "./header";
import { useModel } from "@umijs/max";
import { Key, useEffect, useMemo, useState } from "react";
import { Config } from "@/models/appPageConifg";
import { useAjax } from "@/Hook/useAjax";
import useApi from "@/Hook/useApi";
import { Empty, Spin } from "antd";
import usePrevious from "@/Hook/usePrevious";
import { MyIcon } from "@/global";
// 热门书
export function HotCategory(props: {
    data: {
        appComponentId: number | string;
        componentType: string;
        showRightButton?: boolean;
        componentName?: string;
        remark?: string;
        configs?: any[];
    }
    tabs?: any
}) {
    const { token } = useToken()
    const [tag, setTag] = useState<any>(null)
    const prevTag = usePrevious(tag);
    let { initialState } = useModel("@@initialState")
    let { state } = useModel("appPageConifg")
    const { data: { configs, componentName, showRightButton }, tabs } = props
    const [bookData, setBookData] = useState([])
    let publicData = useMemo(() => {
        return {
            appId: initialState?.selectApp?.id || "",
            distributorId: initialState?.currentUser?.distributorId,
            appType: initialState?.selectApp?.appType || "",
            workDirection: tabs || state.tabs
        }
    }, [initialState?.selectApp, initialState?.currentUser?.distributorId, state.index, state.tabs, tabs])
    let apiobj = useApi(initialState?.selectApp?.appCategory || 1)
    let getList = useAjax((params) => apiobj.getBookPageList(params))
    useEffect(() => {
        if (tag && tag !== prevTag && configs && configs.length > 0 && configs?.[0]?.categoryId) {
            getList.run({ ...publicData, categoryId: tag, pageNum: 1, pageSize: 8 }).then(res => {
                if (res.code === 200) {
                    setBookData(res?.data?.records)
                }
            })
        }
    }, [tag, prevTag, configs, publicData])

    useEffect(() => {
        if (configs && configs?.length > 0) {
            if (!tag && configs?.[0]?.categoryId) {
                setTag(configs?.[0]?.categoryId)
            }
            let isExist = configs?.find(i => i.categoryId == tag)
            if (!isExist) {
                setTag(configs?.[0]?.categoryId)
            }
        }
        if (configs && configs.length === 0) {
            setTag(null)
            setBookData([])
        }
    }, [tag, configs])
    return <Spin spinning={getList?.loading}>
        <div className={`${styles.hot_category}`}>
            <Header title={componentName || "热门分类"} btnText={"全部分类"} showBtn={showRightButton} />
            <div className={styles.tags}>
                {
                    configs?.map((item, index) => {
                        return item?.categoryId && <div
                            className={`${styles.tag} ${tag === item.categoryId ? styles.tag_ac : ""}`}
                            key={item.categoryId || index}
                            onClick={() => {
                                setTag(item.categoryId || "")
                            }}
                        >
                            {item?.categoryInfo?.name}
                        </div>
                    })
                }
            </div>
            <div className={styles.list}>
                {
                    configs?.find(i => i.categoryId == tag)?.bookIds ? configs?.find(i => i.categoryId == tag)?.bookInfos?.map((item: any, index: any) => {
                        return <div key={item.id || index} className={styles.box}>
                            <div>
                                {item?.vipFree && <MyIcon type="icon-vipmianfei" style={{ fontSize: 35, position: 'absolute', zIndex: 1 }} />}
                                <img src={item?.picUrl} onError={(e: any) => {
                                    e.target.src = localStorage.getItem("nocover")
                                }} />
                            </div>
                            <span>{item?.bookName}</span>
                        </div>
                    }) : bookData?.length > 0 ? bookData?.map((item: any, index) => {
                        return <div key={item.bookId || index} className={styles.box}>
                            <div>
                                {(item?.vipFree) && <MyIcon type="icon-vipmianfei" style={{ fontSize: 35, position: 'absolute', zIndex: 1 }} />}
                                <img src={item?.longBookInfo?.picUrl || item?.shortBookInfoVO?.picUrl} onError={(e: any) => {
                                    e.target.src = localStorage.getItem("nocover")
                                }} />
                            </div>
                            <span>{item?.longBookInfo?.bookName || item?.shortBookInfoVO?.bookName}</span>
                        </div>
                    }) : <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置" /></div>
                }
            </div>
        </div>
    </Spin>
}