import React from 'react'

import {
	inject,
	observer,
} from 'mobx-react';

import {
	Spin,
	Button,
} from 'antd'

import {
	WeaLocaleProvider
} from 'ecCom';

import MainDialog from './MainDialog';
import {addContentPath} from '../../util/index.js'
const getLabel = WeaLocaleProvider.getLabel;

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

	componentDidMount() {
		const {
			hrmSecondaryVerify
		} = this.props, {
			isSettedSecondaryPwd
		} = hrmSecondaryVerify;

		isSettedSecondaryPwd();
	}

	componentWillUnmount() {
		this.props.hrmSecondaryVerify.resetSecondaryVerify()
	}

	getDescription = (isSetted) => {
		let ele;

		if (!isSetted) {
			const desc = [getLabel('504320', "什么是二次验证密码？"), `${getLabel('506871', "用于身份确认的二次验证密码")}，${getLabel('504322', "为保安全性，请设置为和登录密码不同的密码。")}`];

			ele = desc.map((item, index) => {
				return <p style={{padding: '3px 0'}}>{`${index==0 ? '•' : ''} ${item}`}</p>
			});
		} else {
			const status = (
				<p style={{fontSize: 18}}>
					<span>{getLabel('504323',"二次验证密码状态")}</span>
					<span> : </span>
					<span style={{fontWeight:'bold',color:'#4DB1FA'}}>{getLabel('504324',"已设置")}</span>
				</p>
			);

			const desc = [getLabel('504325', "二次验证密码可以自行停用吗？"), getLabel('504326', "不可以，只能由管理员操作。"), getLabel('504327', "二次验证密码忘记了怎么办？"), getLabel('504328', "请联系系统管理员解决。")];

			ele = desc.map((item, index) => {
				return <p style={{padding: '3px 0'}}>{`${[0,2].includes(index) ? '•' : ''} ${item}`}</p>
			});

			ele.unshift(status);
		}

		return ele;
	}

	getButton = (isSetted) => {
		const {
			hrmSecondaryVerify
		} = this.props, {
			setSecondaryVerify,
			modifySecondaryPass,
		} = hrmSecondaryVerify;

		let btn;

		if (!isSetted) {
			btn = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5ohq91`} type='primary' style={{marginTop: 30}} onClick={() => setSecondaryVerify()} >{getLabel('504329',"立即设置")}</Button>
		} else {
			btn = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4kax8i`} type='primary' style={{marginTop: 30}} onClick={() => modifySecondaryPass()} >{getLabel('504330',"修改")}</Button>
		}

		return btn;
	}

	getPaddingLeft = () => {
		const w = window.innerWidth || document.body.clientWidth;

		let pl;
		if (w > 1366) {
			pl = '28%';
		} else {
			pl = '23%';
		}

		return pl;
	}
	render() {
		const {
			hrmSecondaryVerify
		} = this.props, {
			secondaryVerify
		} = hrmSecondaryVerify, {
			isSetted,
			loading,
		} = secondaryVerify;

		if (loading) {
			return (
				<div className='hrm-loading-center' style={{top:400}}>
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@qop7fa`} spinning={loading} size='large'></Spin>
                </div>
			)
		} else {
			return (
				<div>
					<div style={{paddingTop: 80,paddingLeft: this.getPaddingLeft()}}>
						<img src={addContentPath('/hrm/hrm_e9/image/SecondaryVerify.png')} style={{float: 'left'}}/>
						<div style={{float: 'left',paddingLeft:15,paddingTop:10}}>
							{this.getDescription(isSetted)}
							{this.getButton(isSetted)}
						</div>
					</div>
					<MainDialog ecId={`${this && this.props && this.props.ecId || ''}_MainDialog@84i3or`} />
				</div>
			)
		}


	}
}