import React, { useCallback, useEffect, useState } from 'react';
import { Input, Button, Form } from 'antd';
import ItemTaskManage from '../components/itemTaskManage';
import StatusNav from '../../components/statusNav';
import { approveArr, main_web_site_url } from '../static';
import { getTaskAdminList, getTaskCategory } from '../api';
import '../index.scss';

export default Form.create()(({ form, showNotification, match, history }) => {
  const publishMode = match.params.publishMode;

  const { getFieldDecorator, validateFields, setFieldsValue, getFieldsValue } = form;
  const [categoryArr, setCategoryArr] = useState([]);

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

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


  useEffect(() => {
    getTaskCategory().then(data => {
      if (data) {
        let categoryArr = [];
        for (const item of data) {
          categoryArr[item.id] = item.name;
        }
        setCategoryArr(categoryArr);
      }
    });
  }, []);

  useEffect(() => {
    const params = {
      ...searchObj,
      statusString,
      orderBy: 'createdAtDesc',
      curPage,
      pageSize: 10,
      publishMode: publishMode || 1
    };
    setLoading(true);
    getTaskAdminList(params).then(data => {
      if (data) {
        setTaskList(data.rows);
        setTotal(data.total);
      }
      setLoading(false);
    })
  }, [reload, statusString, 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) => {
    setStatusString(option.dicItemCode.toString() || '2,3,4,5,6,7,8');
    setCurPage(1);
  }, []);

  function changeApprove(approve) {
    setApprove(approve);
    setCurPage(1);
    if (approve === 1) {
      setStatusString('1');
    } else {
      setStatusString('2,3,4,5,6,7,8');
    }
  }

  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>
          <Button className="mr10" type="primary" onClick={() => { window.open(`${main_web_site_url}/admin/tasks/activity_managed_tasks.zip?review_status=reviewing&amp;status_value=0`) }}>导出</Button>
        </div>
      </div>


      <div className="center-content">

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

      </div>


    </div>
  )
}
)