import "./index.less";
import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
import cake from "~/assets/images/public/white/img7.png";
import {useState} from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
function WhiteShareMiddle() {
  const [block1List, setBlock1List] = useState([
    { name: "综合应急预案", num: "13"  },
    { name: "现场处置方案", num: "75"  },
    { name: "应急应对措施", num: "58" },
    { name: "应急救援队伍", num: "3" },
  ]);
  const [block2List, setBlock2List] = useState([
    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },
    { unitName: "二公司", name: "王岩" ,duties:"公司经理", phone:"3095311" },

  ]);

  return (
    <div className="white_share_middle">
      <div className="block1">
        <Title title={"应急管理"} />
       <div className="block1_content">
         <div className="emergency_left">
           <div className="top">
             {
               block1List.map((item, index) => (
                 <div key={index} className="item">
                   <p className="name">{item.name}</p>
                   <div className="num">{item.num}</div>
                 </div>
               ))
             }
           </div>
           <div className="emergency_left_main">
             <div className="table">
               <div className="tr">
                 <div className="th">单位名称</div>
                 <div className="th">姓名</div>
                 <div className="th">职务</div>
                 <div className="th">电话</div>
               </div>
               <div className="scroll">
                 <SeamlessScroll list={block2List} step={0.5}>
                   {block2List.map((item, index) => (
                     <div key={index} className="tr">
                       <div className="td">{item.unitName}</div>
                       <div className="td">{item.name}</div>
                       <div className="td">{item.duties}</div>
                       <div className="td">{item.phone}</div>
                     </div>
                   ))}
                 </SeamlessScroll>
               </div>
             </div>

           </div>
         </div>
       </div>

      </div>



    </div>

  );
}

export default WhiteShareMiddle;