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';
import Button from '../Button';

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 className="qa" 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;

export function TotalPanel(props) {
  const { style, title, lock, data = {} } = props;
  return (
    <Module style={style} className="panel total-panel">
      <div className="header">
        <span>{title}</span>
        {lock && <Assets name="lock" />}
      </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 className="date">有效期至：2019-11-13</div>
          </div>
        </div>
      </div>
    </Module>
  );
}

export function WaitPanel(props) {
  const { style, title } = props;
  return (
    <Module style={style} className="panel wait-panel">
      <div className="header">
        <span>{title}</span>
        <Assets name="lock" />
      </div>
      <div className="body">
        <div className="title">请于20190-07-05前开通</div>
        <div className="btn">
          <Button size="lager" width={120} radius>
            立即开通
          </Button>
        </div>
      </div>
    </Module>
  );
}

export function BuyPanel(props) {
  const { style, title } = props;
  return (
    <Module style={style} className="panel buy-panel">
      <div className="header">
        <span>{title}</span>
        <Assets name="lock" />
      </div>
      <div className="body">
        <Assets name="banner_1" />
        <Button radius size="small" width={80}>
          立即购买
        </Button>
      </div>
    </Module>
  );
}