import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import { RightOutlined } from '@ant-design/icons';
import { useNavigate, useParams, useRequest } from '@umijs/max';
import { Space, Spin } from 'antd';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import { PageType } from './index';
import styles from './index.less';
const spareIcon = require('@/assets/deviceManager/spareIcon.png');

const SparePart = () => {
  const { projectId } = useParams();
  const navigate = useNavigate();
  const year = dayjs().format('YYYY');
  const currentMonth = dayjs().format('MM');
  const defaultParams = {
    project_id: Number(projectId),
    month: Number(currentMonth),
    year: Number(year),
  };
  //请求备品列表
  const { data, loading } = useRequest(() => queryMainChartList(defaultParams));

  const changePage = (type) => {
    navigate(`/device/detail/${projectId}/${type}`);
    // 设置默认显示tab为备品管理
    localStorage.deviceTab = '2';
  };

  const handleTotalPage = () => {
    navigate(`/device/storage/${projectId}`);
    // 设置默认显示tab为备品管理
    localStorage.deviceTab = '2';
  };

  const list = useMemo(() => {
    const result = [
      {
        title: '基础库存',
        type: PageType.base,
      },
      {
        title: '入库数量',
        type: PageType.in,
        num: data?.in_amount || 0,
      },
      {
        title: '出库数量',
        type: PageType.out,
        num: data?.out_amount || 0,
      },
      {
        title: '报废数量',
        type: PageType.scrap,
        num: data?.scrap_amount || 0,
      },
      {
        title: '报警数量',
        type: PageType.warning,
        num: data?.warning_stat || 0,
      },
    ];
    return result;
  }, [data]);
  return (
    <PageContent closeable={false}>
      <PageTitle returnable>备品详情</PageTitle>
      <Spin spinning={loading}>
        <div className="content-tab">
          <Space direction="vertical" size={16} className={styles.sparePart}>
            <div className={styles.titleContent}>
              <img className={styles.img} src={spareIcon} />
              <div>
                <div className="value-number">{data?.on_amount || 0}</div>
                <div className={styles.text}>在库数量（个）</div>
              </div>
              {/* <div
                onClick={handleTotalPage}
                className={styles.iconFundFilled}
              ></div> */}
            </div>
            {list.map((item) => (
              <div
                className={`card-box ${styles.cardItem}`}
                onClick={() => changePage(item.type)}
              >
                <span className={styles.spareText}>{item.title}</span>
                <Space size={30}>
                  {/* <span className={styles.spareText}>{item.num}个</span> */}
                  <RightOutlined style={{ fontSize: '0.28rem' }} />
                </Space>
              </div>
            ))}
          </Space>
        </div>
      </Spin>
    </PageContent>
  );
};

export default SparePart;