import React, { useCallback, forwardRef, useEffect, useState } from 'react';
import { Input, Button, Form } from 'antd';
import ItemPayProof from '../components/itemPayProof';

// import StatusNav from '../../components/statusNav';
import { agreementArr } from '../static';
import { uploadPayProofList } from '../api';
import '../index.scss';

agreementArr.splice(1,1);
export default Form.create()(({ current_user, form, showNotification, match, history }) => {
  const { getFieldDecorator, validateFields, setFieldsValue, } = form;

  const [approve, setApprove] = useState(1);
  const [loading, setLoading] = useState(false);
  const [searchObj, setSearchObj] = useState({});
  const [curPage, setCurPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [taskList, setTaskList] = useState([]);

  const [reload, setReload] = useState(0);

  useEffect(() => {
    const params = {
      ...searchObj,
      status:approve,
      type:'',
      currentPage:curPage,
      pageSize: 10,
    };
    setLoading(true);
    uploadPayProofList(params).then(data => {
      if (data) {
        setTaskList(data.rows);
        setTotal(data.total);
      }
      setLoading(false);
    })
  }, [reload, approve, curPage, searchObj]);


  const helper = useCallback(
    (name, rules, widget) => (
      <Form.Item>
        {getFieldDecorator(name, { rules, validateFirst: true, })(widget)}
      </Form.Item>
    ), []);


  function onSearch() {
    validateFields((err, values) => {
      if (!err) {
        setSearchObj(values);
      }
    });
  }


  function changeApprove(approve) {
    setApprove(approve);
    setCurPage(1);
  }

  function clearSearch() {
    setFieldsValue({
      numberInput: '',
      nameInput: '',
      enterpriseNameInput: ''
    });
    setSearchObj({});
  }

  const reloadList = useCallback(() => {
    setReload(Math.random());
  }, [])

  return (
    <div className="centerbox task-manage">
      

      <div className="center-screen" >
        <div className="center-left-but">
          <Button className="circle-button" type={approve === 1 ? 'primary' : ''} onClick={() => { changeApprove(1) }}>待上传</Button>
          <Button className="circle-button" type={approve === 2 ? 'primary' : ''} onClick={() => { changeApprove(2) }}>已上传</Button>
        </div>

        <div className="center-right-but">
          {helper(
            "numberInput",
            [{ max: 20, message: '长度不能超过20个字符' }],
            <Input
              placeholder="输入任务编号进行检索"
            />
          )}

          {helper(
            "nameInput",
            [{ max: 20, message: '长度不能超过20个字符' }],
            <Input
              placeholder="输入任务名称进行检索"
            />
          )}

          {helper(
            "enterpriseNameInput",
            [{ max: 20, message: '长度不能超过20个字符' }],
            <Input
              placeholder="输入发布主体名称进行检索"
            />
          )}

          <Button className="mr10" type="primary" onClick={onSearch}>搜索</Button>
          <Button className="mr10" type="" onClick={clearSearch}>清除</Button>

        </div>
      </div>


      <div className="center-content">

       
        <ItemPayProof
          list={taskList}
          curPage={curPage}
          total={total}
          changePage={(page) => { setCurPage(page) }}
          loading={loading}
          showNotification={showNotification}
          reloadList={reloadList}
        />

      </div>


    </div>
  )
}
)