import React, { useEffect, useRef, useState } from "react";
import { ProTable } from "@ant-design/pro-components";
import { Button, Select, Row, Col, Form, Input, Card } from "antd";
import { useNavigate } from "react-router-dom";
import { getTaMessage } from "@/service/taMessage";
import Massage from "@/components/Massage";
import ModalForms from "@/components/Upload/ModalForms";
import { uploadFile } from "@/components/Upload/request";
import { queryTable } from "@/utils/request";
import "./style.less";

export default (props) => {
  const actionRef = useRef();
  const actionRef2 = useRef();
  const [open, setOpen] = useState(false);
  const [visible, setVisible] = useState(false);
  const [errList, setErrList] = useState([]);

  const navigate = useNavigate();
  const queryMessage = queryTable(getTaMessage);
  const onHistory = () => {
    navigate(`/home/history`);
  };

  const onSuccess = (x) => {
    if (x) {
      const res = x.split("读取文件失败:");
      if ((res[0] = "读取文件失败")) {
        setOpen(true);
        const errlist = res[1].split("\n").filter((x) => x);
        setErrList(errlist);
      }
    }
  };

  const onDetail = (it) => {
    navigate(`/home/detail?id=${it.messageId}`);
  };
  const onFinish = () => { };
  const columns = [
    {
      title: "内容",
      dataIndex: "contentSent",
    },
    {
      title: "操作",
      key: "option",
      render: (_, record) => [
        <Button
          key="1"
          style={{ paddingLeft: 0 }}
          type="link"
          onClick={() => onDetail(record)}
        >
          查看详情
        </Button>,
      ],
    },
  ];
  return (
    <div className="grid-container">
      <div className="left-side">
        <Card
          size="small"
          bordered={false}
          style={{ height: "48%", marginBottom: "24px" }}
        >
          <ProTable
            rowKey="messageId"
            params={{ sourceName: "taRotation" }}
            request={queryMessage}
            columns={columns}
            headerTitle="轮岗信息"
            options={false}
            search={false}
            actionRef={actionRef}
            scroll={{
              y: 190,
            }}
            toolBarRender={() => [
              <Button key="1" type="link" onClick={onHistory}>
                查看历史
              </Button>,
            ]}
          />
        </Card>
        <Card size="small" bordered={false} style={{ height: "48%" }}>
          <ProTable
            rowKey="messageId"
            request={queryMessage}
            columns={columns}
            params={{ sourceName: "taMandatoryLeave" }}
            headerTitle="强制休假信息"
            options={false}
            scroll={{
              y: 190,
            }}
            search={false}
            actionRef={actionRef2}
            toolBarRender={() => [
              <Button key="1" type="link" onClick={onHistory}>
                查看历史
              </Button>,
            ]}
          />
        </Card>
      </div>
      <div className="right-side">
        <Card title={<div style={{ fontWeight: 400, padding: "20px 0 0 12px" }}>快捷入口</div>} style={{ height: "99%" }}>
          <Card.Grid style={{ width: "50%", color: '#1677ff', cursor: 'pointer', textAlign: 'center' }} onClick={() => setVisible(true)}>轮岗导入</Card.Grid>
          <Card.Grid style={{ width: "50%", color: '#1677ff', cursor: 'pointer', textAlign: 'center' }} onClick={() => setVisible(true)}>强制休假导入</Card.Grid>
          <Card.Grid style={{ width: "50%", textAlign: 'center', cursor: 'pointer' }}>
            <Button href={rotation} type="link" style={{ padding: 0 }}>下载轮岗模板</Button>
          </Card.Grid>
          <Card.Grid style={{ width: "50%", textAlign: 'center', cursor: 'pointer' }}>
            <Button href={mandatoryleave} type="link" style={{ padding: 0 }}>下载强制休假模板</Button>
          </Card.Grid>
          <div style={{ width: "100%" }}>
            <img
              style={{ margin: "30% auto", display: "block" }}
              src="/src/assets/chinaBank.png"
              height="50%"
              width="50%"
              alt=""
            />
          </div>
        </Card>
        <ModalForms
          visible={visible}
          setVisible={setVisible}
          onFinish={onFinish}
          onSuccess={onSuccess}
          uploadFile={uploadFile}
        />
        <Massage
          title="读取错误提示"
          open={open}
          setOpen={setOpen}
          errList={errList}
        />
      </div>
    </div>
  );
};
