import {
	observer,
	inject
} from 'mobx-react';
import {
	toJS
} from 'mobx';
import {
	WeaLocaleProvider,
} from 'ecCom';
import {
	Icon,
	Steps,
	Spin,
	Button,
	Tooltip,
	QueueAnim,
} from 'antd';
import {addContentPath} from '../../util/index.js'
const Step = Steps.Step;
const getLabel = WeaLocaleProvider.getLabel;

const InitStatus = props => {
	const {
		status
	} = props;

	switch (status) {
		case '0':
			return <i className='icon-coms-Clear' style={{color: '#FF0000'}}/>
			break;
		case '1':
			return <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@mwbz2q`} type="check-circle" style={{color: '#00CC00'}}/>
			break;
		case '2':
			return <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@4140j1`} />
			break;
		default:
			return null;
	}
}

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

	const translate = (description) => {
		return (<ul>{
			description.map(d => <li>{d}</li>) 
		}</ul>)
	}

	return (
		<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@kgagak`} placement="right" title={Array.isArray(description) ? translate(description) : description }>
			<span title=''>
				<i className='icon-coms-Read' style={{color:'#666'}}/>
				<span className='holiday-link' style={{marginLeft: 5}}>{getLabel('505586','详情')}</span>
			</span>
		</Tooltip>
	)
}

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

	const supply = [];

	const insert = (html) => {
		supply.push(html);
		return supply;
	}

	if (description) {
		insert(<br />).push(<Detail ecId={`${this && this.props && this.props.ecId || ''}_Detail@2jnhw9`} description={description}/>);
	}

	return supply;
}

const InitSteps = props => {
	const {
		currentIndex,
		items
	} = props;

	return (
		<Steps ecId={`${this && this.props && this.props.ecId || ''}_Steps@ufuli7`} current={currentIndex}>
			{
				items.map( (item,index) => {
					const {
						title,
						status
					} = item;

					return (
						<Step ecId={`${this && this.props && this.props.ecId || ''}_Step@0mb2d9@${index}`} status={status} description={(currentIndex === index) ? <b>{title}</b> : title}/>
					)
				})
			}
  		</Steps>
	)
}

const Result = props => {
	const {
		results,
		names,
	} = props;

	return (
		<QueueAnim ecId={`${this && this.props && this.props.ecId || ''}_QueueAnim@vk0yt5`} type={['right', 'left']} style={{marginTop: 50}}>
			{
				results.map( (result,index) => {
						const {
							name,
							status,
							sketch,
							description,
							url,
						} = result;

						return (<div key={index} className='wea-f14 hrm-init-analysis-item'>
									<span className='hrm-init-analysis-item-index'>
										<i className={`icon-coms-${index + 1}`} style={{color:'#b2b2b2'}}/>
									</span>
									<span className='hrm-init-analysis-item-name hrm-over-flow'>
										{name}
									</span>
									<span className='hrm-init-analysis-item-icon'>
										<InitStatus ecId={`${this && this.props && this.props.ecId || ''}_InitStatus@pp2wvq@${index}`} status={status} />
									</span>
									<p className='hrm-init-analysis-item-desc hrm-over-flow wea-f12' style={{color: (status === '0') && '#FF0000',lineHeight:description && '25px'  }} title={sketch}>
										{ sketch }
										{ description && <Supply ecId={`${this && this.props && this.props.ecId || ''}_Supply@7s1nml@${index}`} description={description}/> }
									</p>
									{
										url && (<span className='hrm-init-analysis-item-link wea-f12'>
												<i className='icon-coms-link'/>
												<a href={addContentPath(url)} target='_blank' className='hrm-init-analysis-item-link-a'>{names[index]}</a>
											</span>)
									}
									
								</div>)
					})
			}
		</QueueAnim>
	)
}

const Back = props => {
	const {
		back
	} = props;

	return (
		<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dlyq65`} type="primary" icon="left" style={{float:'right',marginTop: 30}} onClick={() => back()}>{getLabel('505587','返回上一步')}</Button>
	)
}

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

	render() {
		const {
			hrmInit
		} = this.props, {
			currentIndex,
			steps,
			analysis,
			isInitFinish,
			hasAnalysisResult,
			back,
			initItemNames,
		} = hrmInit, {
			items
		} = steps, {
			results
		} = analysis;

		return (
			<div className='hrm-init-analysis'>
				<div className='wea-f12'>
					<InitSteps ecId={`${this && this.props && this.props.ecId || ''}_InitSteps@8h7k0n`} 
						currentIndex={currentIndex}
						items={items}
					/>
				</div>
				<Result ecId={`${this && this.props && this.props.ecId || ''}_Result@7h2mle`} results={toJS(results)} names={initItemNames}/>
				{hasAnalysisResult && isInitFinish && <Back ecId={`${this && this.props && this.props.ecId || ''}_Back@29u6g0`} back={() => back()}/>}
			</div>
		)
	}


}