import React, { useRef } from 'react';
import { history } from 'umi';
import { ProFormInstance, ProFormRadio } from '@ant-design/pro-form';
import ProForm, {
  StepsForm,
  ProFormText,
  ProFormDatePicker,
  ProFormSelect,
  ProFormTextArea,
  ProFormCheckbox,
  ProFormDateRangePicker,
} from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import { Button, Checkbox, Col, Divider, List, Menu, message, Radio, Row, Space, Typography } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import ProDescriptions from '@ant-design/pro-descriptions';
import styles from './index.less'
import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};
const numbers = [];
for(let i=0;i<50;i++){
  numbers.push({id: `${i}`})
}
export default () => {
  const formRef = useRef<ProFormInstance>();

  return (
    <PageContainer content={''} extraContent={''}>
        <ProCard className={styles.examinationrules}>
        <StepsForm<{
            name: string;
        }>
            formRef={formRef}
            onFinish={async () => {
            await waitTime(1000);
            message.success('提交成功');
            }}
            formProps={{
                layout: "horizontal",
                labelCol: { span: 8 },
                wrapperCol: { span: 12 },
                validateMessages: {
                    required: '此项为必填项',
                },
            }}
        >
            <StepsForm.StepForm<{
                name: string;
            }>
                name="base"
                title="模拟考试基本信息"
                stepProps={{
                    description: false,
                }}
                onFinish={async () => {
                    console.log(formRef.current?.getFieldsValue());
                    await waitTime(2000);
                    return true;
                }}
            >
                <Row gutter={24}>
                    <Col lg={24} md={24} sm={24}>
                        <ProFormText
                            name="name"
                            label="考试名称"
                            width="md"
                            // tooltip="最长为 6 位汉字，需要与考生身份证一致"
                            placeholder="请输入名称"
                            // rules={[{ required: true }]}
                            // value="锦书"
                            // disabled
                        />

                        <ProFormSelect
                            width="md"
                            options={[
                                {
                                value: '1',
                                label: '主题1',
                                },
                                {
                                value: '2',
                                label: '主题3',
                                },
                            ]}
                            name="unusedMode"
                            label="关联主题"
                            />
                        <ProFormText name="time" label="考试时长" tooltip="限制考试时长的情况下，用户考试中离开，倒计时不会停止。"/>
                        
                    </Col>                    
                </Row>
            
            </StepsForm.StepForm>

            <StepsForm.StepForm<{
                checkbox: string;
                }>
                name="object"
                title="组卷"
                stepProps={{
                    description: false,
                }}
                onFinish={async () => {
                    console.log(formRef.current?.getFieldsValue());
                    return true;
                }}
            >
                <div style={{margin:'0'}}>
                <Typography style={{padding:24, fontSize: 24, textAlign: 'center'}}>生涯规划师初级认证考试</Typography>
                {/** 一旦录入另一项将禁用，清空组卷后可选另一项 */}
                <Radio.Group value={1} onChange={()=>{}} style={{ marginBottom: 16 }}>
                    <Radio.Button value={1}>手动组卷</Radio.Button>
                    <Radio.Button value={2}>系统组卷</Radio.Button>
                </Radio.Group>
                <Divider style={{margin:'6px 0', opacity: 0.5}}/>
                <Row>                        
                    <Col span={18} style={{background:'#ffffff', padding:0}}>
                        <ProCard
                            title="一. 单选题 （共50分，每题1分）"
                            extra={false}
                            split='vertical'
                            bordered
                            headerBordered
                        >
                            <Space direction="vertical" style={{width:'100%', padding: '24px 48px'}}>

                            <Typography style={{marginBottom:16, fontSize:18}}>
                                4. 以下哪些是符合法律规定的 ？
                            </Typography>
                            <Radio.Group onChange={()=>{return true}} value={0} size="large">
                                <Space direction="vertical" style={{fontSize:16}}>
                                <Radio value={1} style={{padding:5, fontSize:16}}>A. 单位在试用期辞退员工</Radio>
                                <Radio value={2} style={{padding:5, fontSize:16}}>B. 社会中介收取中介费</Radio>
                                <Radio value={3} style={{padding:5, fontSize:16}}>C. 单位不缴纳五险一金</Radio>
                                <Radio value={4} style={{padding:5, fontSize:16}}>D. 要求员工支付押金</Radio>
                                </Space>
                            </Radio.Group>

                            <Typography style={{marginBottom:16, fontSize:18}}>
                                5. 以下哪些是不符合法律规定的(多选) ？
                            </Typography>
                            <Checkbox.Group onChange={()=>{return true}}>
                                <Space direction="vertical" style={{}}>
                                <Checkbox value={1} style={{padding:5, fontSize:16}}>A. 单位在试用期辞退员工</Checkbox>
                                <Checkbox value={2} style={{padding:5, fontSize:16}}>B. 社会中介收取中介费</Checkbox>
                                <Checkbox value={3} style={{padding:5, fontSize:16}}>C. 单位不缴纳五险一金</Checkbox>
                                <Checkbox value={4} style={{padding:5, fontSize:16}}>D. 要求员工支付押金</Checkbox>
                                </Space>
                            </Checkbox.Group>

                            <Typography style={{marginBottom:16, fontSize:18}}>
                                6. 单位在试用期辞退员工是符合法律规定的 ？
                            </Typography>
                            <Radio.Group onChange={()=>{return true}} value={0} size="large">
                                <Space direction="vertical" style={{fontSize:16}}>
                                <Radio value={1} style={{padding:5, fontSize:16}}>正确</Radio>
                                <Radio value={2} style={{padding:5, fontSize:16}}>错误</Radio>
                                </Space>
                            </Radio.Group>
                            </Space>
                        </ProCard>
                    </Col>
                    <Col span={6} style={{paddingLeft:24}}>
                        <div style={{background:'#ffffff',  padding:24}}>
                            <Space direction="vertical" style={{width:'100%'}}>
                            <strong>试卷信息与设置</strong>
                            <Typography>共 {} 题 {} 分</Typography>
                            <Divider style={{margin:'6px 0', opacity: 0.5}}/>
                            <Space direction="vertical">
                                <Typography>单选题 共 {} 题 {} 分</Typography>
                                <Typography>多选题 共 {} 题 {} 分</Typography>
                                <Typography>判断题 共 {} 题 {} 分</Typography>
                            </Space>
                            <Divider style={{margin:'6px 0', opacity: 0.5}}/>
                            <Button size="large" block>选择试题</Button>
                            <Button size="large" type="primary" block>保存试卷</Button>
                            </Space>
                        </div>          
                    </Col>
                </Row>
                </div>
            </StepsForm.StepForm>

            <StepsForm.StepForm
                name="time"
                title="完成"
                stepProps={{
                    description: false,
                }}
                onFinish={async () => {
                    console.log(formRef.current?.getFieldsValue());
                    // 跳转到指定路由
                    history.push('/examinationrules/normal');
                    return true;
                }}
            >
                
                <Row gutter={24}>
                    <Col lg={12} md={12} sm={12} offset={8}>
                        <ProDescriptions
                            layout='horizontal'
                            column={1}
                            //actionRef={actionRef}
                            title="模拟考试"
                            request={async () => {
                                return Promise.resolve({
                                success: true,
                                data: { id: '这是一段文本', object:'', date: '2020-07-30 08:00', duration:'', grade:100, through:'>60', learn: '>20 min', times: 2 },
                                });
                            }}
                            extra={false}
                            >
                            <ProDescriptions.Item dataIndex="id" hideInDescriptions />
                            <ProDescriptions.Item dataIndex="object" label="考试名称" valueType="text" />
                            <ProDescriptions.Item dataIndex="date" label="关联培训主题" valueType="text" />
                            <ProDescriptions.Item dataIndex="duration" label="考试时长" valueType="text" />

                            <ProDescriptions.Item dataIndex="grade" label="考试信息" valueType="text" />

                            <ProDescriptions.Item dataIndex="through" label="通过标准" valueType="text" />
                            <ProDescriptions.Item dataIndex="times" label="考试次数" valueType="text" />                
                        </ProDescriptions>                        
                    </Col>                    
                </Row>
            </StepsForm.StepForm>
        </StepsForm>
        </ProCard>
    </PageContainer>

  );
};