import React, { useEffect } from "react";
import { Skeleton } from "antd";
import {
  AppLoader,
  useAppData,
  useData,
  useActions,
  useCommit,
} from "@ttk/app-loader";
import "./style.less";
export default React.memo(Page);
function Page(props) {
  // 在当前app获取其它app的state
  // const appData = useAppData('app-root')
  // const dateRange = useAppData('app-root/dateRange')

  // 获取当前app的state
  // useData([props, '...', '...'])
  const commit = useCommit();
  const cardShow = useData([props, "cardShow"]).toJS();
  const actions = useActions(props);
  const { loading } = useData([props, "showState"]).toJS();

  useEffect(() => {
    setTimeout(() => {
      commit([props, "showState"], false);
    }, 1000);
    async function fetchData() {
      await actions.getSelectData();
    }
    fetchData();
  }, []);
  return (
    <div className="home">
      <div className="home-title">
        <Skeleton loading={loading}>
          <span>活动</span>
          <a href="/#">
            一起抗疫共克时艰，金财互联“方舟云盟”计划，免费送金财管家“云会计”
          </a>
          <a href="/#">查看详情</a>
        </Skeleton>
      </div>
      <div className="home-init-style">
        {cardShow.map((item) => {
          if (item.display === "block")
            return (
              <AppLoader
                {...props}
                appName={item.cardName}
                name={item.cardName}
                key={item.cardName}
              />
            );
        })}
      </div>
    </div>
  );
}
