import { memo, useMemo } from 'react';
import { useGlobalModalServices } from '../../provider';
import styles from './index.less';
import BlueTable from '@/components/BlueTable';

const EquipResource = () => {
  const { dispatch } = useGlobalModalServices();

  const items = useMemo(() => {
    return [
      {
        key: '2',
        name: '视频执法车',
        count: 456,
        unit: '辆',
        icon: require('@/assets/images/administPunish/zfcIc.png'),
      },
      {
        key: '1',
        name: '无人机',
        count: 12,
        unit: '架',
        icon: require('@/assets/images/administPunish/wrjIc.png'),
      },
      {
        key: '3',
        name: '5G执法仪',
        count: 456,
        unit: '台',
        icon: require('@/assets/images/administPunish/zfyIc.png'),
      },
      {
        key: '4',
        name: '便携式打印机',
        count: 456,
        unit: '台',
        icon: require('@/assets/images/administPunish/dyjIc.png'),
      },
      {
        key: '5',
        name: '800M对讲机',
        count: 456,
        unit: '台',
        icon: require('@/assets/images/administPunish/djjIc.png'),
      },
    ];
  }, []);
  const columns = useMemo(() => {
    return [
      {
        title: '支队',
        dataIndex: 'wh',
        key: 'descgldw',
        width: 150,
        ellipsis: true,
      },
      {
        title: '视频执法车辆（辆）',
        dataIndex: 'type',
        key: 'descgldw',
        width: 150,
        ellipsis: true,
      },
      {
        title: '无人机（架）',
        dataIndex: 'ss',
        key: 'descgldw',
        width: 100,
        ellipsis: true,
      },
      {
        title: '5G执法记录仪',
        dataIndex: 'rq',
        key: 'descgldw',
        width: 120,
        ellipsis: true,
      },
      {
        title: '便携式打印机（台）',
        dataIndex: 'rq',
        key: 'descgldw',
        width: 150,
        ellipsis: true,
      },
      {
        title: '800对讲机（台）',
        dataIndex: 'rq',
        key: 'descgldw',
        width: 150,
        ellipsis: true,
      },
    ];
  }, []);
  return (
    <div className={styles.container}>
      <div className={styles.infoWarp}>
        {items?.map((item) => {
          return (
            <div className={styles.items}>
              <img src={item.icon} alt="" className={styles.icon} />
              <div className={styles.rw}>
                <div className={styles.name}>{item?.name}</div>
                <div>
                  <span className={styles.count}>{item?.count}</span>
                  <span className={styles.unit}>{item.unit}</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <div className={styles.distr}>
        <div className={styles.title}>装备资源分配情况</div>
        <BlueTable
          //   dataSource={tableData?.data?.data?.records}
          dataSource={[
            {
              wh: '523655411223',
              type: '扬尘类',
              ss: '80x公司在天府新区正兴街道云龙路保利XXXXXXX天府和颂80x公司在天府新区正兴街道云龙路保利XXXXXXX天府和颂',
              rq: '2023-03-01',
            },
          ]}
          columns={columns}
          scroll={{  y: 550 }}
          pagination={false}
        />
      </div>
    </div>
  );
};
export default memo(EquipResource);
