import React, { useMemo } from 'react';
import { Collapse, List } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { Link, useRequest } from '@umijs/max';
import { queryAuditList, queryClassify } from '@/services/boom';
import PageContent from '@/components/PageContent';

const { Panel } = Collapse;

const getBackgroundColors = (index) => {
  const backgroundColors = [
    '#1ABC9C', // 深绿色
    '#3498DB', // 蓝色
    '#9B59B6', // 紫色
    '#F1C40F', // 黄色
    '#E67E22', // 橙色
    '#E74C3C', // 红色
    '#2C3E50', // 深蓝色
    '#34495E', // 深灰色
  ];

  return backgroundColors[index % backgroundColors.length];
};
const Approval = () => {
  const { data: classify, loading } = useRequest(queryClassify, {
    defaultParams: [{ c_type: 1 }],
  });
  const { data: auditList } = useRequest(queryAuditList, {
    defaultParams: [{ flow_type: 1 }],
  });

  const categories = useMemo(() => {
    if (!auditList || !classify) return [];
    let categories = {};
    auditList.forEach((item) => {
      const { classify_id } = item;
      if (!categories[classify_id]) {
        categories[classify_id] = {
          id: classify_id,
          name: classify.find((item) => item.id == classify_id)?.name,
          items: [],
        };
      }
      categories[classify_id].items.push(item);
    });
    return Object.values(categories);
  }, [classify, auditList]);

  return (
    <PageContent loading={loading}>
      {categories.length > 0 && (
        <Collapse defaultActiveKey={categories.map((category) => category.id)}>
          {categories.map((category, index) => (
            <Panel
              style={{ userSelect: 'none' }}
              header={category.name}
              key={category.id}
            >
              <List
                grid={{ gutter: 16, column: 3 }}
                dataSource={category.items}
                renderItem={(item) => (
                  <List.Item key={item.id}>
                    <Link
                      to={`/oa/detail/${item.id}`}
                      style={{ display: 'flex', alignItems: 'center' }}
                    >
                      <div
                        style={{
                          width: 48,
                          height: 48,
                          borderRadius: 8,
                          textAlign: 'center',
                          lineHeight: '48px',
                          color: '#fff',
                          fontSize: 24,
                          backgroundColor: getBackgroundColors(index),
                        }}
                      >
                        <UserOutlined />
                      </div>
                      <span
                        style={{
                          marginLeft: 12,
                          flex: 1,
                          fontSize: 18,
                          maxWidth: '100%',
                          paddingRight: 30,
                        }}
                      >
                        {item.name}
                      </span>
                    </Link>
                  </List.Item>
                )}
              ></List>
            </Panel>
          ))}
        </Collapse>
      )}
    </PageContent>
  );
};

export default Approval;
