import { Flex, Progress, Space } from 'antd';
import React from 'react';
import styles from './index.less';

const List: React.FC = () => {
  const data = [
    {
      name: '污水井盖',
      number: 1523,
    },

    {
      name: '公安井盖（天网井盖）',
      number: 80,
    },
    {
      name: '非机动车停放点',
      number: 80,
    },
  ];

  return (
    <div className={styles.container}>
      {data.map((item, index) => {
        return (
          <div key={index} className={styles.listItem}>
            <Flex justify="space-between">
              <Space>
                <div className={styles.index}>Top{index + 1}</div>
                <div className={styles.title}>{item.name}</div>
              </Space>
              <Space>
                <div>
                  <span className={styles.value}>{item.number}</span>
                  <span className={styles.unit}>件</span>
                </div>
                <div>
                  <span className={styles.value}>{item.number}</span>
                  <span className={styles.unit}>%</span>
                </div>
              </Space>
            </Flex>
            <Progress
              showInfo={false}
              percent={Number(80)}
              status="active"
              size={{ height: 10 }}
              trailColor="rgb(144, 205, 229)"
              strokeColor={{
                from: 'rgb(121, 255, 209)',
                to: 'rgb(0, 185, 255)',
              }}
            />
          </div>
        );
      })}
    </div>
  );
};

export default List;
