import React,{ useState,useEffect} from 'react';

import {getPersonAndCheckGroup,delPersonAndCheckGroup} from "@/api/personnelManagement.js";

import EditableFormTable from './table';

import { Input} from 'antd';

const { Search } = Input;

const PointAndCheckGroup = () => {

  let [arr,setarr] = useState([]);
  let [pages,setpages] = useState({});
  let [ifUpdateList,setifUpdateList]=useState(false);
  let [ifRender,setifRender] = useState(false);
  const [searchKey,setsearchKey] = useState('');
 
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      width:'10%',
      render: text => <a>{text}</a>,
    },
    {
      title: '查核组ID',
      dataIndex: 'checkGroupId',
      key: 'checkGroupId',
      editable: true,
    },
    {
        title: '查核组名',
        dataIndex: 'checkGroupName',
        key: 'checkGroupName',
        editable: true,
    },
    {
        title: '员工ID',
        dataIndex: 'employeeId',
        key: 'employeeId',
        editable: true,
    },
    {
        title: '员工名',
        dataIndex: 'employeeName',
        key: 'employeeName',
        editable: true,
    },
    {
        title: '是否组长',
        dataIndex: 'isManager',
        key: 'isManager',
        editable: true,
    },
  ];



  const getData = async (pageObj)=>{
    let data = await getPersonAndCheckGroup(pageObj);
    
    const renderData = data.data.data.list.map((item,index)=>{
          return {
              ...item,
              key:item['id'],
            //   editable: true,
          }
    })
    setarr(renderData);
    setpages({
        'currPage':data.data.data.currPage,
        'totalPage':data.data.data.totalPage,
        'totalCount':data.data.data.totalCount,
    });
    setifRender(false);
    setifRender(true);

  }

  const deleteCallback = (record)=>{
    delPersonAndCheckGroup([record.id]).then(res=>{
        if(res.data.msg=="success"){
                getData();
        }
    })
  }


  const paginationCallback = (obj)=>{
    const {currPage} = obj;
    getData({page:currPage,pageSize:10,keyword:searchKey});
  }

  const onSearch = (searchKey)=>{
    //  console.log({searchKey});
     setsearchKey(searchKey);
     getData({
       'keyword':searchKey?searchKey:''
     });
  }

  
  useEffect(()=>{
    getData();
  },[]);

  return ( 
    <div className="app-container">
          <h1>人员与查核组</h1>
          <div style={{display:'flex',flexDirection:'row',marginBottom:16}}>
          {/* <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16,marginRight:20 }}>
             新增查核项
          </Button> */}
          <Search style={{ width: 230 }} allowClear placeholder="请输入员工名/查核组"  onSearch={onSearch} enterButton />
          </div>
          {
             ifRender&& <EditableFormTable columns={columns}  pages={pages} paginationCallback={paginationCallback}  data={arr} deleteCallback={deleteCallback} ifUpdateList={ifUpdateList}/>
          }
    </div>
  );
}

 
export default PointAndCheckGroup;