import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
    WeaQrcode,
    WeaLocaleProvider
} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class CAVerify extends Component {
	constructor(props) {
		super(props);
    }

    onClickHandle = e => {
        const {store: {resend}} = this.props;
        if(e.target.id === 'resend')
            resend();
    }
    
    get resendMsg(){
		let label = getLabel('501189','请使用e-mobile扫描下方二维码进行验证');
		// label = label.replace('{param}', `<a id='resend'>${getLabel('128166','此处')}</a>`);
		return label;
    }

	render() {
        const {store} = this.props;
        const {
            qrCode,
        } = store;
        return (
            <div className='secondaryVerifyCA' style={{width: '100%', padding: '20px'}}>
                <div style={{textAlign: 'center'}}>{getLabel('516748','已启用CA验证')}</div>
                <div style={{textAlign: 'center', paddingTop: 10}} onClick={this.onClickHandle} dangerouslySetInnerHTML={{__html: this.resendMsg}}></div>
                <div style={{textAlign: 'center', paddingTop: 10}}>
                    <WeaQrcode ecId={`${this && this.props && this.props.ecId || ''}_WeaQrcode@zal3dd`} text={qrCode} level='H' size='200'/>
                </div>
            </div>
        )
	}
}