import React from 'react';
import { Progress } from 'antd';
import styles from './Rank.less';


class Rank extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            arr: [
                { name: '阳光北大街', num: 6.2 },
                { name: '东风中路', num: 6.2 },
                { name: '七一中路', num: 6.2 },
                { name: '长城北大街', num: 6.2 },
                { name: '龙泉路', num: 6.2 }
            ]
        }
    }


    render() {
        return (
            <div className={styles.rank}>
                <div className={styles.tit}>拥堵路段排名</div>
                {
                    this.state.arr.map((r, i) => {
                        return (<div className={styles.progress}>
                            <div className={styles.font}>
                                <div className={styles.left}>
                                    <div className={styles.imgs + ' ' + styles[`imgs${i}`]}>{i + 1}</div>
                                    <div className={styles.name}>{r.name}</div>
                                </div>
                                <div className={styles.right+ ' ' + styles[`right${i}`]}>
                                    {r.num}
                                </div>
                            </div>
                            <div className={styles.progressLine}>
                                <Progress percent={32} showInfo={false} className={styles['progress' + i] + ' ' + styles.progress} />
                            </div>
                        </div>)
                    })
                }
            </div>
        );
    }
}

export default Rank;