import React from 'react'; import { Tooltip } from 'antd'; import './index.less'; import Assets from '@src/components/Assets'; import PieChart from '@src/components/PieChart'; import { formatDate } from '@src/services/Tools'; import Module from '../Module'; import ProgressButton from '../ProgressButton'; import Button from '../Button'; function makePie(value, text, subtext) { return { title: { text, textAlign: 'center', textVerticalAlign: 'middle', subtext, top: '28%', left: '48%', }, // value < 50 ? '#f19057' : color: ['#6966fb', '#f7f7f7'], series: [ { type: 'pie', radius: ['90%', '100%'], label: { show: false, }, data: [value, 100 - value], }, ], }; } 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"> <PieChart option={makePie(data.pieValue, data.pieText, data.pieSubText)} width={110} height={110} /> <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, onOpen } = 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 onClick={() => onOpen && onOpen()}> 立即开通 </Button> </div> </Module> ); } export function BuyPanel(props) { const { style, message, title, onBuy } = 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} onClick={() => onBuy && onBuy()}> 立即购买 </Button> </div> </Module> ); } export function SmallPanel(props) { const { style, title, lock, data = {}, onClick } = props; const { useEndTime, needService } = data; return ( <Module style={style} className="panel small-panel"> <div className="header"> <span>{title}</span> {lock && <Assets name="lock" />} </div> <div className="body" onClick={() => onClick && onClick()}> <div className="chart-info"> <PieChart option={makePie(data.pieValue, data.pieText, data.pieSubText)} width={110} height={110} /> <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> ); })} {needService && <div className="date">有效期至:{useEndTime && formatDate(useEndTime, 'YYYY-MM-DD')}</div>} </div> </div> </div> </Module> ); } export function SmallWaitPanel(props) { const { style, title, lock, data = {}, onOpen } = props; const { endTime } = data; return ( <Module style={style} className="panel small-wait-panel"> <div className="header"> <span>{title}</span> {lock && <Assets name="lock" />} </div> <div className="body"> <div className="title">请于{endTime && formatDate(endTime, 'YYYY-MM-DD')}前开通</div> <div className="btn"> <Button size="lager" width={120} radius onClick={() => onOpen && onOpen()}> 立即开通 </Button> </div> </div> </Module> ); } export function SmallBuyPanel(props) { const { style, title, lock, onBuy } = props; return ( <Module style={style} className="panel small-buy-panel"> <div className="header"> <span>{title}</span> {lock && <Assets name="lock" />} </div> <div className="body"> <Assets name="banner_1" /> <Button radius size="small" width={80} onClick={() => onBuy && onBuy()}> 立即购买 </Button> </div> </Module> ); }