import React from 'react';
import './index.less';
import Assets from '@src/components/Assets';
import Module from '../Module';
import ProgressButton from '../ProgressButton';

function Panel(props) {
  const { style, list = [], col = 3, title } = props;
  return (
    <Module style={style} className="panel">
      <div className="header">
        {title}
        <Assets name="QA" svg />
      </div>
      <div className="body">
        <div className="chart-info">
          <div className="chart" />
          <div className="info">
            <div className="item">
              <div className="title">已做</div>
              <div className="data">
                <span className="text">123</span>题
              </div>
            </div>
            <div className="item">
              <div className="title">剩余</div>
              <div className="data">
                <span className="text">123</span>题
              </div>
            </div>
            <div className="item">
              <div className="title">总计</div>
              <div className="data">
                <span className="text">123</span>题
              </div>
            </div>
          </div>
        </div>
        <div className={`list col-${col}`}>
          {list.map(item => {
            return (
              <ProgressButton className="item" progress={item.progress}>
                {item.title}
              </ProgressButton>
            );
          })}
        </div>
      </div>
    </Module>
  );
}
Panel.propTypes = {};
export default Panel;