import React, { useState } 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 useInitial from "@/hooks/useInitail";
import { evaDataListApi, upLoadStaffApi, upLoadShopApi } from "./api";
import { UploadOutlined } from "@ant-design/icons";
import type { UploadProps } from "antd";
import { history } from "umi";
import moment from "moment";
import Filter from './components/Filter';
import FileDatailsModal from './components/FileDatailsModal';

const Column = Table.Column;

export default () => {
  const { loading, list, paginationConfig, setParams, innerParams } = usePagination(evaDataListApi, {
    pageSize: 10,
  });
  const { data: upLoadStaff, loading: upLoadStaffLoading } = useInitial(upLoadStaffApi, [], {});
  const { data: upLoadShop, loading: upLoadShopLoading } = useInitial(upLoadShopApi, [], {});
  const [fileData, setFileData] = useState({});
  const [visible, setVisible] = useState<boolean>(false);
  console.log("upLoadStaff", upLoadStaff);
  console.log("upLoadShop", upLoadShop);
  const uploadPerson: UploadProps = {
    name: "file",
    action: "/api/morax/erp/eval-indicator/analysis-staff",
    maxCount: 1,
    showUploadList: false,
    onChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        setFileData(info.file.response.data);
        setVisible(true);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };
  const uploadShop: UploadProps = {
    name: "file",
    action: "/api/morax/erp/eval-indicator/analysis-shop",
    maxCount: 1,
    showUploadList: false,
    onChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        setFileData(info.file.response.data);
        setVisible(true);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

  return (
    <PageHeaderWrapper title="考评数据导入">
      <Card>
        <Row style={{ marginBottom: 10 }} justify="space-between">
          <Filter setParams={setParams} />
          <div>
            <Button type="default" style={{ marginRight: 10 }} loading={upLoadStaffLoading}>
              <a href={upLoadStaff} target="_blank" rel="noreferrer">
                下载人员模板
              </a>
            </Button>
            <Button type="default" style={{ marginRight: 10 }} loading={upLoadShopLoading}>
              <a href={upLoadShop} target="_blank" rel="noreferrer">
                下载门店模板
              </a>
            </Button>
            <Upload {...uploadPerson}>
              <Button type="primary" style={{ marginRight: 10 }}>
                按人员导入
              </Button>
            </Upload>
            <Upload {...uploadShop}>
              <Button type="primary">按门店导入</Button>
            </Upload>
          </div>
        </Row>
        <Table loading={loading} rowKey={(row) => `id${row.id}`} dataSource={list} pagination={paginationConfig}>
          <Column
            title="导入时间"
            dataIndex="createTime"
            align="center"
            render={(time: number) => (time ? moment(time).format("YYYY-MM-DD") : "--")}
          />
          <Column
            title="导入人员"
            dataIndex="importUserName"
            align="center"
            render={(name) => <span>{name || "--"}</span>}
          />
          <Column
            title="指标名称"
            dataIndex="indicatorName"
            align="center"
            render={(name) => <span>{name || "--"}</span>}
          />
          <Column
            title="导入数据"
            dataIndex="num"
            align="center"
            render={(num) => <span>{num !== undefined ? `${num}条` : "--"}</span>}
          />
          <Column
            title="成功"
            dataIndex="successNum"
            align="center"
            render={(num) => <span>{num !== undefined ? `${num}条` : "--"}</span>}
          />
          <Column
            title="失败"
            dataIndex="errorNum"
            align="center"
            render={(num) => <span>{num !== undefined ? `${num}条` : "--"}</span>}
          />
          <Column
            title="数据清单"
            align="center"
            dataIndex="enable"
            width={150}
            render={(text: boolean, record: any) => (
              <Space split={<Divider type="vertical" />}>
                <Typography.Link
                  onClick={() => {
                    history.push(`/morax/evaDataImport/edit/${record.id}/${record.num}`);
                  }}
                >
                  查看
                </Typography.Link>
              </Space>
            )}
          />
        </Table>
        <FileDatailsModal
          visible={visible}
          tarOnCancel={() => setVisible(false)}
          fileData={fileData}
          setParams={setParams}
          innerParams={innerParams}
        />
      </Card>
    </PageHeaderWrapper>
  );
};