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

function Panel(props) {
  const { style, message, data = {}, col = 3, title, onClick } = props;
  return (
    <Module style={style} className="panel">
      <div className="header">
        <span>{title}</span>
        <Tooltip title={message} trigger='click'><Assets name="QA" svg /></Tooltip>
      </div>
      <div className="body">
        <div className="chart-info">
          <div className="chart" />
          <div className="info">
            {(data.info || []).map(row => {
              return <div className="item">
                <div className="title">{row.title}</div>
                <div className="data">
                  <span className="text">{row.number}</span>{row.unit}
                </div>
              </div>;
            })}
          </div>
        </div>
        <div className={`list col-${col}`}>
          {(data.children || []).map(item => {
            return (
              <ProgressButton className="item" progress={item.progress} onClick={() => {
                if (onClick) onClick(item);
              }}>
                {item.title}
              </ProgressButton>
            );
          })}
        </div>
      </div>
    </Module>
  );
}
Panel.propTypes = {};
export default Panel;