import PageContent from '@/components/PageContent';
import TabsContent from '@/components/TabsContent';
import { useNavigate, useParams } from '@umijs/max';
import { Space } from 'antd';
import styles from './index.less';
const img = require('@/assets/deviceManager/device01.png');
const chartIcon = require('@/assets/deviceManager/chartIcon.png');
const DeviceManager = () => {
  const { projectId } = useParams();

  return (
    <PageContent style={{ backgroundColor: 'gray' }}>
      <TabsContent
        defaultActiveKey="1"
        onChange={() => {}}
        items={[
          {
            label: `视频监控`,
            key: '1',
            children: <Video projectId={projectId} />,
          },
          {
            label: `门禁`,
            key: '2',
            children: <Door />,
          },
        ]}
      />
    </PageContent>
  );
};
const Video = ({ projectId }) => {
  return (
    <Space direction="vertical" className={styles.sparePart}>
      <div className={`card-box ${styles.titleContent}`}>
        <img className={styles.img} src={img} />
        <div>
          <div className={styles.num}>{0}</div>
          <div>在库数量（个）</div>
        </div>
      </div>
    </Space>
  );
};
const Door = () => {
  const navigate = useNavigate();

  return <div>8888</div>;
};

export default DeviceManager;