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 } from "antd";
// 热门书
export function HotCategory(props: {
    data: {
        appComponentId: number | string;
        componentType: string;
        showRightButton?: boolean;
        componentName?: string;
        remark?: string;
        configs?: any[];
    }
}) {
    const { token } = useToken()
    const [tag, setTag] = useState<any>(null)
    let { initialState } = useModel("@@initialState")
    let { state } = useModel("appPageConifg")
    const { data: { configs, componentName, showRightButton } } = props
    const [bookData, setBookData] = useState([])
    let publicData = useMemo(() => {
        return {
            appId: initialState?.selectApp?.id || "",
            distributorId: initialState?.currentUser?.distributorId,
            appType: initialState?.selectApp?.appType || "",
            workDirection: state.tabs
        }
    }, [initialState?.selectApp, initialState?.currentUser?.distributorId, state.index])
    let apiobj = useApi(initialState?.selectApp?.appCategory || 1)
    let getList = useAjax((params) => apiobj.getBookPageList(params))
    useEffect(() => {
        if (!tag) {
            setTag(configs?.[0]?.categoryId)
        }
        if (tag) {
            getList.run({ ...publicData, categoryId: tag, pageNum: 1, pageSize: 8 }).then(res => {
                if (res.code === 200) {
                    setBookData(res?.data?.records)
                }
            })
        }
        if (configs) {
            let isExist = configs?.find(i => i.categoryId == tag)
            if (!isExist) {
                setTag(configs?.[0]?.categoryId)
                getList.run({ ...publicData, categoryId: configs?.[0]?.categoryId, pageNum: 1, pageSize: 8 }).then(res => {
                    if (res.code === 200) {
                        setBookData(res?.data?.records)
                    }
                })
            }
            if (configs.length === 0) {
                setTag(null)
                setBookData([])
            }
        }
    }, [tag, configs, publicData])
    return <div className={`${styles.hot_category}`}>
        <Header title={componentName || "热门分类"} btnText={"全部分类"} showBtn={showRightButton} />
        <div className={styles.tags}>
            {
                configs?.map(item => {
                    return <div
                        className={`${styles.tag} ${tag === item.categoryId ? styles.tag_ac : ""}`}
                        key={item.categoryId}
                        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) => {
                    return <div key={item.id} className={styles.box}>
                        <img src={item?.picUrl} onError={(e: any) => {
                            e.target.src = localStorage.getItem("nocover")
                        }} />
                        <span>{item?.bookName}</span>
                    </div>
                }) : bookData?.length > 0 ? bookData?.map((item: any) => {
                    return <div key={item} className={styles.box}>
                        <img src={item?.longBookInfo?.picUrl || item?.shortBookInfoVO?.picUrl} onError={(e: any) => {
                            e.target.src = localStorage.getItem("nocover")
                        }} />
                        <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>
}