import React, { useEffect, useRef, useState } from "react";
import { Button, Divider, Card } from "antd";

export default (props) => {
  const { repelmsg, postIdName } = props;
  const [allRulesCompatible, setAllRulesCompatible] = useState(false);
  useEffect(() => {
    if (repelmsg) {
      const allRulesCompatible = (repelmsg || [])?.every(
        (x) => x.rules == "根据不相容设置这两个岗位是相容的"
      );
      setAllRulesCompatible(allRulesCompatible);
    }
  }, [repelmsg]);

  console.log(allRulesCompatible);
  return (
    <Card style={{ height: "100%" }}>
      {repelmsg &&
        (allRulesCompatible ? (
          <h3>根据不相容设置这两个岗位是相容的</h3>
        ) : (
          <h3>根据不相容设置这两个岗位是不相容的</h3>
        ))}
      {(repelmsg || []).map((x, index) => {
        return (
          <div key={index}>
            {x.primaryPost && postIdName && (
              <div>原岗位：{postIdName[x.primaryPost]}</div>
            )}
            {x.targetPost && postIdName && (
              <div>目标岗位：{postIdName[x.targetPost]}</div>
            )}

            {/* <h3>{x.rules}</h3> */}
            {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>
  );
};
