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

import {getDeptClassDeptPage,delDeptClassDeptPage} from "@/api/groupManage.js";

import EditableFormTable from './table';

import { Input} from 'antd';
import GroupIdentity from '../groupIdentity/groupIdentity';

const { Search } = Input;

const GroupIdentityAndGroup = () => {

  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: 'deptClassId',
      key: 'deptClassId',
      editable: true,
    },
    // {
    //     title: '部门名称',
    //     dataIndex: 'deptName',
    //     key: 'deptName',
    //     editable: true,
    // },
    {
        title: '单位分类名',
        dataIndex: 'deptClassName',
        key: 'deptClassName',
        editable: true,
    },
    {
        title: '单位ID',
        dataIndex: 'deptId',
        key: 'deptId',
        editable: true,
    },
    {
        title: '单位名',
        dataIndex: 'deptName',
        key: 'deptName',
        editable: true,
    },
    {
        title: 'delFlag',
        dataIndex: 'delFlag',
        key: 'delFlag',
        editable: true,
    },
  ];



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

  }

  const deleteCallback = (record)=>{
    // console.log('删除');
    delDeptClassDeptPage([record.id]).then(res=>{
        if(res.data.msg=="success"){
                getData();
        }
    })
  }


  const paginationCallback = (obj)=>{
    const {currPage,pageSize} = obj;
    getData({page:currPage,pageSize:pageSize,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 GroupIdentityAndGroup;