import React, { useCallback, forwardRef, useEffect, useState } from 'react';
import { Input, Button, Form } from 'antd';

import ItemProofManage from '../components/itemProofManage';
import StatusNav from '../../components/statusNav';
import { proofArr } from '../static';
import { proofList, } from '../api';
import '../index.scss';

const proofArrCheck = proofArr.slice(0, 2);
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 [proofStatusString, setProofStatusString] = useState('2');
  const [curPage, setCurPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [taskList, setTaskList] = useState([]);

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

  useEffect(() => {
    const params = {
      ...searchObj,
      proofStatusString,
      orderBy: 'createdAtDesc',
      curPage,
      pageSize: 10,
    };
    setLoading(true);
    proofList(params).then(data => {
      if (data) {
        setTaskList(data.rows);
        setTotal(data.total);
      }
      setLoading(false);
    })
  }, [reload, proofStatusString, 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);
      }
    });
  }

  const changeOptionId = useCallback((option) => {
    setProofStatusString(option.dicItemCode.toString() || '0,1');
    setCurPage(1);
  }, []);

  function changeApprove(approve) {
    setApprove(approve);
    setCurPage(1);
    if (approve === 1) {
      setProofStatusString('2');
    } else {
      setProofStatusString('0,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">

        {
          approve === 2 && <StatusNav
            key={'approveStatus'}
            type={'approveStatus'}
            options={proofArrCheck}
            changeOptionId={changeOptionId}
          />
        }
        <ItemProofManage
          list={taskList}
          curPage={curPage}
          total={total}
          changePage={(page) => { setCurPage(page) }}
          loading={loading}
          showNotification={showNotification}
          reloadList={reloadList}
        />

      </div>


    </div>
  )
}
)