import {
	observer
} from 'mobx-react';

@observer
export default class Detail extends React.Component {
	render() {
		const {
			store
		} = this.props, {
			firstCol,
			otherCols,
			displayType
		} = store;

		return (
			<div className='detail'>
				<div className='detail-first-col'>
					{
						firstCol.map( (row,index) => {
							if (displayType === "0") {//横向
								return (
									<div className={`detail-cell ${index === 0 ? "detail-horizontal-title" : "clear-top-border"}`} title={row}>{row}&nbsp;</div>
								)
							}else{//纵向
								return (
									<div className={`detail-cell detail-vertical-title ${index > 0 ? "clear-top-border" : ""}`} title={row}>{row}&nbsp;</div>
								)
							}
						})
					}
				</div>
				<div className='detail-other-col'>
					{
						otherCols.map( (col, oindex) => {
							return (
								<div className='other-col-item'>
									{
										col.map( (row,index) => {
											if (index === 0) {
												return (
													<div className={`detail-cell clear-left-border ${displayType === "0" ?  "detail-horizontal-title" : ""} `} title={row}>{row}&nbsp;</div>
												)
											}else{
												return (
													<div className="detail-cell clear-left-border clear-top-border" title={row}>{row}&nbsp;</div>
												)
											}
										})
									}
								</div>
							)
						})
					}
				</div>
			</div>
		);
	}
}