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

const List: React.FC<{ data: any }> = (props) => {
  const { data } = props;

  // const data = [
  //   {
  //     name: '污水井盖',
  //     number: 1523,
  //   },

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

  return (
    <div className={styles.container}>
      {
        data?.length ? (
          <>
            {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.count}</span>
                        <span className={styles.unit}>件</span>
                      </div>
                      <div>
                        <span className={styles.value}>{item.rate}</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>
              );
            })}
          </>
        ) : <EmptySpace describe="暂无数据" style={{ padding: '10% 0' }} />
      }

    </div>
  );
};

export default List;
