import React from 'react';
import Styles from './web.module.less';
import { Form, Input, Button, Radio } from 'antd';
export default function Render(props) {
    const { methods, data } = props;
    const { t, update, onConfirm } = methods;
    const { oakFullpath, idState, name, idNumber, idCardType, idCardTypeArr, idStateStr, } = data;
    const disabled = !idState || ['verified', 'verifying'].includes(idState);
    return (<div className={Styles.pageBody}>
            <Form layout="horizontal" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
                <Form.Item label={t('user:attr.name')} required>
                    <Input disabled={idState !== 'unverified'} value={name} onChange={(e) => {
            update({
                name: e.target.value,
            });
        }} placeholder={t('please input name')}/>
                </Form.Item>
                <Form.Item label={t('user:attr.idCardType')} required>
                    <Radio.Group disabled={idState !== 'unverified'} onChange={(e) => {
            if (idCardType === e.target.value) {
                return;
            }
            update({
                idCardType: e.target.value,
                idNumber: '',
            });
        }} value={idCardType}>
                        {idCardTypeArr.map((ele, index) => {
            return <Radio key={ele.value} value={ele.value}>{ele.label}</Radio>;
        })}
                    </Radio.Group>
                </Form.Item>
                <Form.Item label={t('user:attr.idNumber')} required>
                    <Input value={idNumber} disabled={!idCardType || idState !== 'unverified'} onChange={(e) => {
            update({
                idNumber: e.target.value,
            });
        }} placeholder={t('please input idNumber')}/>
                </Form.Item>
            </Form>
            {disabled ?
            (<div className={Styles.idState}>
                            {idStateStr}
                        </div>) :
            (<div className={Styles.btnBox}>
                            <Button type="primary" size="large" onClick={() => {
                    onConfirm();
                }}>
                                {t('commit')}
                            </Button>
                        </div>)}
        </div>);
}