import PageContent from '@/components/PageContent';
import TabsContent from '@/components/TabsContent';
import { MandateType, OrderType } from '@/pages/TaskManage/constent';
import { getMandateList } from '@/services/TaskManage';
import { CaretLeftFilled, CaretRightFilled } from '@ant-design/icons';
import {
  connect,
  history,
  useLocation,
  useNavigate,
  useParams,
} from '@umijs/max';
import { List, Spin } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';

const MyTask = (props) => {
  const { userList, dispatch } = props;
  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([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);
      });
  }, []);

  useEffect(() => {
    if (userList.length === 0) {
      dispatch({
        type: 'taskUser/fetchUserList',
        payload: { project_id },
      });
    }
  }, []);

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

  const goTaskList = (item) => {
    navigate(
      `/center/my-task/task-list?project_id=${project_id}&mandateType=${item}${
        userID !== null ? '&user_id=' + userID : ''
      }`,
    );
  };
  const goWorkOrderList = (item) => {
    navigate(
      `/center/my-task/work-order-list?project_id=${project_id}&order_type=${item}${
        userID !== null ? '&user_id=' + userID : ''
      }`,
    );
  };

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

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

        <CaretRightFilled style={{ fontSize: '0.34rem', color: '#BCBABA' }} />
      </List.Item>
    );
  };

  const makeWorkOrderList = (item) => {
    return (
      <List.Item
        className={styles.listItem}
        onClick={() => {
          goWorkOrderList(item.value);
        }}
      >
        <List.Item.Meta
          title={<span className={styles.itemLabel}>{item.label}</span>}
        />
        <CaretRightFilled style={{ fontSize: '0.3rem', color: '#BCBABA' }} />
      </List.Item>
    );
  };

  return (
    <PageContent closeable={false}>
      <CaretLeftFilled
        style={{
          fontSize: '0.3rem',
          cursor: 'pointer',
          marginRight: '0.15rem',
          color: '#0139F1',
          position: 'absolute',
          left: '0.5rem',
          top: '0.5rem',
        }}
        onClick={() => history.back()}
      />
      <TabsContent
        defaultActiveKey={tab}
        onChange={onTabChange}
        items={[
          {
            label: `我的任务`,
            key: '1',
            children: (
              <div className={styles.container}>
                <Spin spinning={loading}>
                  <List
                    className={styles.taskList}
                    bordered
                    itemLayout="horizontal"
                    dataSource={MandateType}
                    renderItem={makeTaskList}
                    pagination={false}
                  />
                </Spin>
              </div>
            ),
          },
          {
            label: `我的工单`,
            key: '2',
            children: (
              <div className={styles.container}>
                <Spin spinning={false}>
                  <List
                    className={styles.taskList}
                    bordered
                    itemLayout="horizontal"
                    dataSource={OrderType}
                    renderItem={makeWorkOrderList}
                    pagination={false}
                  />
                </Spin>
              </div>
            ),
          },
        ]}
      />
    </PageContent>
  );
};

export default connect(({ taskUser }) => {
  return {
    userList: taskUser.userList,
  };
})(MyTask);