// 新增报名页面
import React, { Component } from 'react';
import style from 'styled-components';
import { connect } from 'dva';
import {
  Breadcrumb,
  Alert,
  Form,
  Row,
  Col,
  Input,
  Upload,
  Icon,
  InputNumber,
  Cascader,
  Table,
  DatePicker,
  Select,
  Button,
  Popconfirm,
  Modal,
  Checkbox
} from 'antd';
import { Link } from 'dva/router';
import {
  getBayBaseInfo,
  getTreeperBydepart,
  checkIsSetRegulator,
  getDistrictData,
  getConfigBayzgzSb,
  bayzgzTempSave,
  bayzgzSave,
  getBayzgzSbInfoById,
  bayzgzCheckResubmit,
  getPerAuthRecordbyId,
  checkIsExistsEffectBayzgz,
  getComContractListByPerId
} from '../../../services/api';
import PFromUpload from '../../../components/Pro/PFromUpload';
import $perModal from '../../../utils/modal/perModal';
import moment from 'moment';
import PSelect from '../../../components/Pro/PSelect';
import { withRouter } from 'dva/router';
import SelectContactByPerId, { colFn } from '../../../components/contranct/SelectContactByPerId';
import { checkMember, checkPerCanSignUp } from '../../../utils/utils';
import PCascader from '../../../components/Pro/PCascader';

const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 18
  }
};
const tipLayout = {
  labelCol: {
    span: 3
  },
  wrapperCol: {
    span: 21
  }
};
const photoItemLayout = {
  labelCol: {
    xl: {
      span: 12
    },
    xxl: {
      span: 8
    }
  },
  wrapperCol: {
    xl: {
      span: 12
    },
    xxl: {
      span: 16
    }
  }
};

const addressLayout = {
  labelCol: {
    lg: {
      span: 0
    },
    xl: {
      span: 0
    },
    xxl: {
      span: 0
    }
  },
  wrapperCol: {
    lg: {
      span: 24
    },
    xl: {
      span: 24
    },
    xxl: {
      span: 24
    }
  }
};

const dateFormat = 'YYYY-MM-DD';
const { Option } = Select;
@connect(state => ({
  companyInfo: state.global.companyInfo
}))
@Form.create()
@withRouter
export default class FillIn extends Component {
  // bayFamilyMemberDtoList = 0;
  // bayWorkExperienceDtoList = 0;
  constructor(props, context) {
    super(props, context);
    this.state = {
      isAddOrEdit: true, //编辑或者是新增页面（true是新增，false是编辑，默认是新增页面）
      basicInfoStatus: false, //基础信息是否展示（新增页面要判断有无选择人员，修改页面默认展示）
      bayzgzSbId: '', //
      treeData: [
        // 部门数据
        //树
        { title: '', key: '' }
      ],
      comName: this.props.companyInfo.comName,
      areas: [], //省市区
      // bayFamilyMemberDtoList: [],
      // bayWorkExperienceDtoList: [], //保安员工作经历
      perInfo: {
        //人员基础信息
        name: null,
        mobilePhone: null,
        idCardNo: null,
        birthday: null,
        sex: null,
        height: null,
        education: null,
        // residentProvince: null,
        // residentCity: null,
        // residentArea: null,
        // residenceAddress: null,
        residenceAddress: null,
        domicileProvince: null,
        domicileCity: null,
        domicileArea: null,
        domicileAddress: null,
        nation: null
      },
      perId: null,
      perIdName: '', //perId对应的人名
      bayConfigInfo: [], //保安员的配置信息
      photo: {
        colourPhotoUrl: '',
        idCardFrontUrl: '',
        idCardReverseUrl: '',
        eduCerUrl: '',
        hospitalExamProveUrl: ''
      },
      isConfig: true, //新增页面判断是否有配置
      key: 0, //用来重置图片的路径用
      repetitionStatus: false, //选中的人员是否重复
      buttonStatus: false, //提交按钮是否置灰

      comContractList: [], //选中的合同列表
      isPersonPhoto: false,//选中的人员是否有人口库照片
      checked: false,  //是否勾选报名承诺,没有勾选不让提交
      isNanNiCode: this.props.location.isNanNiCode || false,//是否是南宁地区//如果是的话，需要隐藏合同字段
    };
  }
  componentWillMount() {
    this.__getDepart();
    // this.__getDistrict();
    this.__getConfigBayzgzSb();
    this._getAgentInfo();
    if (this.props.location.bayzgzSbId) {
      //是编辑页面
      // this._getBayzgzSbInfoById(this.props.location.bayzgzSbId); //获取人员的详细信息
      this.getPersonInfo(this.props.location.bayzgzSbId); //获取人员的详细信息
      this.__checkIsExistsEffect(this.props.location.bayzgzSbId);//验证是否有人口库照片
      this.setState({
        isAddOrEdit: false,
        bayzgzSbId: this.props.location.bayzgzSbId,
        basicInfoStatus: true
      });
    } else {
      //是新增页面
      /**
       *先判断该企业是否有配置
       *0：代表未设置 1：代表已设置
       */
      this.__checkIsSetRegulator();
      this.setState({
        isAddOrEdit: true,
        basicInfoStatus: false,
      }, () => {
        if (this.props.location.perInfo) { //未持证列表跳转过来的页面
          const info = JSON.parse(this.props.location.perInfo);
          this.setState({
            perId: info.perId || null,
            perIdName: info.perIdName || '',
            perInfo: {
              ...this.state.perInfo,
              ...info
            },
            basicInfoStatus: true,
          }, () => {
            this.__getComContractListByPerId();
          });
        }
      });
    }
  }
  componentDidMount() {
  }
  // 判断是否是北京地区(北京地区隐藏劳动合同、户籍类型、户籍所在地三个字段)
  checkBeijinCode() {
    let regProvince = String(this.props.companyInfo.regProvince);
    return regProvince && regProvince.indexOf('110') == 0
  }
  // 判断是否为商洛地区
  checkSRAreaCode = () => {
    let regCity = String(this.props.companyInfo.regCity);
    return regCity && regCity.indexOf('611000') == 0
  }
  // 获取代理人信息
  _getAgentInfo = () => {
    return getBayBaseInfo().then(res => {
      this.setState({
        agentInfo: res.data
      });
    })
  }
  //该企业是否有配置
  __checkIsSetRegulator() {
    checkIsSetRegulator({
      regulatorType: '2'
    }).then(data => {
      const that = this;
      if (data.retType === '0') {
        if (data.data === '1') {
          this.setState({
            isConfig: true
          });
        } else {
          this.setState({
            isConfig: false
          });
          Modal.warning({
            title: '该企业暂未设置监管机构，请先设置',
            okText: '前往设置',
            onOk() {
              that.props.history.replace('/enterprise/regulator-set');
            }
          });
        }
      }
    });
  }
  // 获取人员合同列表
  __getComContractListByPerId() {
    const { perId, comContractId } = this.state;
    getComContractListByPerId({ perId, pageNumber: 1, pageSize: 100 }).then(res => {
      const contractInfo = res.data.data.find(item => item.comContractId == comContractId);
      const comContractList = [];
      contractInfo && comContractList.push(contractInfo);
      this.setState({ comContractList });
    });
  }
  //修改页面中获取详情信息
  _getBayzgzSbInfoById(bayzgzSbId) {
    getBayzgzSbInfoById({
      bayzgzSbId
    }).then(res => {
      log(res.data, 'res.data')
      if (res.retType === '0') {
        const { comContractId } = res.data;
        this.setState({
          // bayFamilyMemberDtoList: res.data.bayFamilyMemberDtoList
          //   ? res.data.bayFamilyMemberDtoList
          //   : [],
          // bayWorkExperienceDtoList: res.data.bayWorkExperienceDtoList
          //   ? res.data.bayWorkExperienceDtoList
          //   : [],
          perInfo: {
            ...res.data
          },
          perId: bayzgzSbId,
          comContractId,
          photo: {
            colourPhotoUrl: res.data.colourPhotoUrl || '',
            idCardFrontUrl: res.data.idCardFrontUrl || '',
            idCardReverseUrl: res.data.idCardReverseUrl || '',
            eduCerUrl: res.data.eduCerUrl || '',
            hospitalExamProveUrl: res.data.hospitalExamProveUrl || ''
          },
          perIdName: res.data.name
        }, () => {
          if (comContractId) {
            this.props.form.setFieldsValue({
              idCardFrontUrl: res.data.idCardFrontUrl || '',
              idCardReverseUrl: res.data.idCardReverseUrl || ''
            });
            this.__getComContractListByPerId();
          }
        });
      }
    });
  }
  //获取部门树数据
  __getDepart = cb => {
    getTreeperBydepart().then(
      response => {
        const responseData = checkMember(response.data);
        this.setState({ treeData: responseData });
      },
      err => {
        this.setState({
          loading: false
        });
        console.log(err, 'err-部门人员-getTreeperBydepart');
      }
    );
  };
  //获取人员信息
  getPersonInfo(perId, isPersonPhoto = '2') {
    getBayBaseInfo({ perId }).then(res => {
      const that = this;
      if (res.retType === '0') {
        that.setState({
          perInfo: res.data,
          basicInfoStatus: true,
          // bayWorkExperienceDtoList: [],
          // bayFamilyMemberDtoList: [],
          perId,
          photo: {
            colourPhotoUrl: res.data.colourPhotoUrl || '',
            idCardFrontUrl: res.data.idCardFrontUrl || '',
            idCardReverseUrl: res.data.idCardReverseUrl || '',
            eduCerUrl: res.data.eduCerUrl || '',
            hospitalExamProveUrl: res.data.hospitalExamProveUrl || ''
          },
        }, () => {
          const { setFieldsValue } = this.props.form;
          this.props.form.resetFields()
          setFieldsValue({
            perIdName: this.state.perInfo.name,
            name: this.state.perInfo.name,
            mobilePhone: this.state.perInfo.mobilePhone,
            idCardNo: this.state.perInfo.idCardNo,
            colourPhotoUrl: res.data.colourPhotoUrl,
            birthday: this.state.perInfo.birthday ? moment(this.state.perInfo.birthday, dateFormat) : null,
            sex: this.state.perInfo.sex,
            height: this.state.perInfo.height,
            nation: this.state.perInfo.nation,
            education: this.state.perInfo.education,
            // resident: this.state.perInfo.residentProvince ? [
            //   this.state.perInfo.residentProvince,
            //   this.state.perInfo.residentCity,
            //   this.state.perInfo.residentArea
            // ] : [],
            // residenceAddress: this.state.perInfo.residenceAddress,
            // residentFullAddress:this.state.perInfo.residentFullAddress,
            domicile: this.state.perInfo.domicileProvince ? [
              this.state.perInfo.domicileProvince,
              this.state.perInfo.domicileCity,
              this.state.perInfo.domicileArea
            ] : [],
            domicileAddress: this.state.perInfo.domicileAddress,
            idCardFrontUrl: this.state.photo.idCardFrontUrl,
            idCardReverseUrl: this.state.photo.idCardReverseUrl,
          });
          this.setState({
            key: Math.random(),
          });
        });
        if (isPersonPhoto == '2' && !!!res.data.colourPhotoUrl) {
          Modal.warning({
            title:
              '此人暂未有一寸免冠白底彩照，请通知该员工登录App-工作-证件照采集页面进行采集。'
          });
        }
      }
    });
  }
  //验证是否有人口库照片
  __checkIsExistsEffect(perId) {
    checkIsExistsEffectBayzgz({ perId }).then(res => {
      if (res.data == 1) {
        return;
      } else {
        this.setState({
          isPersonPhoto: res.data
        })
      }
    })
  }
  //获取保安员配置是否必填
  __getConfigBayzgzSb() {
    getConfigBayzgzSb().then(res => {
      if (res.retType === '0') {
        this.setState({
          bayConfigInfo: res.data
        });
      }
    });
  }
  //校验该保安员资格证是否重复提交
  _bayzgzCheckResubmit(perId, cb) {
    bayzgzCheckResubmit({ perId }).then(res => {
      // const that = this
      if (res.retType === '0') {
        if (res.data === 0) {
          //不可以报名
          this.props.form.resetFields();
          this.setState({
            repetitionStatus: 0,
            perId: null,
            perIdName: ''
          });
          Modal.warning({
            title: '不可以报名:报名已经审核通过或者审核中',
            okText: '确定',
            onOk() {
            }
          });
        } else if (res.data === 2) {
          //不可以报名
          this.props.form.resetFields();
          this.setState({
            // basicInfoStatus: false
            repetitionStatus: 2,
            perId: null,
            perIdName: ''
          });
          Modal.warning({
            title: '不可以报名:此人报名存在暂存未提交记录',
            okText: '确定',
            onOk() {
            }
          });
        } else {
          //可以报名
          this.setState({
            // basicInfoStatus: false
            repetitionStatus: false
          });

          cb && cb();
          //可以提交的时候再去请求人员数据信息
          // this.getPersonInfo(perId);
        }
      }
    });
  }
  // //省市区
  // __getDistrict = () => {
  //   getDistrictData().then(data => {
  //     let areas = data.data.map(val => {
  //       return {
  //         value: val.regionId,
  //         label: val.regionName,
  //         children: val.childs.map(valChild => {
  //           return {
  //             value: valChild.regionId,
  //             label: valChild.regionName,
  //             children: valChild.childs.map(valChildChild => {
  //               return {
  //                 value: valChildChild.regionId,
  //                 label: valChildChild.regionName
  //               };
  //             })
  //           };
  //         })
  //       };
  //     });
  //     this.setState({
  //       areas: areas
  //     });
  //   });
  // };
  //通过身份证计算出年龄
  _getAge(idCardNo) {
    const len = idCardNo.length;
    if (len == 0) {
      return '';
    } else {
      if ((len != 15) && (len != 18))//身份证号码只能为15位或18位其它不合法
      {
        return '';
      }
    }
    let strBirthday = "";
    if (len == 18)//处理18位的身份证号码从号码中得到生日和性别代码
    {
      strBirthday = idCardNo.substr(6, 4) + "/" + idCardNo.substr(10, 2) + "/" + idCardNo.substr(12, 2);
    }
    if (len == 15) {
      strBirthday = "19" + idCardNo.substr(6, 2) + "/" + idCardNo.substr(8, 2) + "/" + idCardNo.substr(10, 2);
    }
    //时间字符串里，必须是“/”
    var birthDate = new Date(strBirthday);
    var nowDateTime = new Date();
    var age = nowDateTime.getFullYear() - birthDate.getFullYear();
    //再考虑月、天的因素;.getMonth()获取的是从0开始的，这里进行比较，不需要加1
    if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() == birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
      age--;
    }
    return age;
    // if(idCardNo){
    //   const date = new Date();
    //   const year = date.getFullYear(); 
    //   const birthday_year = parseInt(idCardNo.substr(6,4));
    //   const userage= year - birthday_year;
    //   return userage
    // }else{
    //   return ''
    // }    
  }
  $handleFieldChange(param, e, fieldName, id, idName, entryDate) {
    if (fieldName === 'leaveDate' && entryDate) {
      if (new Date(entryDate).getTime() > new Date(e).getTime()) {
        Modal.warn({
          title: '离职时间不能大于入职时间'
        });
        return;
      }
    }
    const newData = this.state[param].map(item => ({ ...item }));
    const target = this.$getRowByKey(param, id, newData, idName);
    if (target) {
      target[fieldName] = e;
      this.setState({ [param]: newData });
    }
  }
  $getRowByKey(param, id, newData, idName) {
    return (newData || this.state[param]).filter(
      item => item[idName] === id
    )[0];
  }
  $add(param, idName) {
    const newData =
      this.state[param] && this.state[param].map(item => ({ ...item }));
    newData.push({
      [idName]: `NEW_TEMP_ID_${this[param]}`,
      name: '',
      relation: '',
      idCardType: '',
      idCardNo: null,
      contactPhone: null
    });
    this[param] += 1;
    this.setState({ [param]: newData });
  }
  //删除
  $remove(param, id, idName) {
    const newData = this.state[param].filter(item => item[idName] !== id);
    this.setState({ [param]: newData });
  }
  errModal(param) {
    Modal.warning({
      title: param,
      okText: '知道了'
    });
    this.setState({
      buttonStatus: false
    });
  }
  _renderConTable = () => {
    const columns = colFn.call(this);
    columns.push({
      title: '操作',
      dataIndex: 'op',
      key: 'op',
      render: () => {
        return (
          <a onClick={() => {
            this.setState({
              comContractList: []
            });
          }}>移除关联</a>
        );
      }
    });
    return (
      <Row>
        <Col span={24} className="miniLabelWidth">
          <Form.Item {...formItemLayout} label="合同信息">
            <Table
              dataSource={this.state.comContractList} footer={null} columns={columns}
              pagination={false}
            />
          </Form.Item>
        </Col>
      </Row>
    );
  }
  //提交（跟提交并添加）
  async _submit(param) {
    if (!!!this.state.perId) {
      this.errModal('请先选择人员');
      return;
    }
    // 获取人员身份验证信息
    // const autherRes = await getPerAuthRecordbyId({ perId: this.state.perId });
    // if (autherRes.data.authStatus != 1) {
    //   return this.errModal(
    //     '该人员尚未完成实名认证，无法报名。需通过实名认证，才可进行报名。'
    //   );
    // }
    if (this.state.isPersonPhoto == '2' && !!!this.state.photo.colourPhotoUrl) {
      this.errModal(
        '此人暂未有一寸免冠彩照，请通知该员工登录App-工作-证件照采集页面进行采集。'
      );
      return;
    }
    // if (this.state.bayConfigInfo.isComContractRequired == '1') {
    //   if (this.state.comContractList.length == 0) {
    //     this.errModal(
    //       '请关联合同。'
    //     );
    //     return;
    //   }
    // }
    let param2 = true;
    if (this.props.location.bayzgzSbId !== '') {
      //是编辑页面，1、有暂存过的，可以提交。2、有提交过的，不能提交
      if (this.state.repetitionStatus === 2) {
        //有提交过的
        param2 = false;
        this.errModal('不可以报名:此人报名存在暂存未提交记录');
        return;
      }
    } else {
      //是新增页面。1、有暂存过的，不能提交。2、有提交过的，不能提交
      if (this.state.repetitionStatus === 0) {
        //有暂存过的
        param2 = false;
        this.errModal('不可以报名:报名已经审核通过或者审核中');
        return;
      }
      if (this.state.repetitionStatus === 2) {
        //有提交过的
        param2 = false;
        this.errModal('不可以报名:此人报名存在暂存未提交记录');
        return;
      }
    }
    if(!this.state.isNanNiCode && !this.checkBeijinCode()){
      const comContractId = this.state.comContractList.length > 0 ? this.state.comContractList[0].comContractId : '';
      if (!comContractId && this.state.bayConfigInfo.isComContractRequired == '1') {
        this.errModal('请选择合同');
        return;
      }
    }
    if (param2) {
      this.props.form.validateFields((err, values) => {
        let data = values;
        let hasError = false;
        if (!err) {
          if (values.education == '1') {
            this.errModal('学历必须是初中及初中以上');
            hasError = true;
            return;
          }
          if (!!!hasError) {
            //信息都完善的情况下
            if (
              data.birthday &&
              data.birthday !== undefined &&
              data.birthday !== null
            ) {
              data.birthday = data['birthday'].format(dateFormat);
            } else {
              data.birthday = '';
            }
            let value = {
              ...values,
              perId: this.state.perId,
              ...this.state.photo,
              // comContractId: this.state.comContractList.length > 0 ? this.state.comContractList[0].comContractId : '',
            };
            if (!this.state.isNanNiCode) {
              value = {
                ...value,
                comContractId: this.state.comContractList.length > 0 ? this.state.comContractList[0].comContractId : '',
              }
            }
            // if (!this.state.isAddOrEdit) {
            //   //如果是编辑页面，需要传保安员资格证申报id
            //   value = {
            //     ...value,
            //     bayzgzSbId: this.state.bayzgzSbId
            //   };
            // }
            bayzgzSave(value)
              .then(data => {
                const that = this;
                if (data.retType === '0') {
                  //提交完成之后放开按钮的可提交状态
                  this.setState({
                    buttonStatus: false
                  });
                  if (param === 'goOn') {
                    Modal.success({
                      title: '提交成功！',
                      content: '您可以在报名列表查看该人员的报名信息。',
                      // okText: '到《未持证人员》列表中接续报名',
                      okText: '到列表中接续报名',
                      onOk() {
                        // that.props.history.push('/PoliceDeclare/sign-up?tab=2');
                        that.props.history.push('/PoliceDeclare/qualifications');
                      }
                    });
                  } else {
                    Modal.success({
                      title: '提交成功！',
                      content: '您可以在报名列表查看该人员的报名信息。',
                      okText: '返回报名列表',
                      onOk() {
                        that.props.history.push('/PoliceDeclare/qualifications');
                      }
                    });
                  }
                }
              })
              .catch(() => {
                //提交完成之后放开按钮的可提交状态
                this.setState({
                  buttonStatus: false
                });
              });
          }
        } else {
          this.setState({
            buttonStatus: false
          });
        }
      });
    }
  }
  //验证手机号码
  _checkPhone = (rule, value, callback) => {
    if (value && !/^1[0-9]{10}$/.test(value)) {
      callback('请输入正确的手机号码！');
    } else {
      callback();
    }
  };
  //验证证件号
  _checkIdCardNo = (rule, value, callback) => {
    const { form } = this.props;
    const cardNoValue = form.getFieldValue('idCardType');
    if (
      cardNoValue === '1' &&
      value &&
      !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)
    ) {
      callback('请输入正确的身份证号码！');
    } else {
      callback();
    }
  };
  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    return (
      <Box style={{ margin: '16px 0 8px 24px' }}>
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link to="/PoliceDeclare/qualifications">报名记录</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            {this.state.isAddOrEdit ? '新增报名' : '修改报名'}
          </Breadcrumb.Item>
        </Breadcrumb>
        <Alert
          message={
            <div style={{ color: '#333' }}>
              <span>
                人员若存在申报中/申报通过的报名记录，则无法再重新报名；申报不通过/已撤销的可以重新提交报名。
              </span>
            </div>
          }
          type="warning"
          showIcon
          style={{ marginBottom: 15, marginTop: 10 }}
        />
        {/* form表单 */}
        <Form onSubmit={this.fromSubmit}>
          <div className="basic_container">
            <h3>报名基础信息</h3>
            <Row>
              <Col span={9}>
                <Form.Item {...formItemLayout} label="所属企业">
                  {getFieldDecorator('comName', {
                    initialValue: this.props.companyInfo.comName,
                    rules: [
                      {
                        required: true
                      }
                    ]
                  })(
                    <Input
                      placeholder="请输入"
                      // maxLength={30}
                      disabled
                    />
                  )}
                </Form.Item>
              </Col>
              <Col span={9} offset={1}>
                {
                  !this.state.basicInfoStatus &&
                  <Form.Item {...formItemLayout} label="选择人员">
                    {getFieldDecorator('perIdName', {
                      initialValue: this.state.perIdName || '',
                      rules: [
                        {
                          required: true,
                          message: '请先选择人员'
                        }
                      ]
                    })(
                      <Input
                        placeholder="请选择"
                        maxLength={30}
                        readOnly
                        onClick={() => {
                          $perModal({
                            type: 'radio',
                            onOk: async (values, close) => {
                              const { perId } = values[0]
                              // const { regProvince } = this.props.companyInfo;
                              checkIsExistsEffectBayzgz({ perId }).then(res => {
                                // if(res.data != 0) {
                                if (res.data == 1) {
                                  return;
                                  // Modal.warning({
                                  //   title: '该人员已存在保安员资格证，无法报名。'
                                  // });
                                } else {
                                  this.setState({
                                    isPersonPhoto: res.data
                                  })
                                  getPerAuthRecordbyId({ perId }).then(result => {
                                    if (result.data.authStatus != 1) {
                                      Modal.warning({
                                        title: '该人员尚未完成实名认证，无法报名。需通过实名认证，才可进行报名。'
                                      });
                                    } else {
                                      this._bayzgzCheckResubmit(perId, () => {
                                        this.setState({
                                          perId,
                                          perIdName: values[0].name,
                                          key: Math.random()
                                        }, () => {
                                          this.getPersonInfo(perId, res.data);
                                          this.__getComContractListByPerId();
                                          close();
                                        });
                                      });
                                    }
                                  });
                                }
                              });


                            }
                          });
                        }}
                      />
                    )}
                  </Form.Item>
                }
              </Col>
            </Row>

            <Row>
              <Col span={9}>
                <div
                  style={{ display: this.state.basicInfoStatus ? 'block' : 'none' }}
                >
                  {
                    this.state.isPersonPhoto == '2' ? <Form.Item
                      {...photoItemLayout}
                      label="一寸免冠白底彩照"
                      extra={<span style={{ color: 'orange' }}>注：支持上传1M以内的jpeg|jpg文件</span>}
                      style={{ marginBottom: 0 }}
                    >
                      {getFieldDecorator(`colourPhotoUrl`, {
                        initialValue: this.state.photo.colourPhotoUrl || '',
                        rules: [
                          {
                            required:
                              this.state.bayConfigInfo.isColourPhotoRequired ===
                                '1'
                                ? true
                                : false,
                            message: `请上传一寸免冠白底彩照`
                          }
                        ]
                      })(
                        <PFromUpload
                          key={this.state.key}
                          num={1}
                          size={1}
                          types={['image/jpeg', 'image/jpg']}
                          onChange={url => {
                            this.setState({
                              photo: {
                                ...this.state.photo,
                                colourPhotoUrl: url
                              }
                            });
                          }}
                        />
                      )}
                    </Form.Item> :
                      <Form.Item
                        {...photoItemLayout}
                        label="一寸免冠白底彩照"
                        style={{ marginBottom: 0 }}
                      >
                        <div style={{ color: 'orange' }}>该人员有人口库照片，无需再上传报名照片。</div>
                      </Form.Item>
                  }
                </div>
              </Col>
            </Row>
            <Row>
              <Col span={9}>
                <Form.Item {...formItemLayout} label="姓名">
                  {getFieldDecorator('name', {
                    initialValue: this.state.perInfo.name || '',
                    rules: [
                      {
                        required: true,
                        message: '请输入姓名'
                      }
                    ]
                  })(<Input placeholder="请输入" disabled={true} />)}
                </Form.Item>
              </Col>
              <Col span={9} offset={1}>
                <Form.Item {...formItemLayout} label="手机号码">
                  {getFieldDecorator('mobilePhone', {
                    initialValue: this.state.perInfo.mobilePhone || '',
                    rules: [
                      {
                        required: true,
                        message: '请输入手机号码'
                      }
                    ]
                  })(<Input placeholder="请输入" disabled={true} />)}
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={9}>
                <Form.Item {...formItemLayout} label="身份证号">
                  {getFieldDecorator('idCardNo', {
                    initialValue: this.state.perInfo.idCardNo,
                    rules: [
                      {
                        required: true,
                        message: '请输入身份证号'
                      }
                    ]
                  })(<Input placeholder="请输入" disabled={true} />)}
                </Form.Item>
              </Col>
              <Col span={9} offset={1}>
                <Form.Item {...formItemLayout} label="出生年月">
                  {getFieldDecorator('birthday', {
                    initialValue: this.state.perInfo.birthday
                      ? moment(this.state.perInfo.birthday, dateFormat)
                      : null,
                    rules: [
                      {
                        required: true,
                        message: '请选择出生年月'
                      }
                    ]
                  })(<DatePicker style={{ width: 214 }} format={dateFormat} />)}
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={9}>
                <Form.Item {...formItemLayout} label="性别">
                  {getFieldDecorator('sex', {
                    initialValue: this.state.perInfo.sex,
                    rules: [
                      {
                        required: true,
                        message: '请选择性别'
                      }
                    ]
                  })(
                    <Select style={{ width: 214 }}>
                      <Option value="1">男</Option>
                      <Option value="2">女</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={9} offset={1}>
                <Form.Item {...formItemLayout} label="身高(cm)">
                  {getFieldDecorator('height', {
                    initialValue: this.state.perInfo.height,
                    rules: [
                      {
                        required:
                          this.state.bayConfigInfo.isHeightRequired === '1'
                            ? true
                            : false,
                        message: '请输入身高'
                      }
                    ]
                  })(<InputNumber style={{ width: 214 }} placeholder="请输入" min={1} max={300} />)}
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={9}>
                <Form.Item {...formItemLayout} label="文化程度">
                  {getFieldDecorator('education', {
                    initialValue: this.state.perInfo.education,
                    rules: [
                      {
                        required: true,
                        message: '请选择文化程度'
                      }
                    ]
                  })(<PSelect type="education" />)}
                </Form.Item>
              </Col>
              <Col span={9} offset={1}>
                <Form.Item {...formItemLayout} label="民族">
                  {getFieldDecorator('nation', {
                    initialValue: this.state.perInfo.nation,
                    rules: [
                      {
                        required:
                          this.state.bayConfigInfo.isNationRequired === '1'
                            ? true
                            : false,
                        message: '请选择民族'
                      }
                    ]
                  })(
                    <PSelect
                      type="nation"
                    // value={nation}
                    />
                  )}
                </Form.Item>
              </Col>
            </Row>


            {
              !this.checkBeijinCode() && <>
                <Row>
                  <Col span={9}>
                    <Form.Item {...formItemLayout} label="户籍所在地">
                      {getFieldDecorator('residentPlaceType', {
                        initialValue: this.state.perInfo.residentPlaceType,
                        rules: [
                          {
                            required:
                              this.state.bayConfigInfo.isResidentPlaceTypeRequired === '1'
                                ? true
                                : false,
                            message: '请选择户籍所在地'
                          }
                        ]
                      })(
                        <PSelect
                          type="residentPlaceType"
                        // value={nation}
                        />
                      )}
                    </Form.Item>
                  </Col>
                  <Col span={9} offset={1}>
                    <Form.Item {...formItemLayout} label="户籍类型">
                      {getFieldDecorator('residentType', {
                        initialValue: this.state.perInfo.residentType,
                        rules: [
                          {
                            required:
                              this.state.bayConfigInfo.isResidentTypeRequired === '1'
                                ? true
                                : false,
                            message: '请选择户籍类型'
                          }
                        ]
                      })(
                        <PSelect
                          type="residentType"
                        // value={nation}
                        />
                      )}
                    </Form.Item>

                  </Col>
                </Row>
              </>
            }
            {
              !this.state.isNanNiCode && !this.checkBeijinCode() && <>
                <Row>
                  <Col span={24} className="miniLabelWidth">
                    <Form.Item {...formItemLayout} label={
                      (
                        <section>
                          {this.state.bayConfigInfo.isComContractRequired == '1' &&
                            <em style={{ color: '#f5222d' }}>*</em>
                          }
                          <Button
                            onClick={() => {
                              const { perId } = this.state;
                              if (!perId) {
                                return Modal.error({ title: '您还没有选择人员！', content: '请选择人员', okText: '确定' });
                              }
                              this.setState({
                                contractModal: true
                              });
                            }}
                            type="primary" style={{ margin: '0 15px' }}
                          >

                            关联合同
                          </Button>
                        </section>
                      )
                    } colon={false}>
                      <h3 style={{ color: 'orange', fontSize: 14, lineHeight: 'normal' }}>
                        1、合同附件必须有员工本人亲自签名的页面，对因劳动合同真实性 （如非本人签署）问题导致的补贴申请问题由企业自行承担责任和损失，审计出现问题的追回补贴资金并接受相应处罚。<br />
                        2、关联合同前请详细阅读附件<a href='/files/保安员劳动合同相关要求及常见问题解答.pdf' target="_blank">《保安员劳动合同要求及常见问题解答》。</a>
                      </h3>
                    </Form.Item>
                  </Col>
                </Row>
                <SelectContactByPerId
                  type='zigezheng'
                  perId={this.state.perId}
                  onlySearchPerId="0"
                  visibale={this.state.contractModal}
                  onSelect={comContractList => {
                    if (comContractList.length > 0 && comContractList[0].contractEffect == '终止') {
                      return Modal.error({ title: '不能关联已经终止的合同', content: '请重新选择', okText: '确定' });
                    }
                    this.setState({
                      comContractList
                    });
                  }}
                  onClose={() => {
                    this.setState({
                      contractModal: false
                    });
                  }}
                />
                {
                  this._renderConTable()
                }
              </>
            }

            <Row>
              <Col span={9}>
                <Form.Item {...photoItemLayout} label="图像材料">
                  (每张不超过:8M,格式为:jpg，jpeg，png)
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={9} offset={2}>
                <Form.Item {...photoItemLayout} label="身份证人像面">
                  {getFieldDecorator(`idCardFrontUrl`, {
                    initialValue: this.state.photo.idCardFrontUrl,
                    rules: [
                      {
                        required:
                          this.state.bayConfigInfo.isIdCardFrontRequired ===
                            '1'
                            ? true
                            : false,
                        message: `请上传身份证人像面`
                      }
                    ]
                  })(
                    <PFromUpload
                      key={this.state.key}
                      num={1}
                      size={8}
                      onChange={url => {
                        this.setState({
                          photo: {
                            ...this.state.photo,
                            idCardFrontUrl: url
                          }
                        });
                      }}
                    />
                  )}
                </Form.Item>
              </Col>
              <Col span={9}>
                <Form.Item {...photoItemLayout} label="身份证国徽面">
                  {getFieldDecorator(`idCardReverseUrl`, {
                    initialValue: this.state.photo.idCardReverseUrl,
                    rules: [
                      {
                        required:
                          this.state.bayConfigInfo.isIdCardReverseRequired ===
                            '1'
                            ? true
                            : false,
                        message: `请上传身份证国徽面`
                      }
                    ]
                  })(
                    <PFromUpload
                      key={this.state.key}
                      num={1}
                      size={8}
                      onChange={url => {
                        this.setState({
                          photo: {
                            ...this.state.photo,
                            idCardReverseUrl: url
                          }
                        });
                      }}
                    />
                  )}
                </Form.Item>

              </Col>
            </Row>
            {/* {
              this.checkSRAreaCode() ? <Row>
                <Col span={9} offset={2}>
                  <Form.Item {...photoItemLayout} label="初中以上学历证明原件">
                    {getFieldDecorator(`eduCerUrl`, {
                      initialValue: this.state.photo.eduCerUrl,
                      rules: [
                        {
                          required: true,
                          message: `请上传初中以上学历证明原件`
                        }
                      ]
                    })(
                      <PFromUpload
                        key={this.state.key}
                        num={1}
                        size={8}
                        onChange={url => {
                          this.setState({
                            photo: {
                              ...this.state.photo,
                              eduCerUrl: url
                            }
                          });
                        }}
                      />
                    )}
                  </Form.Item>

                </Col>
                <Col span={9}>
                  <Form.Item
                    {...photoItemLayout}
                    label={
                      <span>
                        <em style={{ marginRight: 10 }}>县级以上医院出具的</em>
                        <br />
                        体检证明(最多4张)
                      </span>
                    }
                  >
                    {getFieldDecorator(`hospitalExamProveUrl`, {
                      initialValue: this.state.photo.hospitalExamProveUrl,
                      rules: [
                        {
                          required: true,
                          message: `请上传县级以上医院出具的体检证明`
                        }
                      ]
                    })(
                      <PFromUpload
                        key={this.state.key}
                        num={4}
                        size={8}
                        onChange={url => {
                          console.log(url);
                        }}
                      />
                    )}
                  </Form.Item>
                </Col>
              </Row> : ""
            } */}
            <Row gutter={16} style={{ marginBottom: 20 }}>
              <Col span={22} offset={1}>
                <h3>报名承诺</h3>
                <span style={{
                  color: '#f5222d', marginLeft: '2em',
                }}>*</span>
                <Checkbox onChange={e => {
                  this.setState({
                    checked: e.target.checked
                  });
                }}>
                  我司（ <span style={{ color: '#F59A23' }}>{this.props.companyInfo.comName}</span> ）承诺，由我司报名代理人
                  {this.state.agentInfo && getFieldDecorator('agentName', {
                    initialValue: this.state.agentInfo.name || '',
                    rules: [
                      {
                        required: true,
                        message: '请输入姓名'
                      }
                    ]
                  })(
                    <Input style={{ width: 150, border: (!getFieldValue('agentName')) ? '1px solid #f5222d' : '1px solid #d9d9d9' }} type="text" placeholder="请输入姓名" />
                  )}
                  （
                  {this.state.agentInfo && getFieldDecorator('agentIdCardNo', {
                    initialValue: this.state.agentInfo.idCardNo || '',
                    rules: [
                      {
                        required: true,
                        message: '请输入身份证号'
                      },
                      {
                        validator: this._checkIdCardNo
                      }
                    ]
                  })(
                    <Input style={{ width: 200, border: (!getFieldValue('agentIdCardNo')) ? '1px solid #f5222d' : '1px solid #d9d9d9' }} type="text" placeholder="请输入身份证号" />
                  )}
                  ，
                  {this.state.agentInfo && getFieldDecorator('agentPhone', {
                    initialValue: this.state.agentInfo.mobilePhone || '',
                    rules: [
                      {
                        required: true,
                        message: '请输入手机号码'
                      },
                      { validator: this._checkPhone }
                    ]
                  })(
                    <Input style={{ width: 150, border: (!getFieldValue('agentPhone')) ? '1px solid #f5222d' : '1px solid #d9d9d9' }} type="text" placeholder="请输入手机号码" />
                  )}
                  ）
                  提交的报名信息真实有效，对因填报信息错误造成不符合培训及补贴申报条件的，由本企业自行承担相应责任和损失。
                </Checkbox>

              </Col>
            </Row>

            <Row gutter={16}>
              <Col span={20}>
                <div className="sumbitButtom" style={{ textAlign: 'center' }}>
                  <Button
                    type="primary"
                    style={{ margin: '0 20px' }}
                    disabled={this.state.buttonStatus || !this.state.checked}
                    onClick={() => {
                      this.setState({
                        buttonStatus: true
                      });
                      this._submit('goOn');
                    }}
                  >
                    提交并继续添加
                  </Button>
                  {/* <Button
                    type="primary"
                    style={{ margin: '0 20px' }}
                    disabled={this.state.buttonStatus}
                    onClick={() => {
                      this.setState({
                        buttonStatus: true
                      });
                      this._hold();
                    }}
                  >
                    暂存
                  </Button> */}
                  <Button
                    type="primary"
                    disabled={this.state.buttonStatus || !this.state.checked}
                    style={{ margin: '0 20px' }}
                    onClick={() => {
                      this.setState({
                        buttonStatus: true
                      });
                      this._submit();
                    }}
                  >
                    提交
                  </Button>
                </div>
              </Col>
            </Row>
          </div>
        </Form>
      </Box>
    );
  }
}

const Box = style.div`{
.import_salary{
          margin:16px 0 8px 24px;
      }
.miniLabelWidth .ant-form-item-label{
          width:10%;
      }
.noUpload{
  .anticon - plus,.ant - upload - text{
          display: none;
      }
    }
  }`;
const NoTipRow = style.div`{
  .ant-form-item{
    margin-bottom: 0;
  }
}`;
