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

import {checkPointAndArticlePage,delCheckPointAndArticle} from "@/api/checkPointManage.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 columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      width:'10%',
      render: text => <a>{text}</a>,
    },
    {
      title: '条文条款名',
      dataIndex: 'articleName',
      key: 'articleName',
      editable: true,
    },
    {
        title: '条文条款ID',
        dataIndex: 'articleId',
        key: 'articleId',
        editable: true,
    },
    {
        title: '查核要点ID',
        dataIndex: 'articleId',
        key: 'articleId',
        editable: true,
    },
    {
        title: '查核要点',
        dataIndex: 'checkPointName',
        key: 'checkPointName',
        editable: true,
    },
  ];



  const getData = async (pageObj)=>{
    let data = await checkPointAndArticlePage(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)=>{
    delCheckPointAndArticle([record.id]).then(res=>{
        if(res.data.msg=="success"){
                getData();
        }
    })
  }


  const paginationCallback = (obj)=>{
    const {currPage} = obj;
    getData({page:currPage,pageSize:10});
  }
  
  const onSearch = (searchKey)=>{
    //  console.log({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;