import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaLocaleProvider,
} from 'ecCom';
import {
	Button
} from 'antd';
import {addContentPath} from '../../util/index.js'
import {i18n} from '../../public/i18n.js'
const getLabel = WeaLocaleProvider.getLabel;

const Status = props => {
	const {
		isOpen,
		handleClick
	} = props;

	return (
		<div className='lp-basic-right-status'>
			<span className='lp-basic-right-status-left wea-f14'>
				<b>{`${getLabel('507093','分级保护')} : `}</b>
			</span>
			<span className='lp-basic-right-status-mid wea-f14' style={{color:isOpen && '#2DB7F5'}}>
				<b>{
					isOpen ? getLabel('387099','已启用'): getLabel('32386','未启用')
				}</b>
			</span>
			<span className='lp-basic-right-status-right'>{
				!isOpen &&  <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5s4zha`} type="primary" onClick={handleClick}>{getLabel('31676','启用')}</Button>
			}</span>
		</div>
	)
}

const Description = props => {
	const {
		description
	} = props;

	return (
		<div>{
			description.map((desc,index) => <p>{(index > 0) ? `${index}. ${desc}` : `${desc.replace("?","•")}`}</p>)
		}</div>
	)
}

@inject('hrmLevelProtection')
@observer
export default class BasicInfo extends React.Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		const {
			hrmLevelProtection: store
		} = this.props;

		store.getBasicInfo();
	}

	render() {
		const {
			hrmLevelProtection: store
		} = this.props;
		const {
			basicInfo,
			IMGURL,
			handleOpenBtnClick,
			isCrc,
			crcDescription,
			handleTamper,
		} = store, {
			description,
			isOpenClassification,
		} = basicInfo;

		return (
			<div className='lp-basic'>
				<div className='lp-basic-left'>
					<img src={addContentPath(IMGURL)} alt='' />
				</div>
				<div className='lp-basic-right'>
					<Status ecId={`${this && this.props && this.props.ecId || ''}_Status@ymrrmb`} 
						isOpen={isOpenClassification} 
						handleClick={() => handleOpenBtnClick()}
					/>
					<Description ecId={`${this && this.props && this.props.ecId || ''}_Description@esbqnp`}
						description={description}
					/>
					{isOpenClassification && (
						<div className='tamper'>
							<span ><b>{`${i18n.label['529914']()}: `}</b></span>
							<span className='enable' style={{color:isCrc && '#2DB7F5'}}><b>{isCrc ? i18n.label['387099']() : i18n.label['32386']()}</b></span>
							{ !isCrc && <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@iqi9fk`} type='primary' onClick={handleTamper}>{i18n.label['31676']()}</Button>}
							{crcDescription.map(d => <p>{d}</p>)}
						</div>
					)}
				</div>
			</div>
		);
	}
}