import React, { useCallback, useEffect, useRef, useState } from "react";
import Edit from "@/components/Page/Edit";
import {
  ProForm,
  ProFormDatePicker,
  ProFormDigit,
  ProFormRadio,
  ProFormRate,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from "@ant-design/pro-components/es";
import {
  getTaRotationById,
  postTaRotation,
  putTaRotation,
} from "@/service/taRotation";
import dayjs from "dayjs";
import { queryDict } from "@/utils/request";
import { getSysPosition } from "@/service/sysposition";
import { getSysOrg } from "@/service/sysorg";
import { useNavigate, useSearchParams } from "react-router-dom";
import { message } from "antd";
import Massage from "@/components/Massage";

const request = {
  get: getTaRotationById,
  save: postTaRotation,
  update: putTaRotation,
};
const getPosition = queryDict(getSysPosition, {
  labelKey: "name",
  valueKey: "positionId",
});
const getOrgId = queryDict(getSysOrg, {
  labelKey: "orgId",
  valueKey: "orgId",
});
const getOrgName = queryDict(getSysOrg, {
  labelKey: "name",
  valueKey: "name",
});

export default (props) => {
  const [params] = useSearchParams();
  const disabled = params.get("disabled");
  const formRef = useRef();
  const selectChange = [
    { label: "是", value: "是" },
    { label: "否", value: "否" },
  ];
  const rules = {
    // headOfficeOrg: [{ required: true, message: "请输入总行部门" }],
    employeeNum: [{ required: true, message: "请输入员工工号" }],
    employeeName: [{ required: true, message: "请输入员工姓名" }],
    // specificOrgNum: [{ required: true, message: "请输入具体单位机构号" }],
    specificOrgName: [{ required: true, message: "请输入所在单位具体名称" }],
    counterImpPositions: [{ required: true, message: "请输入对应重要岗位" }],
    rotationCycle: [{ required: true, message: "请输入轮岗周期要求" }],
    rotationDeadline: [{ required: true, message: "请输入轮岗截止时间" }],
    counterRotationMethod: [{ required: true, message: "请输入轮岗方法" }],
    orgNumJobRotation: [{ required: true, message: "请输入机构轮岗" }],
    specificNameOrgRotation: [
      { required: true, message: "请输入轮岗后单位具体名称" },
    ],
    rotationExeTime: [{ required: true, message: "请输入轮岗执行时间" }],
  };
  const onChangeOrg = (value, e) => {
    formRef.current.setFieldValue("specificOrgNum", e.orgId);
    formRef.current.setFieldValue("specificOrgName", e.name);
  };

  const onChangeOrgAfter = (value, e) => {
    formRef.current.setFieldValue("orgNumJobRotation", e.orgId);
    formRef.current.setFieldValue("specificNameOrgRotation", e.name);
  };
  const onChangeTime = (value, e) => {
    const durationOfEmployment = formRef.current.getFieldValue(
      "durationOfEmployment"
    );
    if (durationOfEmployment) {
      const rotationDeadline = dayjs(durationOfEmployment).add(value, "year");
      formRef.current.setFieldValue("rotationDeadline", rotationDeadline);
    }
  };

  return (
    <Edit
      formRef={formRef}
      request={request}
      // initialValues={initialValues}
      labelCol={{ span: 6 }}
      disabled={disabled}
      renderItems={() => (
        <>
          <ProFormText name="headOfficeOrg" label="总 行 部  门：" />
          <ProFormText
            name="employeeNum"
            label="员 工 工 号："
            required
            rules={rules.employeeNum}
          />
          <ProFormText
            name="employeeName"
            label="员 工 姓 名："
            required
            rules={rules.employeeName}
          />
          <ProFormText
            name="specificOrgNum"
            label="原单位机构号："
            onChange={onChangeOrg}
            request={getOrgId}

            // required
            // rules={rules.specificOrgNum}
          />
          <ProFormText
            name="specificOrgName"
            label="原单位具体名称："
            request={getOrgName}
            onChange={onChangeOrg}
            required
            rules={rules.specificOrgName}
          />
          <ProFormText name="counterInstitutionsLevel" label="对应机构层次：" />
          <ProFormText name="currentPosition" label="当 前 职 位：" />
          <ProFormText
            name="counterImpPositions"
            label="对应重要岗位："
            request={getPosition}
            required
            rules={rules.counterImpPositions}
          />
          <ProFormText
            name="counterHeadOfficeLine"
            label="对应总行条线："
            // required
            // rules={rules.counterImpPositions}
          />
          <ProFormDatePicker
            name="durationOfEmployment"
            label="从事岗位日期："
            width="100%"
            // style={{ width: "800px" }}
          />
          <ProFormDigit
            name="rotationCycle"
            label="轮岗周期要求（年）："
            onChange={onChangeTime}
            min={1}
            // required
            // rules={rules.rotationCycle}
          />
          <ProFormDatePicker
            name="rotationDeadline"
            label="轮岗截止日期："
            width="100%"
            required
            rules={rules.rotationDeadline}
          />

          <ProFormText
            name="counterRotationMethod"
            label="对应轮岗方式："
            // required
            // rules={rules.counterRotationMethod}
          />
          <ProFormText
            name="orgNumJobRotation"
            label="轮岗后单位机构号："
            request={getOrgId}
            onChange={onChangeOrgAfter}
            // required
            // rules={rules.orgNumJobRotation}
          />
          <ProFormText
            name="specificNameOrgRotation"
            label="轮岗后单位具体名称："
            request={getOrgName}
            onChange={onChangeOrgAfter}

            // required
            // rules={rules.specificNameOrgRotation}
          />

          <ProFormText name="jobRotationPost" label="轮 岗 后 职 位：" />
          <ProFormText
            name="counterImpPostRotation"
            label="轮岗后对应重要岗位："
            request={getPosition}
          />
          <ProFormText
            name="counterOfficeLineRotation"
            label="轮岗后对应总行条线："
          />
          <ProFormDatePicker
            name="rotationExeTime"
            label="轮岗执行时间："
            width="100%"
            required
            rules={rules.rotationExeTime}
          />
          <ProFormRadio.Group
            name="checkChange"
            label="立 查 立 改："
            options={selectChange}
          />
          <ProFormText name="accountability" label="是 否 问 责：" />
          <ProFormText name="factConfirmationNum" label="事实确认书编号：" />
          <ProFormRadio.Group
            name="checkCorrect"
            label="自 查 自 纠："
            options={selectChange}
          />
          <ProFormDatePicker
            name="planRotationDate"
            label="计划轮岗日期："
            width="100%"
          />

          <ProFormTextArea name="remark" label="备 注：" />
        </>
      )}
    />
  );
};
