import React, { useEffect, useRef, useState } from "react";
import { Button, Divider, Upload, Row, Col, Form, Input } from "antd";
import List from "@/components/Page/List";
import { deleteTaRotation, getTaRotation } from "@/service/taRotation";
import { useNavigate } from "react-router-dom";
import { DownloadOutlined } from "@ant-design/icons";
import ModalForms from "@/components/Upload/ModalForms";
import Massage from "@/components/Massage";
import { uploadFile } from "@/components/Upload/request";
import { queryDict, queryTable } from "@/utils/request";
import { getSysPosition } from "@/service/sysposition";
import { getSysOrg } from "@/service/sysorg";
import dayjs from "dayjs";
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: "specificOrgNum",
      search: false,
    },
    {
      title: "原单位具体名称",
      dataIndex: "specificOrgName",
      request: getOrg,
      fieldProps: {
        showSearch: true,
        filterOption: (x, opt) => opt.label?.includes(x),
      },
    },
    {
      title: "对应机构层次",
      dataIndex: "counterInstitutionsLevel",
      search: false,
    },
    {
      title: "当前职位",
      dataIndex: "currentPosition",
      search: false,
    },

    {
      title: "对应重要岗位",
      dataIndex: "counterImpPositions",
      valueType: "select",
      request: getPosition,
      fieldProps: {
        showSearch: true,
        filterOption: (x, opt) => opt.label?.includes(x),
      },
    },
    {
      title: "对应总行条线",
      dataIndex: "counterHeadOfficeLine",
      search: false,
    },
    {
      title: "从事岗位日期",
      dataIndex: "durationOfEmployment",
      valueType: "date",
      search: false,
    },
    {
      title: "轮岗周期要求（年）",
      dataIndex: "rotationCycle",
      search: false,
    },
    {
      title: "轮岗截止日期",
      dataIndex: "rotationDeadline",
      valueType: "date",
      search: false,
    },
    {
      title: "轮岗截止日期",
      dataIndex: "rotationDeadline",
      valueType: "dateRange",
      hideInTable:true,
      search: {
        transform: (val) => {
          return {
            startDeadline: val[0],
            endDeadline: val[1],
          };
        },
      },
    },
    {
      title: "对应轮岗方式",
      dataIndex: "counterRotationMethod",
      search: false,
    },
    {
      title: "轮岗后单位机构号",
      dataIndex: "orgNumJobRotation",
      search: false,
    },
    {
      title: "轮岗后单位具体名称",
      dataIndex: "specificNameOrgRotation",
      search: false,
    },
    {
      title: "轮岗后职位",
      dataIndex: "jobRotationPost",
      search: false,
    },
    {
      title: "轮岗后对应重要岗位",
      dataIndex: "counterImpPostRotation",
      search: false,
      valueType: "select",
      request: getPosition,
    },
    {
      title: "轮岗后对应总行条线",
      dataIndex: "counterOfficeLineRotation",
      search: false,
    },
    {
      title: "轮岗执行时间",
      dataIndex: "rotationExeTime",
      valueType: "date",
      search: false,
    },
    {
      title: "轮岗执行时间",
      dataIndex: "rotationExeTime",
      valueType: "dateRange",
      hideInTable:false,
      search: {
        transform: (val) => {
          return {
            startExeTime: val[0],
            endExeTime: val[1],
          };
        },
      },
    },
    {
      title: "立查立改(是/否)",
      dataIndex: "checkChange",
      search: false,
    },
    {
      title: "是否问责",
      dataIndex: "accountability",
      search: false,
    },
    {
      title: "事实确认书编号",
      dataIndex: "factConfirmationNum",
      search: false,
    },
    {
      title: "自查自纠(是/否）",
      dataIndex: "checkCorrect",
      search: false,
    },
    {
      title: "计划轮岗日期",
      dataIndex: "planRotationDate",
      valueType: "date",
      search: false,
    },
  ];
  const [visible, setVisible] = useState(false);
  const [open, setOpen] = useState(false);
  const [errList, setErrList] = useState([]);
  const ref = useRef();

  const navigate = useNavigate();

  const onEdit = (r) => {
    navigate(`/rotationMange/rotationList/edit?id=${r.rotationId}`);
  };
  const onAdd = (r) => {
    navigate("/rotationMange/rotationList/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) => {
    deleteTaRotation(it.rotationId).then(() => {
      ref.current?.reload();
    });
  };
  return (
    <>
      <List
        ref={ref}
        rowKey="rotationId"
        search={{ labelWidth: 130 }}
        columns={columns}
        request={getTaRotation}
        onEdit={onEdit}
        onAdd={onAdd}
        onDelete={onDelete}
        toolBarRender={() => [
          <Button key="2" href={rotation} icon={<DownloadOutlined />}>
            下载模板
          </Button>,
          <Button type="primary" key="1" onClick={() => setVisible(true)}>
            导入
          </Button>,
        ]}
      />
      <ModalForms
        visible={visible}
        setVisible={setVisible}
        onFinish={onFinish}
        onSuccess={onSuccess}
        uploadFile={uploadFile}
      />

      <Massage
        title="读取错误提示"
        open={open}
        setOpen={setOpen}
        errList={errList}
      />
    </>
  );
};
