import React, { useEffect, useRef, useState } from "react";
import { Button, Divider, Upload, Row, Col, Form, Input } from "antd";
import List from "@/components/Page/List";
import { useNavigate } from "react-router-dom";
import {
  deleteTaMandatoryLeave,
  getTaMandatoryLeave,
} from "@/service/taMandatoryLeave";
import ModalForms from "@/components/Upload/ModalForms";
import Massage from "@/components/Massage";
import { DownloadOutlined } from "@ant-design/icons";
import { uploadFileTaMandatoryLeave } from "@/components/Upload/request";
import { getSysPosition } from "@/service/sysposition";
import { queryDict } from "@/utils/request";
import { getSysOrg } from "@/service/sysorg";
const getPosition = queryDict(getSysPosition, {
  labelKey: "name",
  valueKey: "positionId",
});
const getOrg = queryDict(getSysOrg, {
  labelKey: "name",
  valueKey: "name",
});

export default (props) => {
  const columns = [
    {
      title: "序号",
      dataIndex: "sort",
      search: false,
    },
    {
      title: "总行部门",
      dataIndex: "headOfficeOrg",
    },
    {
      title: "员工工号",
      dataIndex: "employeeNum",
    },
    {
      title: "员工姓名",
      dataIndex: "employeeName",
    },
    {
      title: "原单位机构号",
      dataIndex: "orgNum",
      search: false,
    },
    {
      title: "原单位名称",
      dataIndex: "orgName",
      request: getOrg,
      fieldProps: {
        showSearch: true,
        filterOption: (x, opt) => opt.label?.includes(x),
      },
    },
    {
      title: "对应机构层次",
      dataIndex: "counterInstitutionsLevel",
      search: false,
    },
    {
      title: "当前职位",
      dataIndex: "currentPosition",
      search: false,
    },
    {
      title: "对应重要岗位",
      dataIndex: "counterImpPost",
      valueType: "select",
      request: getPosition,
      fieldProps: {
        showSearch: true,
        filterOption: (x, opt) => opt.label?.includes(x),
      },
    },
    {
      title: "对应总行条线",
      dataIndex: "counterHeadOfficeLine",
      search: false,
    },
    {
      title: "休假起始时间",
      dataIndex: "startTimeVacation",
      valueType: "date",
      search: false,
    },
    {
      title: "休假起始时间",
      dataIndex: "startTimeVacation",
      valueType: "dateRange",
      hideInTable: true,
      search: {
        transform: (val) => {
          return {
            startVacation: val[0],
            endVacation: val[1],
          };
        },
      },
    },
    {
      title: "休假截止时间",
      dataIndex: "vacationDeadline",
      valueType: "date",
      search: false,
    },
    {
      title: "休假截止时间",
      dataIndex: "vacationDeadline",
      valueType: "dateRange",
      hideInTable: true,
      search: {
        transform: (val) => {
          return {
            startVacation: val[0],
            endVacation: val[1],
          };
        },
      },
    },
    {
      title: "已强制休假天数（工作日）",
      dataIndex: "mandatoryVacationDay",
      search: false,
      width: 200,
    },
    {
      title: "开展离岗检查/代职检查情况",
      dataIndex: "depSbtDepartureCheck",
      search: false,
      width: 200,
    },
    {
      title: "备注",
      dataIndex: "remark",
      search: false,
    },
    {
      title: "立查立改(是/否）",
      dataIndex: "checkChange",
      search: false,
    },
    {
      title: "自查自纠 (是/否）",
      dataIndex: "checkCorrect",
      search: false,
    },
  ];
  const navigate = useNavigate();
  const [visible, setVisible] = useState(false);
  const ref = useRef();
  const [open, setOpen] = useState(false);
  const [errList, setErrList] = useState([]);

  const onEdit = (it) => {
    navigate(`/mandatoryLeaveMange/mandatoryleave/edit?id=${it.leaveId}`);
  };
  const onAdd = () => {
    navigate("/mandatoryLeaveMange/mandatoryleave/edit");
  };
  const onFinish = () => {
    ref.current?.reload();
  };
  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 onDelete = (it) => {
    deleteTaMandatoryLeave(it.leaveId).then(() => {
      ref.current?.reload();
    });
  };
  return (
    <>
      <List
        ref={ref}
        rowKey="leaveId"
        search={{ labelWidth: 130 }}
        scroll={{ x: 2600 }}
        columns={columns}
        // pagination={{
        //   pageSize: 10,
        // }}
        onEdit={onEdit}
        onAdd={onAdd}
        onDelete={onDelete}
        request={getTaMandatoryLeave}
        toolBarRender={() => [
          <Button key="2" href={mandatoryleave} icon={<DownloadOutlined />}>
            下载模板
          </Button>,
          <Button type="primary" key="1" onClick={() => setVisible(true)}>
            导入
          </Button>,
        ]}
      />

      <ModalForms
        visible={visible}
        setVisible={setVisible}
        onFinish={onFinish}
        onSuccess={onSuccess}
        uploadFile={uploadFileTaMandatoryLeave}
      />
      <Massage
        title="读取错误提示"
        open={open}
        setOpen={setOpen}
        errList={errList}
      />
    </>
  );
};
