import React from 'react'; import './index.less'; import { Link } from 'react-router-dom'; import { Checkbox } from 'antd'; import Module from '../Module'; import Progress from '../Progress'; import IconButton from '../IconButton'; import Button from '../Button'; function getBuyBody(data) { const desc = data.desc || []; return ( <div className="body"> <div className="desc"> {desc.map(item => { return <div className="item">{item}</div>; })} </div> <div className="btn"> <Button size="lager" radius> 立即购买 </Button> </div> </div> ); } function getOpenBody() { return ( <div className="body"> <div className="title">请开通预习作业</div> <div className="text"> <Checkbox /> <span> 我已阅读并同意<Link to="">《千行 GMAT - Sentence Corretion 课程协议》</Link> </span> </div> <div className="btn"> <Button size="lager" radius> 立即开通 </Button> </div> </div> ); } function getIngBody(data) { const list = data.list || []; return ( <div className="body"> <div className="title">近期待完成</div> {list.length === 0 ? ( <div className="text"> <div>好棒!</div> <div>近期的作业都完成啦</div> </div> ) : ( <div className="list"> {list.map(item => { return ( <div className="item"> <div className="top"> <div className="date">{item.date}</div> <div className="action"> {item.status === 'start' && <IconButton type="start" tip="Start" />} {item.status === 'ing' && <IconButton type="continue" tip="Continue" />} {item.status === 'ing' && <IconButton type="restart" tip="Restart" />} </div> </div> <Progress progress={item.progress} /> </div> ); })} </div> )} </div> ); } function getEndBody() { return ( <div className="body"> <div className="title">课程已经结束啦</div> </div> ); } function getBody(data) { switch (data.status) { case 'buy': return getBuyBody(data); case 'open': return getOpenBody(data); case 'ing': return getIngBody(data); case 'end': return getEndBody(data); default: return ''; } } function Card(props) { const { style, data = {}, title } = props; return ( <Module style={style} className={`card ${data.status}`}> <div className="header"> {title} {data.status === 'buy' && <span className="sub-title">未购买</span>} {data.status === 'open' && <span className="sub-title">已购买</span>} </div> {getBody(data)} </Module> ); } Card.propTypes = {}; export default Card;