import React, { useEffect } from "react";
// import { Input, Button } from 'antd'
import { useAppData, useData, useActions, useCommit } from "@ttk/app-loader";
import { Card, Skeleton } from "antd";
import "./style.less";
import "../index.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 actions = useActions(props);
  const { loading } = useData([props, "showState"]).toJS();
  useEffect(() => {
    setTimeout(() => {
      commit([props, "showState"], false);
    }, 1000);
  }, []);
  return (
    <Card className="home-card" bordered={false}>
      <Skeleton loading={loading}>
        <div className="home-card-title">
          <span>初始化</span>
        </div>
        <ul>
          <li>
            <i></i>
            <div>
              <div className="list-title">1.先初始化数据</div>
              <p className="list-link">
                <a href="/#" style={{ color: "#1eb5ad" }}>
                  财务数据初始
                </a>
              </p>
            </div>
          </li>
          <li>
            <i style={{ background: "#FF6E5B" }}></i>
            <div>
              <div className="list-title">2.采集发票，开始做业务</div>
              <p className="list-link">
                <a href="/#" style={{ color: "#FF6E5B" }}>
                  采集销项发票
                </a>
                、
                <a href="/#" style={{ color: "#FF6E5B" }}>
                  采集进项发票
                </a>
                ,批量生成财务凭证
              </p>
            </div>
          </li>
          <li>
            <i style={{ background: "#FDD631" }}></i>
            <div>
              <div className="list-title">
                3.导入银行对账，开始做银行收支明细
              </div>
              <p className="list-link">
                <a href="/#" style={{ color: "#FDD631" }}>
                  采集进项发票
                </a>
                ，自动维护收支类型，批量生成收支明细账
              </p>
            </div>
          </li>
          <li>
            <i style={{ background: "#1EC6F3" }}></i>
            <div>
              <div className="list-title">4.申报</div>
              <p className="list-link">
                采集完发票，可以
                <a href="/#" style={{ color: "#1EC6F3" }}>
                  申报增值税
                </a>
                ;做完凭证，可以
                <a href="/#" style={{ color: "#1EC6F3" }}>
                  申报财务报表
                </a>
              </p>
            </div>
          </li>
        </ul>
      </Skeleton>
    </Card>
  );
}
