import {
	observer
} from 'mobx-react';

@observer
export default class Detail extends React.Component {
	getDetailItemProps = (rowIndex, colIndex) => {
		const {
			store
		} = this.props, {
			displayType,
			longTxtColIndexs,
			cols,
		} = store;

		let str = "";

		if ( 
			(displayType === '1' && colIndex === 0) || 
			(displayType === '0' && rowIndex === 0)
		) {
			str = "greyBg";
		}

		if (cols > 2 && longTxtColIndexs.includes(colIndex)) {
			str = str ? `${str} large-width` : "large-width";
		}

		return {
			className: str
		}

	}

	render() {
		const {
			store
		} = this.props, {
			data,
			rowDatas,
			colDatas,
			displayType,
		} = store;

		const sliceDatas = (displayType === "0") ? colDatas : rowDatas;
		
		return (
			<div className="detail">
				{
					data.map( (item,rowIndex) => {
						if ( (displayType === "1") && sliceDatas[rowIndex].every(data => !data)) {//纵向
					 		return null;
					 	}
						return (
							<div className="detail-item">
								{
								  item.map((val, colIndex) => {
									  	if ((displayType === "0") && sliceDatas[colIndex].every(data => !data)) {//横向
									 		return null;
									 	}
										const className = this.getDetailItemProps(rowIndex, colIndex).className;

										return <div className={className}>{className.includes("greyBg") ? val : <p>{val}</p>}</div>
									})
								}
							</div>
						)
					})
				}
			</div>
		)
	}
}