import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { useEffect } from "react";

const PvTable = (props: Store) => {
  const { teamStore, persMgmtStore, usrStore } = props;
  useEffect(() => {
    teamStore.getlist();
    persMgmtStore.getlist();
    usrStore.getlist();
   
  }, [teamStore,persMgmtStore,usrStore]);
  const folders = (id,list) => {
    let has = false
    list.forEach(element => {
      if (element.team_identity === id) {
        has = true
      }
    });
    return <div>{has?'√':'x'}</div>
  };
  const foldersp = (id,list) => {
    let has = false
    list.forEach(element => {
      if (element.pers_identity === id) {
        has = true
      }
    });
    return <div>{has?'√':'x'}</div>
  };
  return (
    <div className="pv_table">
      <table className="table">
        <thead>
          <tr>
            <td rowSpan={2}>序号</td>
            <td rowSpan={2}>姓名</td>
            <td rowSpan={2}>政治面貌</td>
            <td rowSpan={2}>所属集结点</td>
            <td colSpan={teamStore.list?.length ?? 4}>所属队伍</td>
            <td colSpan={persMgmtStore.list?.length ?? 4}>个人身份</td>
          </tr>
          <tr>
            {teamStore.list?.map((e) => {
              return <td key={e.id}>{e.name}</td>;
            })}
            {persMgmtStore.list?.map((e) => {
              return <td key={e.id}>{e.name}</td>;
            })}
          </tr>
        </thead>
        <tbody>
          {usrStore.list?.map((us,i) => {
            return (
              <tr 
              key={us.id}
              onClick={(e) => {
                usrStore.setUserDetaul(us)
                usrStore.setPoverDe(true)
              }}>
                <td>{i+1}</td>
                <td>{us.user_name}</td>
                <td>{us.political_affil}</td>
                <td>{us.dep_identity}</td>
                {teamStore.list?.map((e) => {
                  return <td key={e.identity}>{folders(e.identity,us.team)}</td>;
                })}
                {persMgmtStore.list?.map((e) => {
                   return <td key={e.identity}>{foldersp(e.identity,us.pers)}</td>;
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};
export default inject(
  "teamStore",
  "persMgmtStore",
  "usrStore"
)(observer(PvTable));
