import React, { useState, useEffect } from "react";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import { Button, Card, Table, Row, message, Space, Typography, Divider, Switch, Upload } from "antd";
import usePagination from "@/hooks/usePagination";
import { evaDataDetailApi } from "../api";
import { UploadOutlined } from "@ant-design/icons";
import type { UploadProps } from "antd";
import useInitail from "@/hooks/useInitail";
import { createStore } from "@/hooks/moz";
import { common } from "@/typing/common";
import store from "./store";
import { isArray } from "lodash";
import moment from "moment";
import { ReasonsEnum } from "../entity";
import { history } from "umi";
import st from "./style.less";

const Column = Table.Column;
export const { Provider, useStore } = createStore(store);

interface Props extends common.ConnectProps {}

function Index(props: Props) {
  const { setId, configId } = useStore();
  const [delay, setDelay] = useState(true);
  const [newData, setNewData] = useState<any>([]);
  const { match } = props;
  const { id, num } = match.params;
  useEffect(() => {
    setId(id);
  }, [id]);
  useEffect(() => {
    if (configId) {
      setParams({ id: configId }, true);
      setDelay(false);
    }
  }, [configId]);
  console.log('num', num);
  const { data, errMsg, setParams, loading } = useInitail(evaDataDetailApi, {}, {}, delay);
  console.log(isArray(data));
  useEffect(() => {
    if (isArray(data)) {
      setNewData(data);
    }
  }, [data]);

  return (
    <PageHeaderWrapper title="考评数据导入">
      <Card>
        <Table loading={loading} rowKey={(row) => `id${id}`} dataSource={newData} pagination={{ total: num }}>
          <Column title="归属人员" dataIndex="userName" align="center" render={(name) => <span>{name || "--"}</span>} />
          <Column title="归属门店" dataIndex="shopName" align="center" render={(name) => <span>{name || "--"}</span>} />
          <Column
            title="指标名称"
            dataIndex="indicatorName"
            align="center"
            render={(name) => <span>{name || "--"}</span>}
          />
          <Column
            title="指标值"
            dataIndex="indicatorValue"
            align="center"
            render={(num, record: any) => (
              <span>
                {num !== undefined
                  ? `${num}${
                      record.dataType == 1 ? "台" : record.dataType == 2 ? "%" : record.dataType == 3 ? "元" : ""
                    }`
                  : "--"}
              </span>
            )}
          />
          <Column
            title="考核周期"
            dataIndex="dataDate"
            align="center"
            render={(time: number) => (time ? moment(time).format("YYYY-MM-DD") : "--")}
          />
          {/* <Column title="更新日期" dataIndex="dataDate" align="center" render={(time: number) => ""} /> */}
          <Column
            title="是否导入"
            dataIndex="errorType"
            align="center"
            render={(_: any, record: any) =>
              record.errorType ? <div className={st.no}>未导入</div> : <div className={st.yes}>已导入</div>
            }
          />
          <Column
            title="未导入原因"
            dataIndex="errorType"
            align="center"
            render={(_: any, record: any) => (record.errorType ? ReasonsEnum[record.errorType] : "--")}
          />
        </Table>
        <Row justify="center">
          <Button type="default" size="large" onClick={() => history.goBack()} style={{ marginRight: 50, width: 200 }}>
            返回
          </Button>
        </Row>
      </Card>
    </PageHeaderWrapper>
  );
}
export default (props: Props) => (
  <Provider>
    <Index {...props} />
  </Provider>
);