import React, {
	Component
} from 'react';
import {
	observer,
	inject
} from 'mobx-react';
import {
	Authority,
	Top,
	Search,
	Table,
	Dialog,
	MagicForm,
	CenterSpin,
} from '../../public/valhalla/components/index.js';
import {
	WeaFormItem,
	WeaLocaleProvider,
	WeaRightMenu,
} from 'ecCom';
import {
	Button,
	Modal,
} from 'antd';
import Processing from "./Processing.js";
import "../../style/sanyuan.less";
import {
    i18n
} from '../../public/i18n';
const getLabel = WeaLocaleProvider.getLabel;
const confirm = Modal.confirm;

@inject('sanYuanStore')
@observer
export default class SanYuan extends Component {
	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.initPage();
		}
	}

	componentDidMount() {
		this.initPage();
	}

	initPage = () => {
		this.props.sanYuanStore.initPage();
	}

	getSecondaryPwdClip = () => {
		const {
			sanYuanStore
		} = this.props, {
			isSecondaryPwdSetted,
		} = sanYuanStore;

		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@9n8oqi`}
				label={getLabel('388412',"二次验证密码")}
                labelCol={{span: 6}}
                wrapperCol={{span:18}}
                className="secondaryPwd"
			>
				<div>{isSecondaryPwdSetted ? getLabel(514132,"已设置") : getLabel(514133,"未设置")}</div>
				{isSecondaryPwdSetted &&
					<div>
	                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@llb3z9`} size="small" onClick={this.showConfirm}>
	                      {getLabel('26471',"停用")}
	                    </Button>
					</div>
                }
			</WeaFormItem>
		)
	}

	dialogContent = () => {
		const {
			sanYuanStore
		} = this.props, {
			dialogType,
			formStore,
			authSearchStore,
			authTableListStore,
		} = sanYuanStore;

		if (["create", "edit", "safe"].includes(dialogType)) {
			return (
				<CenterSpin ecId={`${this && this.props && this.props.ecId || ''}_CenterSpin@ax1e88`} loading={formStore.loading}>
					<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@54pks8`} store={formStore}/>
					{(dialogType === "safe") && this.getSecondaryPwdClip() }
				</CenterSpin>
			)
		}
		if (dialogType === "auth") {
			return (
				<WeaRightMenu>
					<Search ecId={`${this && this.props && this.props.ecId || ''}_Search@h54fv8`} store={authSearchStore}/>
					<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@4q55wn`} store={authTableListStore}/>
				</WeaRightMenu>
			)
		}
	}

	showConfirm = () => {
		const {
			saveUseSecondaryPwd,
			setSecondaryPwdStatus
		} = this.props.sanYuanStore;

		confirm({
			title: getLabel(131329, '信息确认'),
			content: (<div>
                <span>{i18n.label['530915']()}</span><br />
                <span>{i18n.label['530916']()}</span>
             </div>),
			okText: getLabel(33703, '确定'),
			cancelText: getLabel(32694, '取消'),
			onOk() {
				saveUseSecondaryPwd().then(() => {
					setSecondaryPwdStatus(false)
				})
			},
			onCancel() {
				return
			},
		});
	}

	render() {
		const {
			sanYuanStore
		} = this.props, {
			authorityStore,
			topStore,
			formStore,
			searchStore,
			tableListStore,
			dialogStore,
			isStartInit,
			isInitFinish,
			authAddDialogStore,
		} = sanYuanStore;

		if (isInitFinish === "") {
			return null;
		}

		return (
			<div className="hrm-sanyuan">
				<Authority ecId={`${this && this.props && this.props.ecId || ''}_Authority@p0minh`} store={authorityStore}>
					<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@8msnmu`} store={topStore}>
						{
							isInitFinish ? (
								<React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@e4qw8c`}>
									<Search ecId={`${this && this.props && this.props.ecId || ''}_Search@6y1x6w`} store={searchStore}/>
									<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@p8a91n`} store={tableListStore}/>
								</React.Fragment>
							) : isStartInit ? (
								<Processing ecId={`${this && this.props && this.props.ecId || ''}_Processing@y1yp43`} store={sanYuanStore}/>
							) : (
								<CenterSpin ecId={`${this && this.props && this.props.ecId || ''}_CenterSpin@haalve`} loading={formStore.loading}>
									<div className="sanyuan-tip">
										<div className="tip-warning">
											<i className="icon-coms02-Warning" />
										</div>
										<span>{getLabel(514129,"提示: 启用三员分立管理必须先初始化3个原始三员管理员账号")}</span>
									</div>
									<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@104e42`} store={formStore}/>
								</CenterSpin>
							)
						}
					</Top>
					{
						dialogStore.visible &&  (
							<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@oweq2e`} store={dialogStore}>
								{this.dialogContent()}
							</Dialog>
						)
					}
					{
						authAddDialogStore.visible && (
							<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@phy0dz`} store={authAddDialogStore}>
								<CenterSpin ecId={`${this && this.props && this.props.ecId || ''}_CenterSpin@sc1qsl`} loading={formStore.loading}>
									<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@1lchio`} store={formStore}/>
								</CenterSpin>
							</Dialog>
						)
					}
				</Authority>
			</div>
		);
	}
}