import React, { useEffect, useRef, useState } from "react";
import { Button, Divider, Select, Row, Col, Form, Input, Card } from "antd";
import {
  ProForm,
  ProFormSelect,
  ProFormText,
} from "@ant-design/pro-components";
import Page from "@/components/Page";
import { getTaIncompatibleRule } from "@/service/taIncompatible";
import { getSysPosition } from "@/service/sysposition";
import { queryDict } from "@/utils/request";
import SearchResult from "./components/SearchResult";
import dayjs from "dayjs";
import { getSysOrg } from "@/service/sysorg";

const queryPosition = queryDict(getSysPosition, {
  labelKey: "name",
  valueKey: "positionId",
});
const queryOrg = queryDict(getSysOrg, {
  labelKey: "orgId",
  valueKey: "orgId",
  show: true,
});

export default (props) => {
  const formRef = useRef();
  const [repelmsg, setRepelmsg] = useState();
  const [postIdName, setPostIdName] = useState();
  const onFinish = (values) => {
    let time = dayjs().format("YYYY-MM-DD");
    const data = {
      ...values,
      passTime: time,
    };

    queryPosition().then((res) => {
      const data = {};
      (res || []).map((x) => {
        data[x.positionId] = x.label;
      });
      setPostIdName(data);
    });

    getTaIncompatibleRule(data).then((res) => {
      setRepelmsg(res);
    });
  };
  return (
    <Page>
      <Row gutter={24}>
        <Col span={12}>
          <Card>
            <ProForm
              formRef={formRef}
              layout="horizontal"
              size="large"
              onFinish={onFinish}
              labelCol={{ span: 8 }}
              wrapperCol={{ span: 12 }}
              submitter={false}
            >
              <div style={{ paddingBottom: "24px" }}>
                变更前:
                <ProFormText
                  name="oldOrgCode"
                  label="当前归属机构号"
                  request={queryOrg}
                />
                <ProFormSelect
                  label="当前岗位名称"
                  name="primaryPost"
                  request={queryPosition}
                />
              </div>
              <div>
                变更后:
                <ProFormText
                  name="newOrgCode"
                  label="拟建归属机构号"
                  request={queryOrg}
                />
                <ProFormSelect
                  name="targetPost"
                  label="拟建岗位名称"
                  request={queryPosition}
                />
              </div>
              <Form.Item style={{ display: "flex", justifyContent: "center" }}>
                <Button
                  type="primary"
                  htmlType="submit"
                  style={{ width: "6vw" }}
                >
                  查询
                </Button>
              </Form.Item>
            </ProForm>
          </Card>
        </Col>
        <Col span={12}>
          {/* <Card style={{ height: "100%" }}>
            {(repelmsg || []).map((x, index) => {
              return (
                <div key={index}>
                  <h3>{x.regularRules}</h3>
                  {x.primaryPost && postIdName && (
                    <div>原岗位：{postIdName[x.primaryPost]}</div>
                  )}
                  {x.targetPost && postIdName && (
                    <div>目标岗位：{postIdName[x.targetPost]}</div>
                  )}

                  <h3>{x.monthRules}</h3>
                  {x.monthRules && <div>{x.monthRules}</div>}
                  {x.employeeNum && <div>员工工号：{x.employeeNum}</div>}
                  {x.employeeName && <div>员工姓名：{x.employeeName}</div>}
                  {x.counterImpPositions && postIdName && (
                    <div>原岗位：{postIdName[x.counterImpPositions]}</div>
                  )}

                  {x.specificOrgNum && <div>原网点号：{x.specificOrgNum}</div>}
                  {x.specificOrgName && (
                    <div>原网点名称：{x.specificOrgName}</div>
                  )}
                  {x.counterImpPost && postIdName && (
                    <div>目标岗位：{postIdName[x.counterImpPost]}</div>
                  )}
                  {x.orgNumJobRotation && (
                    <div>目标网点号：{x.orgNumJobRotation}</div>
                  )}
                  {x.specificNameOrgRotation && (
                    <div>目标网点名称：{x.specificNameOrgRotation}</div>
                  )}
                </div>
              );
            })}
          </Card> */}
          <SearchResult repelmsg={repelmsg} postIdName={postIdName} />
        </Col>
      </Row>
    </Page>
  );
};
