import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaSelect,
} from 'ecCom';
import {
	Row,
	Popover,
	Button,
	Radio
} from 'antd';
import {
	i18n
} from '../../public/i18n';
import {
	has
} from 'lodash';
import classnames from 'classnames';

const {Group: RadioGroup} = Radio;
const radioStyle = {
	display: 'block',
	height: '30px',
	lineHeight: '30px'
}

@observer
export default class DisplaySetting extends Component {
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			onSubComanyFullPathChanged: false,
			radioValue: props.radioGroupProps.value,
			fullPathValue: props.subCompanyFullPathProps.value
		}
	}

	handleVisibleChange = (visible) => {
		setTimeout(() => {
			if(this.state.onSubComanyFullPathChanged){
				this.setState({onSubComanyFullPathChanged: false});
			}else{
				this.setState({visible, onSubComanyFullPathChanged: false})
			}
		}, 300);
	}

	onChange = (value) => {
		this.setState({
			visible: true,
			onSubComanyFullPathChanged: true,
			fullPathValue: value
		});
	}

	onRadioChange = value => {
		this.setState({
			visible: true,
			onSubComanyFullPathChanged: true,
			radioValue: value
		});
	}

	doSetting = () => {
		const {
			save
		} = this.props;
		const {radioValue, fullPathValue} = this.state;
		save({radioValue, fullPathValue});
		this.setState({
			visible: false,
		});
	}

	render() {
		const {
			radioGroupProps, subCompanyFullPathProps
		} = this.props;
		const {radioValue, fullPathValue} = this.state;
		const content = (
			<div className='screenContent'>
				<div>{i18n.label.displaySetting()}</div>
				<div>
					<RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@9rea6u`} value={radioValue || '1'} onChange={e => this.onRadioChange(e.target.value)}>
						{
							radioGroupProps && radioGroupProps.options && radioGroupProps.options.map((op, i) => {
								return (
									<Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@5uq9vs@${i}`} key={i} style={radioStyle} value={op.value}>{op.showname}</Radio>
								)
							})
						}
					</RadioGroup>
				</div>
				{
					radioValue == '2' &&
					<div>
						<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@luwbf9`} className='subCompanyFullPathSetting' value={fullPathValue || '1'} options={subCompanyFullPathProps.options} onChange={(v) => this.onChange(v)}/>
					</div>
				}
				<div className='btn'>
					<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@har190`} type='primary' onClick={this.doSetting}>{i18n.button.sure()}</Button>
				</div>
			</div>
		)
		return (
			<Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@zypkqm`} placement="bottomRight" content={content} trigger="click"
		    	visible={this.state.visible} onVisibleChange={this.handleVisibleChange} 
		    >
		    	<i className='subCompanySetting icon-coms-Flow-setting' title={i18n.label.displaySetting()}></i>
		    </Popover>
		)
	}
}