import React, { useRef,useState } from 'react';
import {history, useParams, useRequest} from 'umi';
import Base64 from 'base64-js';
import { ProFormInstance, ProFormRadio } from '@ant-design/pro-form';
import ProForm, {
  StepsForm,
  ProFormText,
  ProFormDatePicker,
  ProFormSelect,
  ProFormDigit,
  ProFormTextArea,
  ProFormCheckbox,
  ProFormDateRangePicker,
} from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import { Button, Col, message, Row } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import ProDescriptions from '@ant-design/pro-descriptions';
import { queryExaminationRule,queryPersonInfo,savePersonSignUpInfo,checkExaminationPersonID } from './service';
import cookie from 'react-cookies';

import styles from './index.less'
const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};




export default () => {
  const params = useParams();
  console.log('params',params)
  const formRef = useRef<ProFormInstance>();
  const [baseInfo, setBaseInfo] = useState({});
  const [testInfo, setTestInfo] = useState({});
  const [backInfo, setBackInfo] = useState({});

  const data = useRequest(() => {
    return queryPersonInfo({
      identity_id:cookie.load('identity_id'),
      person_id:cookie.load('person_id')
    });
  },{
    formatResult: (result) => {
      setBackInfo(result.table_List);
    }
  });
  // /** 获取题型 */
  // const { data } = useRequest(() => {
  //   return queryExaminationRule();
  // },{
  //   formatResult: (result) => {
  //     return result;
  //   }
  // });
  return (
        <div>
          <div style={{background:'#fff',height:'3rem',lineHeight:'3rem',margin:'0 0 1rem 0',paddingLeft:'1rem'}}>
            <span style={{color:'#8C8C8C',cursor:'pointer'}} onClick={() => { history.push('/dashboard/workplace') }}>首页&nbsp;&nbsp;/&nbsp;&nbsp;</span>
            <span>考试报名</span>
          </div>
          <ProCard className={styles.registration}>
            <StepsForm<{
                         name: string;
                       }>
              formRef={formRef}
              style={{textAlign:'center'}}
              onFinish={async () => {
            }}
              formProps={{
              layout: "horizontal",
              labelCol: { span: 8 },
              wrapperCol: { span: 12 },
              validateMessages: {
                required: '此项为必填项',
              },
            }}
              >
              <StepsForm.StepForm<{
                                    name: string;
                                  }>
                name="base"
                title="填写基本信息"
                stepProps={{
                description: false,
              }}
                onFinish={async (values) => {
                try {
                  const info = await checkExaminationPersonID({
                    examination_id:params.examination_id,
                    id_code:values.idCard
                  });
                  setBaseInfo(values);
                  return true;
                }catch (error) {
                  if(error.response){
                    message.error(error.response.info);
                  }else {
                    message.error('填写失败，请重新填写！');
                  }
                  return false;
                }

              }}
                >
                <Row gutter={24}>
                  <Col lg={12} md={12} sm={24}>
                    <ProFormText
                      name="name"
                      label="考生姓名"
                      width="md"
                    // tooltip="最长为 6 位汉字，需要与考生身份证一致"
                       placeholder="请输入姓名"
                       value={backInfo?.person_name}
                    // rules={[{ required: true }]}
                       disabled
                  />
                  <ProFormSelect
                    label='性别'
                    name="sex"
                    rules={[{ required: true, message: '请选择性别' }]}
                    options={[
                      {
                        label: '男',
                        value: '男',
                      },
                      {
                        label: '女',
                        value: '女',
                      },

                    ]}
                    placeholder="请选择"
                  />
                  <ProFormDatePicker name="birthday"
                                     label="出生年月"
                                     picker="month"
                                     fieldProps={{
                                       format: 'YYYY-MM',
                                     }}

                                     rules={[{ required: true, message: '请选择出生年月' }]}
                  />
                  <ProFormText name="idCard" label="身份证号" width="sm"  rules={[{ required: true, message: '请输入身份证号' },{pattern:/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,message:'请输入正确身份证号'}]}/>
                  <ProFormText name="address" label="家庭地址" rules={[{ required: true, message: '请输入家庭地址' },{ whitespace: true },]}/>
                  <ProFormText name="contact" label="联系方式" width="lg" placeholder="联系方式" rules={[{ required: true, message: '请输入联系方式' },{pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,message:'请输入正确联系方式'}]} />
                </Col>
                <Col lg={12} md={12} sm={24}>
                  <ProFormText name="org" label="所在学校" width="md" placeholder="请填写" value={backInfo?.bureau_name} disabled />
                  <ProFormSelect
                    label='最高学历'
                    name="qualifications"
                    rules={[{ required: true, message: '请选择最高学历' }]}
                    options={[
                      {
                        label: '大专',
                        value: '大专',
                      },
                      {
                        label: '全日制本科',
                        value: '全日制本科',
                      },
                      {
                        label: '硕士研究生及以上学历',
                        value: '硕士研究生及以上学历',
                      },
                    ]}
                    placeholder="请选择"
                  />
                  <ProFormText name="graduation" label="毕业院校"  rules={[{ required: true, message: '请输入毕业院校' },{ whitespace: true },]}/>
                  <ProFormText name="major" label="专业" rules={[{ required: true, message: '请输入专业' },{ whitespace: true },]}/>
                  <ProFormSelect
                    label='任教学科'
                    name="subject"
                    rules={[{ required: true, message: '请选择任教学科' }]}
                    options={[
                      {
                        label: '语文',
                        value: '语文',
                      },
                      {
                        label: '数学',
                        value: '数学',
                      },
                      {
                        label: '英语',
                        value: '英语',
                      },
                      {
                        label: '物理',
                        value: '物理',
                      },
                      {
                        label: '化学',
                        value: '化学',
                      },
                      {
                        label: '生物',
                        value: '生物',
                      },
                      {
                        label: '历史',
                        value: '历史',
                      },
                      {
                        label: '地理',
                        value: '地理',
                      },
                    ]}
                    placeholder="请选择"
                  />
                </Col>
              </Row>

            </StepsForm.StepForm>

            <StepsForm.StepForm<{
                                  checkbox: string;
                                }>
              name="object"
              title="确认考试项目"
              stepProps={{
              description: false,
            }}
              onFinish={async () => {
              // console.log('1111s',formRef.current?.getFieldsValue());
              await waitTime(2000);
              return true;
            }}
              >
              <ProDescriptions
                layout='horizontal'
                column={1}
              //actionRef={actionRef}
                                request={async (value) => {
                                  const data = await queryExaminationRule({
                                    examination_id: params.examination_id
                                  });

                                  setTestInfo(data.bean);
                                  const dom=data.bean.examination_start_time+'-'+data.bean.examination_end_time;
                                  if(data){
                                    data.bean.sum_score=data.bean.sum_score===null?'--':data.bean.sum_score
                                    data.bean.pass_score=data.bean.pass_score===null?'--':data.bean.pass_score
                                  }

                                  return Promise.resolve({

                                      success: true,
                                      data: { id: data?.bean.id,
                                      object:data?.bean.examination_name,
                                    date:data?dom:'--',
                                    duration:data?.bean.examination_time+'分钟',
                                    grade:data?.bean.sum_score+'分',
                                    through:data?.bean.pass_score+'分',
                                    learn:data?'在线学习时长不低于'+data.bean.learning_time+'分钟':'--',
                                },
                                })

                                }}
                                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="learn" label="报名要求" valueType="text" />
            </ProDescriptions>
          </StepsForm.StepForm>

          <StepsForm.StepForm
            name="time"
            title="完成"
            stepProps={{
              description: false,
            }}
            onFinish={async () => {
              // console.log(formRef.current?.getFieldsValue());
              // 跳转到指定路由
              try {
                const success = await savePersonSignUpInfo({
                    address:baseInfo?.address,
                  birthday:baseInfo?.birthday,
                  bureau_id:backInfo?.bureau_id,
                  bureau_name:backInfo?.bureau_name,
                  city_id:backInfo?.city_id,
                  city_name:backInfo?.city_name,
                  district_id:backInfo?.district_id,
                  district_name:backInfo?.district_name,
                  education:baseInfo?.qualifications,
                  examination_id:params.examination_id,
                  gender:baseInfo?.sex,
                  id_code:baseInfo?.idCard,
                  identity_id:backInfo?.identity_id,
                  major:baseInfo?.major,
                  person_id:backInfo?.person_id,
                  person_name:backInfo?.person_name,
                  province_id:backInfo?.province_id,
                  province_name:backInfo?.province_name,
                  subject:baseInfo?.subject,
                  tel:baseInfo?.contact,
                  university:baseInfo?.graduation,
              });
                const msg=testInfo.examination_start_time+','+testInfo.examination_end_time+','+testInfo.examination_name+','+success.admission_number;
                history.push( '/registration/success/'+msg);
              }catch (error) {
                if(error.response){
                  message.error(error.response.info);
                }else {
                  message.error('报名失败');
                }

              }


              // console.log('success',success);
              // if (success.success) {
              //   // const msg='你已报名'+testInfo.examination_start_time+'-'+testInfo.examination_end_time+'  '+testInfo.examination_name+'，准考证号是'+success.admission_number+'，请准时参加考试！';
              //   const msg=testInfo.examination_start_time+','+testInfo.examination_end_time+','+testInfo.examination_name+','+success.admission_number;
              //   // const info=JSON.stringify(msg)
              //   console.log('mag',msg);
              //   history.push( '/registration/success/'+msg);
              //
              // }else {
              //   message.config('报名失败！')
              // }

            }}
          >

            <Row gutter={24}>
              <Col lg={12} md={12} sm={24}>
                <ProDescriptions
                  layout='horizontal'
                  column={1}
                //actionRef={actionRef}
                   request={async () => {
                   }}
                   extra={false}
              >
                <ProDescriptions.Item dataIndex="last_id" hideInDescriptions >{testInfo?.id}</ProDescriptions.Item>
                <ProDescriptions.Item dataIndex="last_name" label="考生姓名" valueType="text">{backInfo?.person_name}</ProDescriptions.Item>
                <ProDescriptions.Item dataIndex="last_sex" label="性别" valueType="text">{baseInfo?.sex}</ProDescriptions.Item>
                <ProDescriptions.Item dataIndex="last_idCard" label="身份证号" valueType="text" >{baseInfo?.idCard}</ProDescriptions.Item>
                <ProDescriptions.Item dataIndex="last_birthday" label="出生年月" valueType="text" >{baseInfo?.birthday}</ProDescriptions.Item>
                <ProDescriptions.Item dataIndex="last_address" label="家庭地址" valueType="text" >{baseInfo?.address}</ProDescriptions.Item>
                <ProDescriptions.Item dataIndex="last_contact" label="联系方式" valueType="text" >{baseInfo?.contact}</ProDescriptions.Item>
                <ProDescriptions.Item dataIndex="last_object" label="考试项目" valueType="text" >{testInfo?.examination_name}</ProDescriptions.Item>
                <ProDescriptions.Item dataIndex="last_duration" label="考试时长" valueType="text" >{testInfo?.examination_time+'分钟'}</ProDescriptions.Item>
                <ProDescriptions.Item dataIndex="last_through" label="通过标准" valueType="text" >{testInfo?.pass_score+'分'}</ProDescriptions.Item>
              </ProDescriptions>
            </Col>
            <Col lg={12} md={12} sm={24}>
              <ProDescriptions
                layout='horizontal'
                column={1}
              //actionRef={actionRef}
                 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" >{backInfo?.bureau_name}</ProDescriptions.Item>
              <ProDescriptions.Item dataIndex="date" label="最高学历" valueType="text" >{baseInfo?.qualifications}</ProDescriptions.Item>
              <ProDescriptions.Item dataIndex="duration" label="毕业院校" valueType="text" >{baseInfo?.graduation}</ProDescriptions.Item>
              <ProDescriptions.Item dataIndex="grade" label="专业" valueType="text" >{baseInfo?.major}</ProDescriptions.Item>
              <ProDescriptions.Item dataIndex="through" label="任教学科" valueType="text" >{baseInfo?.subject}</ProDescriptions.Item>
              <ProDescriptions.Item dataIndex="learn" label="考试时间" valueType="text" >{testInfo?.examination_start_time}-{testInfo?.examination_end_time}</ProDescriptions.Item>
              <ProDescriptions.Item dataIndex="times" label="满分" valueType="text" >{testInfo?.sum_score+'分'}</ProDescriptions.Item>
            </ProDescriptions>
          </Col>
        </Row>
  </StepsForm.StepForm>
  </StepsForm>
  </ProCard>
        </div>

  );
};
