// 医师注册
import React from 'react';
import { Link } from 'react-router-dom'
import {
    Layout, Form, Carousel, Input, Button, Row, Col, Steps, Select, DatePicker, Modal, Icon, Cascader, Upload
} from 'antd';
import moment from "moment"
import '../../assets/css/login.css'
import { $http } from '../../containers/config/https';
import { httpConfig } from '../../containers/config/httpConfig'
import { Aes, Keup } from '../../tools/index';
import RangeDatePicker from 'components/rangePicker/index';
import '../userInformation/style/index.less';

const Option = Select.Option;
const Step = Steps.Step;

const formItemLayout = {    // label 和input宽度
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};

class PhysicianRegistration extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            current: 0,
            logintext: '基本资料',
            displayBtn: {
                display_prev: 'none',
                display_next: 'block',
                display_register: 'none',
            },
            //注册页面初始值
            sexData: [], // 性别集合
            credtypeData: [], // 证件类型集合
            languageData: [], // 语言集合
            hospitalData: [], // 医院集合
            groupData: [], // 岗位集合
            experiseData: [], // 专长集合
            titleData: [], // 职称集合
            DeptDrData: [{ id: 0, descripts: "" }], // 科室集合
            openSelect1: false,  //展开select
            openSelect2: false,  //展开select
            openSelect5: false,  //展开select
            openSelect6: false,  //展开select
            openSelect7: false,  //展开select
            openSelect8: false,  //展开select
            contentH: '',  //content高度
            StartDate: undefined,  // //开始日期
            EndDate: undefined,  // //结束日期
            languageCode: 'CN',// 国际化标识
            languageData2: {}, // 国际化语言包
            language: {},   // 国际化语言
        }
    }

    componentDidMount() {
        Keup.UnTab(["title", "post", "passWord2"]);   //禁用组件tab脚本 UnTab([id1,id2,id3])

        this.contentHeight();   // 获取content的高度

        this.CNEN() // 国际化
        // this.refs.setCarouselRef.next();

    }


    //点击切换中英文
    handleLanguage = (languageCode) => {
        this.setState({
            languageCode: languageCode === "CN" ? "EN" : "CN",
        }, () => {
            this.LanCNEN(this.state.languageCode)
        })
    }


    // 国际化
    CNEN = () => {
        var data = {
            params: [{
                "reactCode": ['Register'],
                "compontName": "Register",
                "type": "C"
            }]
        }

        $http.post('urlDeault', this, {
            code: "01040073",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        languageData2: res.result.language || {},  // 国际化语言包
                    }, () => {
                        this.LanCNEN(this.state.languageCode)
                    })
                }
            }
        });
    }

    LanCNEN = (code) => {
        let { languageData2 } = this.state
        this.setState({
            language: languageData2[code]
        })
    }

    startChange(date) {
        this.setState({
            StartDate: date,
        })
    }

    endChange(date) {
        this.setState({
            EndDate: date,
        })
    }




    //  上一步
    prevBtn = () => {
        this.refs.setCarouselRef.prev();
    }

    //  下一步
    nextBtn = () => {
        let num = this.state.current
        switch (num) {
            case 0:
                this.props.form.validateFields(['descripts', 'sex', 'credType', 'credNo', 'birthdate', 'mobile', 'title', 'identifyCode'], (err, values) => { //'descripts', 'sex', 'credType', 'credNo', 'birthdate', 'mobile', 'title','identifyCode'
                    if (!err) {
                        this.refs.setCarouselRef.next();
                    } else {
                        return false;
                    }
                });
                break;
            case 1:
                this.props.form.validateFields(['hospDr', 'defaultDeptDr', 'post'], (err, values) => {   //'hospDr', 'defaultDeptDr', 'post'
                    if (!err) {
                        this.refs.setCarouselRef.next();
                    } else {
                        return false;
                    }
                });
                break;
            default:
                break;
        }
    }


    // 开始日期选择限制
    disabledStDate(current) {
        // 开始日期不能选择今天和之前的日期
        return current && current > moment().endOf('day');
    }



    //  切换
    onChange = (a) => {
        switch (a) {
            case 0:
                this.setState({
                    current: 0,
                    logintext: language.BasicData && language.BasicData.descripts,
                    displayBtn: {
                        display_prev: 'none',
                        display_next: 'block',
                        display_register: 'none',
                    },
                })

                break;
            case 1:
                this.setState({
                    current: 1,
                    logintext: language.Hospitalpost && language.Hospitalpost.descripts,
                    displayBtn: {
                        display_prev: 'block',
                        display_next: 'block',
                        display_register: 'none',
                    }
                })
                break;
            case 2:
                this.setState({
                    current: 2,
                    logintext: language.AccountPassword && language.AccountPassword.descripts,
                    displayBtn: {
                        display_prev: 'block',
                        display_next: 'none',
                        display_register: 'block',
                    }
                })
                break;
            default:
                break;
        }
    }





    // 获取content的高度
    contentHeight = (e) => {
        let contenth = parseInt(document.body.clientHeight) - 160;
        this.setState({
            contentH: contenth
        })
    }

    //  注册账号表单提交
    handleSubmit = (e) => {
        e.preventDefault();

        this.props.form.validateFields((err, values) => {
            if (!err) {
                let data = {
                    "params": [{
                        "userDesc": values.descripts,
                        "userSexID": values.sex,
                        "userMobile": values.mobile,
                        "identifyCode": values.identifyCode,
                        "userPassword": Aes.Encrypt(values.passWord2),
                        "userDOB": values.birthdate ? moment(values.birthdate).utcOffset(480).format('YYYY-MM-DD') : '',
                        "userTitleID": values.title,
                        "userLogonLocID": values.defaultDeptDr,
                        "userPostID": values.post,
                        "userLogonHospID": values.hospDr,
                        "userCredTypeID": values.credType,
                        "userCredNo": values.credNo,
                        'userCode': values.userCode,
                        'requestFlag': 'R',
                    }]
                };
                $http.post('urlDeault', this, {
                    code: "01040070",
                    data: data,
                    success: function (res) {
                        let errorCode = res.errorCode;
                        if (errorCode === '0') {

                        }
                    }
                });
            }
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        let { languageCode, language, current, imageUrl1, imageUrl2, imageUrl3 } = this.state;
        const {
            Header, Footer, Content,
        } = Layout;
        const steps = [{
            title: language.RegisterBasic && language.RegisterBasic.descripts,
        }, {
            title: '上传证件',
        }, {
            title: '提交审核',
        }];

        const uploadButton = (
            <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'} />
                <div className="ant-upload-text">Upload</div>
            </div>
        );

        return (
            <div>
                <Layout>
                    <Content style={{ height: this.state.contentH }} className="loginContent regContent">
                        <div className="registerBody" style={{ width: '1200px' }}>
                            <div className="regHeader mB30" style={{ marginBottom: '30px' }}>
                                <div className="regTittle">医师注册</div>
                            </div>
                            <div >
                                <div className="mB30">
                                    <Row>
                                        <Col span={23} offset={1}>
                                            <Steps current={current} className="fontBlue" labelPlacement="vertical " >
                                                {steps.map((item, i) => <Step key={i} title={item.title} />)}
                                            </Steps>
                                        </Col>
                                    </Row>
                                </div>
                                <Form onSubmit={this.handleSubmit} className="login-form register-form">
                                    <Carousel ref='setCarouselRef' afterChange={this.onChange} dots="false">
                                        <div >
                                            <Row className="mB10">
                                                <Col span={12} >
                                                    <Form.Item label='姓名' {...formItemLayout}>
                                                        {getFieldDecorator('descripts', {
                                                            rules: [{ required: true, message: language.RegisterName && language.RegisterName.message }],
                                                        })(
                                                            <Input allowClear={true} placeholder={language.RegisterName && language.RegisterName.message} />
                                                        )}
                                                    </Form.Item>
                                                </Col>
                                                <Col span={12} >
                                                    <Form.Item label='性别'  {...formItemLayout}>
                                                        {getFieldDecorator('sex', {
                                                            rules: [{ required: true, message: language.Registersex && language.Registersex.message }],
                                                        })(
                                                            <Select allowClear placeholder={language.Registersex && language.Registersex.message}  >
                                                            </Select>
                                                        )}
                                                    </Form.Item>
                                                </Col>
                                            </Row>
                                            <Row className="mB10">
                                                <Col span={12} >
                                                    <Form.Item label="年龄" {...formItemLayout}>
                                                        {getFieldDecorator('credType', {
                                                            rules: [{ required: true, message: language.RegisterDocument && language.RegisterDocument.message }],
                                                        })(
                                                            <Input allowClear={true} placeholder={language.RegisterName && language.RegisterName.message} />
                                                        )}
                                                    </Form.Item>
                                                </Col>
                                                <Col span={12} >
                                                    <Form.Item label="民族" {...formItemLayout}>
                                                        {getFieldDecorator('credNo', {
                                                            rules: [{ required: true, message: language.RegisterCertificate && language.RegisterCertificate.message }],
                                                        })(
                                                            <Input allowClear={true} placeholder={language.Registerphone && language.Registerphone.message} />

                                                        )}
                                                    </Form.Item>
                                                </Col>
                                            </Row>
                                            <Row className="mB10">
                                                <Col span={12}>
                                                    <Form.Item label="证件类型" {...formItemLayout}>
                                                        {getFieldDecorator('birthdate', {
                                                            rules: [{ required: true, message: language.RegisterDate && language.RegisterDate.message }],
                                                        })(
                                                            <Select allowClear placeholder={language.Registersex && language.Registersex.message}  >
                                                            </Select>
                                                        )}
                                                    </Form.Item>
                                                </Col>
                                                <Col span={12}>
                                                    <Form.Item label="证件号" {...formItemLayout}>
                                                        {getFieldDecorator('mobile', {
                                                            rules: [{ required: true, message: language.Registerphone && language.Registerphone.message }, { pattern: /^1\d{10}$/, message: language.RegisterPleaseNumber && language.RegisterPleaseNumber.descripts }],
                                                        })(
                                                            <Input allowClear={true} placeholder={language.Registerphone && language.Registerphone.message} />
                                                        )}
                                                    </Form.Item>
                                                </Col>
                                            </Row>
                                            <Row className="mB10">
                                                <Col span={12}>
                                                    <Form.Item label="出生日期" {...formItemLayout}>
                                                        {getFieldDecorator('identifyCode', {
                                                            rules: [{ required: true, message: language.RegisterCode && language.RegisterCode.message }],
                                                        })(
                                                            <DatePicker disabledDate={this.disabledStDate} id="birthdate" placeholder={language.RegisterDate && language.RegisterDate.message} style={{ width: "100%" }} format='YYYY-MM-DD' />

                                                        )}
                                                    </Form.Item>
                                                </Col>
                                                <Col span={12} >
                                                    <Form.Item label="手机号码" {...formItemLayout}>
                                                        {getFieldDecorator('title', {
                                                            rules: [{ required: true, message: language.RegisterTitle && language.RegisterTitle.message }],
                                                        })(
                                                            <Input allowClear={true} placeholder={language.Registerphone && language.Registerphone.message} />

                                                        )}
                                                    </Form.Item>
                                                </Col>
                                            </Row>
                                            <Row className="mB10">
                                                <Col span={12} >
                                                    <Form.Item label="医师级别" {...formItemLayout}>
                                                        {getFieldDecorator('title', {
                                                            rules: [{ required: true, message: language.RegisterTitle && language.RegisterTitle.message }],
                                                        })(
                                                            <Select allowClear placeholder={language.Registersex && language.Registersex.message}  >
                                                            </Select>
                                                        )}
                                                    </Form.Item>
                                                </Col>
                                                <Col span={12} >
                                                    <Form.Item label="任职资格" {...formItemLayout}>
                                                        {getFieldDecorator('title', {
                                                            rules: [{ required: true, message: language.RegisterTitle && language.RegisterTitle.message }],
                                                        })(
                                                            <Select allowClear placeholder={language.Registersex && language.Registersex.message}  >
                                                            </Select>

                                                        )}
                                                    </Form.Item>
                                                </Col>
                                            </Row>
                                            <Row className="mB10">
                                                <Col span={12} >
                                                    <Form.Item label="医师类别" {...formItemLayout}>
                                                        {getFieldDecorator('title', {
                                                            rules: [{ required: true, message: language.RegisterTitle && language.RegisterTitle.message }],
                                                        })(
                                                            <Input allowClear={true} placeholder={language.Registerphone && language.Registerphone.message} />

                                                        )}
                                                    </Form.Item>
                                                </Col>
                                                <Col span={12} >
                                                    <Form.Item label="机构代码" {...formItemLayout}>
                                                        {getFieldDecorator('title', {
                                                            rules: [{ required: true, message: language.RegisterTitle && language.RegisterTitle.message }],
                                                        })(
                                                            <Input allowClear={true} placeholder={language.Registerphone && language.Registerphone.message} />


                                                        )}
                                                    </Form.Item>
                                                </Col>
                                            </Row>
                                            <Row className="mB10">
                                                <Col span={12} >
                                                    <Form.Item label="医师资格证书编码" {...formItemLayout}>
                                                        {getFieldDecorator('title', {
                                                            rules: [{ required: true, message: language.RegisterTitle && language.RegisterTitle.message }],
                                                        })(
                                                            <Input allowClear={true} placeholder={language.Registerphone && language.Registerphone.message} />


                                                        )}
                                                    </Form.Item>
                                                </Col>
                                                <Col span={12} >
                                                    <Form.Item label="医师执业证书编码" {...formItemLayout}>
                                                        {getFieldDecorator('title', {
                                                            rules: [{ required: true, message: language.RegisterTitle && language.RegisterTitle.message }],
                                                        })(
                                                            <Input allowClear={true} placeholder={language.Registerphone && language.Registerphone.message} />

                                                        )}
                                                    </Form.Item>
                                                </Col>
                                            </Row>
                                            <Row className="mB10">
                                                <Col span={12} >

                                                </Col>
                                            </Row>
                                        </div>
                                        <div >
                                            <Row>
                                                <Col span={24}>
                                                    <Row>
                                                        <Col span={4} offset={3}  style={{marginTop:'100px'}}>
                                                            <Steps current={current}  direction="vertical"  size="small" className="stepsVer" labelPlacement="vertical" onChange={this.onChange} >
                                                                {steps.map((item, i) => <Step key={i} title={item.title} />)}
                                                            </Steps>
                                                        </Col>
                                                        <Col span={17}  style={{marginTop:'100px'}}>
                                                            <Carousel dotPosition="right" dots="false">
                                                                <div>
                                                                    <Row>
                                                                        <Col span={12}>
                                                                            <Row type="flex" justify="center" >
                                                                                <div style={{ textAlign: 'center' }}>
                                                                                    <span className="mB10" style={{ display: 'inline-block' }}>上传身份证正面照片</span>
                                                                                    <div>
                                                                                        <Upload
                                                                                            accept="image/jpeg,image/png"
                                                                                            listType="picture-card"
                                                                                            className="midUp"
                                                                                            // className={this.state.errorImg ? 'errorImg' : ''}
                                                                                            showUploadList={false}
                                                                                        // beforeUpload={this.beforeUpload}
                                                                                        // onChange={this.handleImgChange}
                                                                                        >
                                                                                            {imageUrl3 ? <img src={imageUrl3} style={{ width: '100%' }} /> : uploadButton}
                                                                                        </Upload>
                                                                                    </div>
                                                                                </div>
                                                                            </Row>
                                                                        </Col>
                                                                        <Col span={12}>
                                                                            <Row type="flex" justify="center" >
                                                                                <div style={{ textAlign: 'center' }}>
                                                                                    <span className="mB10" style={{ display: 'inline-block' }}>上传身份证反面照片</span>
                                                                                    <div>
                                                                                        <Upload
                                                                                            accept="image/jpeg,image/png"
                                                                                            listType="picture-card"
                                                                                            className="midUp"
                                                                                            // className={this.state.errorImg ? 'errorImg' : ''}
                                                                                            showUploadList={false}
                                                                                        // beforeUpload={this.beforeUpload}
                                                                                        // onChange={this.handleImgChange}
                                                                                        >
                                                                                            {imageUrl3 ? <img src={imageUrl3} style={{ width: '100%' }} /> : uploadButton}
                                                                                        </Upload>
                                                                                    </div>
                                                                                </div>
                                                                            </Row>
                                                                        </Col>
                                                                    </Row>
                                                                </div>
                                                                <div>
                                                                    <Row>
                                                                        <Col span={24}>
                                                                            <Row type="flex" justify="center" >
                                                                                <div style={{ textAlign: 'center' }}>
                                                                                    <span className="mB10" style={{ display: 'inline-block' }}>上传医师资格证照片</span>
                                                                                    <div>
                                                                                        <Upload
                                                                                            accept="image/jpeg,image/png"
                                                                                            listType="picture-card"
                                                                                            className="midUp"

                                                                                            // className={this.state.errorImg ? 'errorImg' : ''}
                                                                                            showUploadList={false}
                                                                                        // beforeUpload={this.beforeUpload}
                                                                                        // onChange={this.handleImgChange}
                                                                                        >
                                                                                            {imageUrl3 ? <img src={imageUrl3} style={{ width: '100%' }} /> : uploadButton}
                                                                                        </Upload>
                                                                                    </div>
                                                                                </div>
                                                                            </Row>
                                                                        </Col>
                                                                    </Row>
                                                                </div>
                                                                <div>
                                                                    <Row>
                                                                        <Col span={24}>
                                                                            <Row type="flex" justify="center" >
                                                                                <div style={{ textAlign: 'center' }}>
                                                                                    <span className="mB10" style={{ display: 'inline-block' }}>上传医师执业证书照片</span>
                                                                                    <div>
                                                                                        <Upload
                                                                                            accept="image/jpeg,image/png"
                                                                                            listType="picture-card"
                                                                                            className="midUp"
                                                                                            // className={this.state.errorImg ? 'errorImg' : ''}
                                                                                            showUploadList={false}
                                                                                        // beforeUpload={this.beforeUpload}
                                                                                        // onChange={this.handleImgChange}
                                                                                        >
                                                                                            {imageUrl3 ? <img src={imageUrl3} style={{ width: '100%' }} /> : uploadButton}
                                                                                        </Upload>
                                                                                    </div>
                                                                                </div>
                                                                            </Row>
                                                                        </Col>
                                                                    </Row>
                                                                </div>
                                                            </Carousel>
                                                        </Col>
                                                    </Row>
                                                </Col>
                                            </Row>
                                        </div>
                                        <div>
                                            <Row className="mB10">
                                                <Col span={24} >
                                                    <Form.Item label='账号' {...formItemLayout}>
                                                        {getFieldDecorator('descripts', {
                                                            rules: [{ required: true, message: language.RegisterName && language.RegisterName.message }],
                                                        })(
                                                            <Input allowClear={true} placeholder={language.RegisterName && language.RegisterName.message} />
                                                        )}
                                                    </Form.Item>
                                                </Col>
                                            </Row>
                                            <Row className="mB10">
                                                <Col span={24} >
                                                    <Form.Item label='密码' {...formItemLayout}>
                                                        {getFieldDecorator('descripts', {
                                                            rules: [{ required: true, message: language.RegisterName && language.RegisterName.message }],
                                                        })(
                                                            <Input allowClear={true} placeholder={language.RegisterName && language.RegisterName.message} />
                                                        )}
                                                    </Form.Item>
                                                </Col>
                                            </Row>
                                            <Row className="mB10">
                                                <Col span={24} >
                                                    <Form.Item label='确认密码' {...formItemLayout}>
                                                        {getFieldDecorator('descripts', {
                                                            rules: [{ required: true, message: language.RegisterName && language.RegisterName.message }],
                                                        })(
                                                            <Input allowClear={true} placeholder={language.RegisterName && language.RegisterName.message} />
                                                        )}
                                                    </Form.Item>
                                                </Col>
                                            </Row>
                                        </div>
                                    </Carousel>
                                    <Row>
                                        <Col span={24}>
                                            <Row >
                                                <Col span={6} offset={6}>
                                                    <Form.Item style={{ display: this.state.displayBtn.display_prev }}>
                                                        <Button type="default" className="login-form-button back" onClick={this.prevBtn} >{language.Registercall && language.Registercall.descripts}</Button>
                                                    </Form.Item>
                                                </Col>
                                                <Col span={6} offset={6}>
                                                    <Form.Item style={{ display: this.state.displayBtn.display_next }}>
                                                        <Button type="primary" className="login-form-button" onClick={this.nextBtn}>{language.RegisterNextStep && language.RegisterNextStep.descripts}</Button>
                                                    </Form.Item>
                                                    <Form.Item style={{ display: this.state.displayBtn.display_register }}>
                                                        <Button type="primary" htmlType="submit" className="login-form-button" onClick={this.register} >{language.Registerregister && language.Registerregister.descripts}</Button>
                                                    </Form.Item>
                                                </Col>
                                            </Row>
                                        </Col>
                                    </Row>
                                </Form>
                            </div>
                        </div>
                    </Content>
                </Layout>
            </div >
        );
    }
}

const PhysicianRegistrationFrom = Form.create()(PhysicianRegistration);
export default PhysicianRegistrationFrom