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

import ItemDelayManage from '../components/itemDelayManage';
import StatusNav from '../../components/statusNav';
import { delayTaskArr, delayDealArr } from '../static';
import { delayList, } from '../api';
import '../index.scss';

const { Search } = Input;

export default ({ current_user, showNotification, history }) => {
  const [operationStatus, setOperationStatus] = useState(0);
  const [publishMode, setPublishMode] = useState('');
  const [cancelStatus, setCancelStatus] = useState('');

  const [loading, setLoading] = useState(false);
  const [searchInput, setSearchInput] = useState('');
  const [searchInputCurrent, setSearchInputCurrent] = useState('');
  const [status, setStatus] = useState('');
  const [curPage, setCurPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [taskList, setTaskList] = useState([]);

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

  useEffect(() => {
    const params = {
      searchInput:searchInputCurrent,
      operationStatus,
      status,
      curPage,
      pageSize: 10,
      publishMode,
      cancelStatus,
    };
    setLoading(true);
    delayList(params).then(data => {
      if (data) {
        setTaskList(data.rows);
        setTotal(data.total);
      }
      setLoading(false);
    })
  }, [reload, searchInput, operationStatus, publishMode, cancelStatus, status, curPage,]);


  const changeTaskStatus = useCallback((option) => {
    setStatus(option.dicItemCode.toString() || '');
    setCurPage(1);
    setCancelStatus('');
  }, []);

  const changeDealStatus = useCallback((option) => {
    setCancelStatus(option.dicItemCode.toString() || '');
    setCurPage(1);
    setStatus('');
  }, []);

  function changeOperationStatus(operationStatus) {
    setOperationStatus(operationStatus);
    setCurPage(1);
    setStatus('');
  }

  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={operationStatus === 0 ? 'primary' : ''} onClick={() => { changeOperationStatus(0) }}>待处理</Button>
          <Button className="circle-button" type={operationStatus === 1 ? 'primary' : ''} onClick={() => { changeOperationStatus(1) }}>已处理</Button>
        </div>

        <div className="center-right-but">
          <Search
            maxLength={20}
            style={{ width: "300px" }}
            placeholder="请输入任务编号/任务名称关键字"
            onChange={(e) => setSearchInputCurrent(e.target.value)}
            onSearch={(value) => { setSearchInput(value); setCurPage(1); }}
          />
        </div>
      </div>

      <div className="center-screen flex-column" >
        <div className="center-left-but">
          <Button className="circle-button" type={publishMode === '' ? 'primary' : ''} onClick={() => { setPublishMode('') }}>全部</Button>
          <Button className="circle-button" type={publishMode === 1 ? 'primary' : ''} onClick={() => { setPublishMode(1) }}>统筹任务</Button>
          <Button className="circle-button" type={publishMode === 0 ? 'primary' : ''} onClick={() => { setPublishMode(0) }}>自主提交任务</Button>
        </div>

        {
          operationStatus === 0 ? <StatusNav
            key={'status'}
            type={'status'}
            options={delayTaskArr}
            changeOptionId={changeTaskStatus}
          /> : <StatusNav
            key={'dealStatus'}
            type={'dealStatus'}
            options={delayDealArr}
            changeOptionId={changeDealStatus}
          />
        }
      </div>

      <div className="center-content">
        <ItemDelayManage
          list={taskList}
          curPage={curPage}
          total={total}
          changePage={(page) => { setCurPage(page) }}
          loading={loading}
          showNotification={showNotification}
          reloadList={reloadList}
        />

      </div>


    </div>
  )
}
