import React, { useEffect, useState } from 'react';
import '../style.less';
import { Input, List, Spin } from 'antd';
import { getBranchesList } from '../Home/service';
import person from '@/assets/topic/person.png'
import { history } from 'umi';

const { Search } = Input;

const PartyBranches: React.FC<{}> = (props: any) => {
  //branches list
  const [branchesData, setBranchesData] = useState<any[]>([]);
  //loading
  const [loading, setLoading] = useState<boolean>(false);
  //get branches list
  const getBranchesData = (belongBranchName: string) => {
    setLoading(true);
    getBranchesList({ branchName: props.location.state?.branchName || '', param: belongBranchName }).then(res => {
      if (res?.code == 200) {
        setBranchesData(res?.data);
      }
    }).finally(() => {
      setLoading(false);
    })
  }
  //to home
  const toHome = () => {
    history.push("/highQualityOperation/home");
  }
  //goback lastpage
  const toGoBack = () => {
    window.history.go(-1);
  }
  //onclick card
  const onCardClick = (data: any) => {
    history.push({ pathname: "/highQualityOperation/personInfor", state: data });
  }
  useEffect(() => {
    getBranchesData('');
  }, [])

  return (
    <div className="page-container">
      <div className="top-banner">
        <div className="back-home">
          <span onClick={() => toHome()}>返回首页</span>
          <span onClick={() => toGoBack()}>上一页</span>
        </div>
      </div>
      <Spin spinning={loading}>
        <div className="search">
          <span className="text"><span>党支部名录</span>(当前共{branchesData.length}条)</span>
          <div className="search-box">
            <Search
              placeholder="党支部名称"
              allowClear
              enterButton="搜索"
              style={{ width: 322 }}
              onSearch={getBranchesData}
            />
          </div>
        </div>
        <div className="mess-box mess-detail">
          <List
            grid={{ gutter: 16, column: 4 }}
            dataSource={branchesData}
            renderItem={item => (
              <List.Item>
                <div className="wrapper" onClick={() => onCardClick(item)}>
                  <div className="top-bg">
                    <div className="branch-title">
                      <span>{item.belongBranchName}</span>
                    </div>
                  </div>
                  <div className="mess-content mess-content-branches">
                    <div className="mess-right">
                      <span>{item.count}</span>人
                      <div>
                        <img src={person} />
                        <span>党员数量</span>
                      </div>
                    </div>
                  </div>
                </div>
              </List.Item>
            )}
          />
        </div>
      </Spin>
    </div>
  )
}

export default PartyBranches;