import React, { Component } from 'react';
import { SnackbarHOC ,CNotificationHOC} from 'educoder';
import {Route,Switch} from 'react-router-dom';
import Loadable from 'react-loadable';
import Loading from '../../Loading';
import axios from 'axios';
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import Bottomsubmit from "../modals/Bottomsubmit";
import Educationitem from "./Resume/Educationitem"
import WorkItem from "./Resume/WorkItem"



import { Input ,Form,Radio,Upload,DatePicker,Select,Button,Icon} from 'antd';

const Option = Select.Option;
const RadioGroup=Radio.Group;
const  TextArea = Input.TextArea;
class EditResume extends Component{
  constructor(props){
    super(props);
    this.state={

    }
  }

  componentDidMount=()=>{

  }


  submit=()=>{
    this.props.form.validateFieldsAndScroll((err, values) => {
      if(!err){
        console.log(values)
      }
    })
  }

  cancel=()=>{
    if(this.Educationitem){
      this.Educationitem.cancel() //调用子组件的dream方法
    }
  }

  education=(educationarray)=>{
    console.log(educationarray)
  }

  workcancel=()=>{
    if(this.WorkItem){
      this.WorkItem.cancel() //调用子组件的dream方法
    }
  }

  workeducation=(educationarray)=>{
    console.log(educationarray)
  }
  

  render(){
    const {getFieldDecorator} = this.props.form;
    const uploadButton = (
      <div>
        <div className="ant-upload-text">上传照片</div>
      </div>
    );
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 },
      },
    };
    
    const props = {
      name: 'file',
      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      headers: {
        authorization: 'authorization-text',
      },
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          //message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          //message.error(`${info.file.name} file upload failed.`);
        }
      },
    };
    // const formItemLayoutWithOutLabel = {
    //   wrapperCol: {
    //     xs: { span: 2, offset: 0 },
    //     sm: { span: 22, offset: 4 },
    //   },
    // };
    return(
      <div className="clearfix mt25">
        <div className="educontent mt10 pb20 w1200s">
             <Form 
             {...formItemLayout}
             className="edu-back-white" style={{padding:20,marginBottom:180}}>
              <Form.Item style={{display:'flex'}} label="姓名">
                 {getFieldDecorator('name', {
                  rules: [{required: true, message: "姓名不能为空"}],
              })(
                 <Input placeholder="请输入姓名" onChange={this.handleChange} style={{width:400}}  maxLength={60} />
              )}
              </Form.Item>
              <Form.Item
                label="性别"
                style={{display:'flex'}}
              >
                {getFieldDecorator('sex', {
                  rules: [{
                    required: true,
                    message: '请选择性别',
                  }],
                })(
                  <RadioGroup>
                      <Radio value="0" >男</Radio>
                      <Radio value="1" >女</Radio>
                  </RadioGroup>
                )}
              </Form.Item>
              <Form.Item
               label="照片上传"
               style={{display:'flex'}}

                >
                <div>
                  <div>只支持JPG格式,大小不要超过500k</div>
                  <Upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  listType="picture-card"
                  style={{display:'flex'}}
                  onPreview={this.handlePreview}
                  onChange={this.handleChange}
                >
                  {uploadButton}
                </Upload>
                </div>
              </Form.Item>  

              <Form.Item
                label="出生日期"
                style={{display:'flex'}}
              >
                {getFieldDecorator('birth_on', {
                  rules: [{
                    required: true,
                    message: '请选择出生日期',
                  }],
                })(
                    <DatePicker
                      showToday={false}
                      placeholder="请选择出生日期"
                      // showTime={{format: 'HH:mm'}}
                      locale={locale}
                      onChange={this.onChangeTimepublishs}
                    />
                )}
              </Form.Item>
              <Form.Item style={{display:'flex'}} label="手机号">
                 {getFieldDecorator('mobile', {
                  rules: [{required: true, message: "不能为空"}],
              })(
                 <Input placeholder="请输入手机号" style={{width:400}} onChange={this.handleChange}  maxLength={60} />
              )}
              </Form.Item>
              <Form.Item style={{display:'flex'}} label="求职意向">
                 {getFieldDecorator('job_position', {
                  rules: [{required: true, message: "请选择期望职位"}],
              })(
                <Select style={{ width: 400 }} onChange={this.handleChange}>
                  <Option value="jack">请选择期望职位</Option>
                </Select>
              )}
              </Form.Item>
              <Form.Item style={{display:'flex'}} label="工作城市">
                 {getFieldDecorator('city', {
                  rules: [{required: true, message: "请选择期望工作城市"}],
              })(
                <Select  style={{ width: 400 }} onChange={this.handleChange}>
                  <Option value="jack">请选择期望工作城市</Option>
                </Select>
              )}
              </Form.Item>
              <Form.Item style={{display:'flex'}} label="期望薪资">
                 {getFieldDecorator('salary', {
                  rules: [{required: true, message: "请选择期望薪资"}],
              })(
                <Select style={{ width: 400 }} onChange={this.handleChange}>
                  <Option value="lucy">请选择期望薪资</Option>
                </Select>
              )}
              </Form.Item>

              <Form.Item style={{display:'flex'}} label="工作性质">
                 {getFieldDecorator('job_category', {
                  rules: [{required: true}],
              })(
                <RadioGroup>
                <Radio value="0" >全职</Radio>
                <Radio value="1" >兼职</Radio>
                <Radio value="2" >实习</Radio>

            </RadioGroup>
              )}
            </Form.Item>
            <Form.Item
              label='教育经历'
              style={{ marginBottom: 0 }}
            >
              <div  style={{ display: 'inline-block', width: 'calc(100%)' }}>
          <Form.Item
            style={{ display: 'inline-block', width: 'calc(20% - 12px)' }}
          >
            {getFieldDecorator('edu_bg', {
                  rules: [{required: true, message: "学历不能为空"}],
              })(
                 <Input placeholder="请输入学历" style={{width:180}} onChange={this.handleChange}  maxLength={60} />
              )}              
         
          </Form.Item>
          <Form.Item 
          style={{ display: 'inline-block', width: 'calc(20% - 12px)' }}>
               {getFieldDecorator('edu_category', {
                  rules: [{required: true, message: "学历类型不能为空"}],
              })(
                 <Input placeholder="请输入学历类型" style={{width:180}} onChange={this.handleChange}  maxLength={60} />
              )}     
          </Form.Item>
        </div>
            <Form.Item
                style={{ display: 'inline-block', width: 'calc(20% - 12px)' }}
              >
                {getFieldDecorator('begin_on', {
                  rules: [{
                    required: true,
                    message: '请选择开始日期',
                  }],
                })(
                    <DatePicker
                      showToday={false}
                      placeholder="请选择开始日期"
                      // showTime={{format: 'HH:mm'}}
                        style={{width:180}}
                      locale={locale}
                      onChange={this.onChangeTimepublishs}
                    />
                )}
            </Form.Item>
         
            <Form.Item
                style={{ display: 'inline-block', width: 'calc(20% - 12px)' }}
              >
                {getFieldDecorator('end_on', {
                  rules: [{
                    required: true,
                    message: '请选择结束日期',
                  }],
                })(
                    <DatePicker
                      showToday={false}
                      placeholder="请选择结束日期"
                      // showTime={{format: 'HH:mm'}}
                        style={{width:180}}
                      locale={locale}
                      onChange={this.onChangeTimepublishs}
                    />
                )}
            </Form.Item>

            <Form.Item>
            {getFieldDecorator(`school`, {
              validateTrigger: ['onChange', 'onBlur'],
              rules: [
                {
                  required: true, message: "不能为空"
                },
              ],
            })(<Input placeholder="请输入学校名称" style={{ width:'60%',marginRight:8 }} />)}
            </Form.Item> 
              <Educationitem  {...this.props} {...this.state} education={this.education} onRef={c=>this.Educationitem=c}/>
                <Button type="dashed" onClick={this.cancel} style={{ width: '30%' }}>
                  添加教育经历
                </Button>
              </Form.Item>
             
              <Form.Item
                label='工作/实习经历'
                style={{ marginBottom: 0 }}
              >
              <Form.Item
                  style={{ display: 'inline-block', width: 'calc(20% - 12px)' }}
                >
                  {getFieldDecorator('begin_on', {
                    rules: [{
                      required: true,
                      message: '请选择开始日期',
                    }],
                  })(
                      <DatePicker
                        showToday={false}
                        placeholder="请选择开始日期"
                        // showTime={{format: 'HH:mm'}}
                          style={{width:180}}
                        locale={locale}
                        onChange={this.onChangeTimepublishs}
                      />
                  )}
              </Form.Item>
          
              <Form.Item
                  style={{ display: 'inline-block', width: 'calc(20% - 12px)' }}
                >
                  {getFieldDecorator('end_on', {
                    rules: [{
                      required: true,
                      message: '请选择结束日期',
                    }],
                  })(
                      <DatePicker
                        showToday={false}
                        placeholder="请选择结束日期"
                        // showTime={{format: 'HH:mm'}}
                          style={{width:180}}
                        locale={locale}
                        onChange={this.onChangeTimepublishs}
                      />
                  )}
              </Form.Item>

              <Form.Item>
              {getFieldDecorator(`school`, {
                validateTrigger: ['onChange', 'onBlur'],
                rules: [
                  {
                    required: true, message: "不能为空"
                  },
                ],
              })(<Input placeholder="请输入公司名称" style={{ width:'60%',marginRight:8 }} />)}
              </Form.Item> 

              <Form.Item>
              {getFieldDecorator(`des`, {
                validateTrigger: ['onChange', 'onBlur'],
                rules: [
                  {
                    required: true, message: "不能为空"
                  },
                ],
              })(<TextArea placeholder="请输入公司描述" rows={4} style={{ width:'60%',marginRight:8 }} />)}
              </Form.Item> 
                <WorkItem  {...this.props} {...this.state} workeducation={this.workeducation} onRef={c=>this.WorkItem=c}/>

                {/* <WorkItem  {...this.props} {...this.state} workeducation={this.workeducation} onRef={c=>this.WorkItem=c}/> */}
              
                <Button type="dashed" onClick={this.workcancel} style={{ width: '30%' }}>
                  添加工作经历
                </Button> 
                </Form.Item>
                <Form.Item
                label='自我评价'
                >
                {getFieldDecorator(`school`, {
                  validateTrigger: ['onChange', 'onBlur'],
                  rules: [
                    {
              
                    },
                  ],
                })(<TextArea   rows={4} placeholder="请输入自我评价" style={{ width:'60%',marginRight:8 }} />)}
                </Form.Item> 

                <Form.Item
               label="简历上传"
               style={{display:'flex'}}

                >
                <div>
                  <div>（上传简历可以提高应聘成功率）</div>
                  <Upload {...props} className="upload_1 upload_under_markdown_editor">
                  <Button className="uploadBtn">
                    <Icon type="upload" /> 上传简历
                  </Button>
                  <span style={{color:'#E77234',}}>(提示：不超过10MB，扩展名为pdf、doc、docx、ppt、pptx、png、jpg、jpeg)</span>
                </Upload>
                </div>
              </Form.Item>  

            </Form>
        </div>
        <Bottomsubmit {...this.props} {...this.state} bottomvalue={"确定"}
											Cohetepaperbool={true}
											setCohetepaperbool={() => this.props.setnewmyshixunmodelbool(false)}
											onSubmits={() => this.props.setnewmyshixunmodelbool(false)} url={'/paperlibrary'}></Bottomsubmit>
    </div>
    )
  }
}
const EditResumeForm = Form.create({ name: 'EditResumeForm' })(EditResume);
export default CNotificationHOC() (SnackbarHOC() ( TPMIndexHOC(EditResumeForm) )) ;