import { inject, observer } from "mobx-react";
import "./right.less";
import { Store } from "antd/es/form/interface";
import { useEffect, useState } from "react";
import { Modal } from "antd";

const Pyzx = (props: Store) => {
  const { homeStore } = props;
  const [user, setUser] = useState<any>();
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  useEffect(() => {
    homeStore.getAe().then((res) => {
      res.data?.record.sort((item, item2) => {
        return item2.scores - item.scores;
      });
      setUser(res.data?.record);
    });
  }, [homeStore]);

  return (
    <div className="pyzx" style={{height:"150px"}}>
      {user?.map((item) => {
        return (
          <div
            key={item.id}
            className="pyzx_title"
            onClick={() => {
              homeStore.getScores(item.identity);
              setIsModalOpen(true);
            }}
          >
            <img height={80} src={item.head_img} alt="" />
            <div className="content">
              <div>姓名:{item.user_name}</div>
              <div>总积分:{item.scores}</div>
              <div>职位:{item.pos_held}</div>
              <div>自我描述:{item.remark}</div>
            </div>
          </div>
        );
      })}
      <Modal
        title="积分详情"
        className="owner_model"
        width={"60%"}
        open={isModalOpen}
        afterClose={() => {}}
        onOk={() => {}}
        footer={null}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <div>
          <p style={{ color: "#fff", fontSize: "16px" }}>总积分：{homeStore.scoreData?.totalScore}</p>
          <div style={{ color: "#fff", fontSize: "15px" ,display:"flex",justifyContent:"space-between",marginBottom:"10px"}}>
            <div style={{border:"1px solid #333",padding:"10px",flex:1}}>
              <span>训练积分汇总 :</span>
              <span>{homeStore.scoreData?.taskScore}</span>
              <div style={{height:"10px"}}></div>
              <div style={{height:"500px"}}>
                {
                 homeStore.scoreData?.training?.map((item,index)=>{
                  return <div key={index} style={{marginBottom:"10px",border:"1px solid #333",padding:"10px"}}>
                    <div>任务标题：{item.title}</div>
                    <div>任务描述：{item.desc}</div>
                    <div>任务积分：{item.score}</div>
                  </div>
                 }) 
                }
              </div>
            </div>
            <div style={{width:"10px"}}></div>
            <div style={{border:"1px solid #333",padding:"10px",flex:1}}>
              <span>学习积分汇总 :</span>
              <span>{homeStore.scoreData?.learnScore}</span>
              <div style={{height:"10px"}}></div>
              <div style={{height:"500px",overflow:"auto"}}>
                {
                 homeStore.scoreData?.learn?.map((item,index)=>{
                  return <div key={index} style={{marginBottom:"10px",border:"1px solid #333",padding:"10px"}}>
                    <div>学习内容：{item.title}</div>
                    <div>任务积分：{item.score}</div>
                  </div>
                 }) 
                }
              </div>
            </div>
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default inject("homeStore")(observer(Pyzx));
