import React, { useEffect, useState } from 'react';
import { Tabs, List } from 'antd-mobile/es';
import styles from './index.less';
import { gettaskList } from '@/services/tasklist';

const TaskList: React.FC = () => {
  const [tabsArr, setTabsArr] = useState([] as any);
  const [selectKey, setKey] = useState('0');
  const [codename, setCodename] = useState(null);

  useEffect(() => {
    const searchParams = new URLSearchParams(window.location.search);
    const code = searchParams.get('code');
    setCodename(code);
    onLoadGetTaskList();
  }, []);

  //加载列表数据
  const onLoadGetTaskList = async () => {
    //全部
    const all: { targetUser: any; url: any; relation: any }[] = [];
    //已完成
    const finish: { targetUser: any; url: any; relation: any }[] = [];
    //未完成
    const unfinish: { targetUser: any; url: any; relation: any }[] = [];

    const res = await gettaskList(codename);
    if (res) {
      res.data?.map((item: any) => {
        all.push({
          targetUser: item.targetUser,
          url: item.url,
          relation: item.relation,
        });
        if (item.status === '未完成') {
          unfinish.push({
            targetUser: item.targetUser,
            url: item.url,
            relation: item.relation,
          });
        } else if (item.status === '已完成') {
          finish.push({
            targetUser: item.targetUser,
            url: item.url,
            relation: item.relation,
          });
        }
      });
      const tabsarr = [
        { key: '0', value: '全部', arr: all },
        {
          key: '1',
          value: '已完成',
          arr: finish,
        },
        {
          key: '2',
          value: '未完成',
          arr: unfinish,
        },
      ];
      const newArr = JSON.stringify(tabsarr);
      setTabsArr(JSON.parse(newArr));
    }
  };

  const hrefURL = (url: string) => {
    if (codename) {
      localStorage.setItem('taskcode', codename);
    }
    window.location.href = url;
  };
  return (
    <>
      <div className={styles.title}>我的评价</div>
      <Tabs
        className={styles.tabspadding}
        activeKey={selectKey}
        onChange={(e) => {
          setKey(e);
        }}
      >
        {tabsArr.map(
          (item: {
            value: string;
            arr: {
              length: string;
              map: (
                arg0: (itemarr: any, index: any) => JSX.Element,
              ) =>
                | boolean
                | React.ReactChild
                | React.ReactFragment
                | React.ReactPortal
                | null
                | undefined;
            };
            key: React.Key | null | undefined;
          }) => {
            return (
              <Tabs.Tab
                title={item.value + '(' + item.arr.length + ')'}
                key={item.key}
              >
                <List className={styles.admlist}>
                  <div className={styles.listtitle}>
                    <span>被评价者姓名</span>
                    <span className={styles.titlespan}>你的角色</span>
                  </div>
                  {item.arr.map((itemarr, index) => {
                    return (
                      <List.Item
                        onClick={() => {
                          hrefURL(itemarr.url);
                        }}
                        extra={itemarr.relation}
                        key={index}
                      >
                        {itemarr.targetUser}
                      </List.Item>
                    );
                  })}
                </List>
              </Tabs.Tab>
            );
          },
        )}
      </Tabs>
    </>
  );
};
export default TaskList;
