import PageContent from '@/components/PageContent';
import TabsContent from '@/components/TabsContent';
import styles from '@/pages/TaskManage/index.less';
import { getMandateList } from '@/services/TaskManage';
import { RightOutlined } from '@ant-design/icons';
import { useLocation, useParams } from '@umijs/max';
import { List, Spin } from 'antd';
import { BaseOptionType } from 'rc-select/es/Select';
import { useEffect, useState } from 'react';
import { useNavigate } from 'umi';
import { MandateType, OrderType } from './constent';

const TaskManage = () => {
  const { projectID } = useParams();
  const project_id = Number(projectID === '' ? '0' : projectID);

  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const userID = queryParams.get('user_id');

  const navigate = useNavigate();

  const [mandateCount, setMandateCount] = useState<number[]>([0, 0, 0]);
  const [loading, setLoading] = useState(false);
  const [tab, setTab] = useState(localStorage.taskTab || '1');

  useEffect(() => {
    const requests = [];
    for (let i = 0; i < 4; i++) {
      requests.push(
        getMandateList({
          project_id,
          pageSize: 1,
          currentPage: 1,
          mandate_type: i + 1,
          responsible_people: userID !== null ? Number(userID) : '',
        }),
      );
    }
    setLoading(true);
    Promise.all(requests)
      .then((resList) => {
        if (resList.filter((item) => item.code !== 200).length) {
          throw new Error('请求错误');
        }
        const typeCount = [0, 0, 0, 0];
        resList.forEach((item, index) => {
          typeCount[index] = item.data.pagination?.total;
        });
        setMandateCount(typeCount);
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  const goTaskList = (item: number) => {
    navigate(`/task-manage/list?project_id=${project_id}&mandateType=${item}`);
  };
  const goWorkOrderList = (item: number) => {
    navigate(
      `/task-manage/work-order/list?project_id=${project_id}&order_type=${item}`,
    );
  };

  const makeTaskList = (item: BaseOptionType, index: number) => {
    return (
      <List.Item
        className={styles.listItem}
        onClick={() => {
          goTaskList(item.value);
        }}
      >
        <List.Item.Meta
          title={<span className={styles.fontS28}>{item.label}</span>}
        />

        <div className={styles.itemCount}>
          <div className={styles.countNumber}>{mandateCount[index]}</div>
          <div className={styles.fontS22}>任务数量</div>
        </div>

        <RightOutlined />
      </List.Item>
    );
  };

  const makeWorkOrderList = (item: BaseOptionType) => {
    return (
      <List.Item
        className={styles.listItem}
        onClick={() => {
          goWorkOrderList(item.value);
        }}
      >
        <List.Item.Meta
          title={<span className={styles.fontS28}>{item.label}</span>}
        />
        {/* <div className={styles.itemCount}>
          <div className={styles.countNumber}>{mandateCount[index]}</div>
          <div className={styles.fontS22}>任务数量</div>
        </div> */}
        <RightOutlined />
      </List.Item>
    );
  };

  const onTabChange = (key: string) => {
    setTab(key);
    localStorage.setItem('taskTab', key);
  };

  return (
    <PageContent tabs>
      <TabsContent
        defaultActiveKey={tab}
        onChange={onTabChange}
        items={[
          {
            label: `${userID === null ? '任务管理' : '我的任务'}`,
            key: '1',
            children: (
              <Spin spinning={loading}>
                <List
                  className={styles.taskList}
                  bordered
                  itemLayout="horizontal"
                  dataSource={MandateType}
                  renderItem={makeTaskList}
                  pagination={false}
                />
              </Spin>
            ),
          },
          {
            label: `${userID === null ? '工单管理' : '我的工单'}`,
            key: '2',
            children: (
              <Spin spinning={loading}>
                <List
                  className={styles.taskList}
                  bordered
                  itemLayout="horizontal"
                  dataSource={OrderType}
                  renderItem={makeWorkOrderList}
                  pagination={false}
                />
              </Spin>
            ),
          },
        ]}
      />
    </PageContent>
  );
};

export default TaskManage;