import React, { useState } from "react";

import { ConfigProvider } from "antd";
import zhCN from "antd/lib/locale-provider/zh_CN";

import VerifyScrapList from "../verifyScrapList";
import VerifyScrapBill from "../verifyScrapBill";

import styles from "./index.less";

const useIndexPadEvent = props => {
  const [state, setState] = useState({ showType: "list" });

  // 获取token
  const { pathname } = location;
  const pathnameList = pathname.split("/");
  const token = pathnameList[5];

  // 新增表单
  const handleAddBill = () => {
    setState({
      showType: "bill",
      billType: "add"
    });
  };

  // 查看表单
  const handleViewBill = record => {
    setState({
      showType: "bill",
      billType: "view",
      copyTo: { masterData: record }
    });
  };

  // 返回列表
  const handleBackList = () => {
    setState({
      showType: "list"
    });
  };

  return {
    ...props,
    ...state,
    app: { ...props.app, token },
    onAddBill: handleAddBill,
    onBackList: handleBackList,
    onViewBill: handleViewBill
  };
};

const IndexPad = baseProps => {
  const props = useIndexPadEvent(baseProps);
  const { showType } = props;

  return (
    <ConfigProvider locale={zhCN} styles={{ width: "100%", height: "100%" }}>
      <div className={`mesContent ${styles.indexPad}`}>
        {showType === "list" ? (
          <VerifyScrapList {...props} />
        ) : (
          <VerifyScrapBill {...props} />
        )}
      </div>
    </ConfigProvider>
  );
};

export default IndexPad;