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';

export default function Panel(props) {
  const { style, message, data = {}, col = 3, title, onClick } = props;
  return (
    <Module style={style} className="panel">
      <div className="header">
        <span>{title}</span>
        {message && (
          <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>
              );
            })}
            {(data.desc || []).length > 0 && (
              <div className="desc-wrapper">
                {(data.desc || []).map(row => {
                  return <div className="desc">{row}</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>
  );
}
export function WaitPanel(props) {
  const { style, message, data = {}, col = 3, title, onClick } = props;
  return (
    <Module style={style} className="panel wait-panel">
      <div className="header">
        <span>{title}</span>
        {message && (
          <Tooltip title={message} trigger="click">
            <Assets className="qa" name="QA" svg />
          </Tooltip>
        )}
      </div>
      <div className="body">
        <div className="chart-info">
          <div className="info">
            <div className="text">您还未开通本月机经</div>
            {(data.desc || []).length > 0 && (
              <div className="desc-wrapper">
                {(data.desc || []).map(row => {
                  return <div className="desc">{row}</div>;
                })}
              </div>
            )}
            {(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>

        <Button size="lager" radius>
          立即开通
        </Button>
      </div>
    </Module>
  );
}
export function BuyPanel(props) {
  const { style, message, title } = props;
  return (
    <Module style={style} className="panel buy-panel">
      <div className="header">
        <span>{title}</span>
        {message && (
          <Tooltip title={message} trigger="click">
            <Assets className="qa" name="QA" svg />
          </Tooltip>
        )}
      </div>
      <div className="body">
        <Assets name="banner" />
        <div className="text">您还未购买本月机经</div>
        <Button radius size="small" width={80}>
          立即购买
        </Button>
      </div>
    </Module>
  );
}

export function SmallPanel(props) {
  const { style, title, lock, data = {} } = props;
  return (
    <Module style={style} className="panel small-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 SmallWaitPanel(props) {
  const { style, title } = props;
  return (
    <Module style={style} className="panel small-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 SmallBuyPanel(props) {
  const { style, title } = props;
  return (
    <Module style={style} className="panel small-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>
  );
}