import React, { useEffect, useState } from 'react';
import '../Style/ld_style.less';
import { Input, List } from 'antd';
import { history } from 'umi'
import { getBranchList, getMemberAndBranch } from './service';
import person from '@/assets/topic/person.png'
import branch from '@/assets/topic/branch.png'

const { Search } = Input;

const PartyBranch: React.FC<{}> = () => {
  //member number and branch number
  const [memberNumber, setMemberNumber] = useState<any>({});
  //branch list
  const [branchData, setBranchData] = useState<any[]>([]);
  //get member and branch
  const getMemberNumber = () => {
    getMemberAndBranch().then(res => {
      if (res?.code == 200) {
        setMemberNumber(res?.data);
      }
    })
  }

  //get member and branch
  const getBranchData = () => {
    getBranchList().then(res => {
      if (res?.code == 200) {
        setBranchData(res?.data);
      }
    })
  }
  //search params redirect
  const onSearch = (value: string) => {
    const params = {
      param: value
    }
    history.push({ pathname: "/partyMemberTopic/personInfor", state: params });
  }

  //onclick
  const clickCard = (data: any) => {
    history.push({ pathname: "/partyMemberTopic/personInfor", state: data });
  }

  //to home
  const toHome = () => {
    history.push("/partyMemberTopic/home");
  }

  useEffect(() => {
    getMemberNumber();
    getBranchData();
  }, [])
  return (
    <div className="page-container">
      <div className="top-banner">
        <div className="back-home">
          <span onClick={() => toHome()}>返回首页</span>
        </div>
      </div>
      <div className="search">
        <span className="text"><span>党员名录</span>(当前共{memberNumber?.member}条)</span>
        <div className="search-box">
          <Search
            placeholder="输入姓名/邮箱/电话"
            allowClear
            enterButton="搜索"
            style={{ width: 322 }}
            onSearch={onSearch}
          />
        </div>
      </div>
      <div className="static-box">
        <div className="person-num">党员数量<span>{memberNumber?.member}</span>人</div>
        <div className="party-num">党支部数量<span>{memberNumber?.branch}</span>个</div>
      </div>
      <div className="mess-box">
        <List
          grid={{ gutter: 16, column: 4 }}
          dataSource={branchData}
          renderItem={(item: any) => (
            <List.Item>
              <div className="wrapper" onClick={() => clickCard(item)}>
                <div className="pic-bg">{item.branchName}</div>
                <div className="mess">
                  {/* <div className="mess-left">党员数量</div>
                  <div className="mess-right">
                    <span>{item.count}</span>人
                  </div> */}
                  <div className="mess-left">
                    <span>{item.branchCount}</span>个
                    <div>
                      <img src={branch} />
                      <span>党支部数</span>
                    </div>
                  </div>
                  <div className="mess-right">
                    <span>{item.count}</span>人
                    <div>
                      <img src={person} />
                      <span>党员数量</span>
                    </div>
                  </div>
                </div>
              </div>
            </List.Item>
          )}
        />
      </div>
    </div>
  )
}

export default PartyBranch;