import React, { Component } from 'react';
import { connect } from 'dva';
import style from 'styled-components';
import {
  Form,
  Input,
  Select,
  Button,
  Radio,
  DatePicker,
  Cascader,
  Modal,
  message,
  Drawer
} from 'antd';
// import Drawer from 'react-motion-drawer';
import * as ajax from '../../../services/api';
import './less/report.less';
import PCascader from '../../../components/Pro/PCascader';

const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const confirm = Modal.confirm;

@connect(state => ({
  profile: state.profile
}))
@Form.create()
export default class AddManagementlist extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      open: this.props.visible,
      loading: false,
      // comId:1,
      comManagerId: this.props.comManagerId, //浼犺繃鏉ョ殑鏂规id
      nationList: [],
      idCardType: '',
      idCardList: [],
      educationList: [],
      skillList: [],
      areas: [], //鍦板尯
      listPage: {
        idCardType: '',
        idCardNo: '',
        name: '',
        sex: '',
        nation: '',
        residentProvince: '',
        residentCity: '',
        residentArea: '',
        residenceAddress: '',
        telephone: '',
        education: '',
        positionName: '',
        domicileProvince: '',
        domicileCity: '',
        domicileArea: '',
        domicileAddress: '',
        jobSkillLevel: ''
      },
      fan: false
    };
  }
  //閲嶇疆琛ㄥ崟
  resetFrom = () => {
    const { setFieldsValue } = this.props.form;
    setFieldsValue({
      idCardNo: '',
      name: '',
      sex: '',
      nation: '',
      residentProvince: '',
      residentCity: '',
      residentArea: '',
      residenceAddress: '',
      telephone: '',
      education: '',
      positionName: '',
      domicileProvince: '',
      domicileCity: '',
      domicileArea: '',
      domicileAddress: '',
      jobSkillLevel: ''
    });
  };
  componentWillReceiveProps(props) {
    if (this.state.open !== props.visible) {
      this.setState(
        { open: props.visible, comManagerId: props.comManagerId }
      );
      this.addManagementList();
      // this.getDistrict();
      this.getDictionaryData(); //鑾峰彇鎵€鏈夋墍闇€瑕佸瓧鍏告暟鎹�
    }
  }

  componentDidMount() {
    this.props.onRef(this);
    // this.addManagementList();
    // this.getDistrict();
  }

  //鑾峰彇鎵€鏈夋墍闇€瑕佸瓧鍏告暟鎹�
  getDictionaryData = () => {
    ajax
      .publicCommonDictGetDictByCodeTypes({
        codeTypes: ['nation', 'idCardType_bak', 'education', 'skillLevel']
      })
      .then(data => {
        //鍒ゆ柇鑾峰彇鏁版嵁鏄惁涓虹┖
        if (data.data) {
          this.setState({
            nationList: data.data.nation, //鑾峰緱姘戞棌
            idCardList: data.data.idCardType_bak,
            educationList: data.data.education, //鑾峰緱浼佷笟绫诲瀷
            skillList: data.data.skillLevel //鑾峰緱鏈烘瀯绫诲瀷
          });
        }
      });
  };

  addManagementList = () => {
    if (this.state.comManagerId !== '00') {
      ajax
        .comStockGetManageById({ comManagerId: this.state.comManagerId })
        .then(data => {
          if (data.data) {
            this.setState({
              listPage: data.data
            });
          }
        });
    }
  };

  // //鐪佸競鍖�
  // getDistrict = () => {
  //   ajax.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
  //     });
  //   });
  // };

  submitHandlerDeep = (that, values) => {
    that.setState({ loading: true });
    ajax.submitComStockSaveComManage({ ...values }).then(
      data => {
        // message.success('绠＄悊浜哄憳淇℃伅淇濆瓨鎴愬姛锛�');
        that.setState({ loading: false });
        that.setState({
          fan: true
        });
        that.props.close();
      },
      err => {
        that.setState({ loading: false });
      }
    );
    // that.props.close();
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.residentProvince = values.hu[0];
        values.residentCity = values.hu[1];
        values.residentArea = values.hu[2];
        values.domicileProvince = values.ed[0];
        values.domicileCity = values.ed[1];
        values.domicileArea = values.ed[2];
        delete values.hu;
        delete values.ed;
        // values.comId = this.state.comId;
        if (this.state.comManagerId !== '00') {
          values.comManagerId = this.state.comManagerId;
        }

        let idCardTypeName = '';
        this.state.idCardList.map(val => {
          if (val.codeValue === values.idCardType) {
            idCardTypeName = val.label;
          }
          return 1;
        });
        const that = this;
        if (this.state.comManagerId !== '00') {
          that.submitHandlerDeep(that, values);
        } else {
          //纭鎻愮ず
          confirm({
            title:
              '[' +
              idCardTypeName +
              ']锛歔' +
              values.idCardNo +
              ']锛屾彁浜ゅ悗璇佷欢绫诲瀷鍙婅瘉浠跺彿涓嶅彲淇敼銆傛槸鍚︾‘璁ゆ彁浜ゃ€�',
            okText: '纭',
            cancelText: '鍙栨秷',
            onOk() {
              that.submitHandlerDeep(that, values);
            },
            onCancel() {
              console.log('Cancel');
            }
          });
        }
      }
    });
  };

  renderNationList = () => {
    return this.state.nationList.map((val, key) => {
      return (
        <Option key={key} value={val.codeValue + ''}>
          {val.label}
        </Option>
      );
    });
  };

  idCardList = () => {
    return this.state.idCardList.map((val, key) => {
      return (
        <Option key={key} value={val.codeValue + ''}>
          {val.label}
        </Option>
      );
    });
  };

  renderEducation = () => {
    return this.state.educationList.map((val, key) => {
      return (
        <Option key={key} value={val.codeValue + ''}>
          {val.label}
        </Option>
      );
    });
  };

  skillList = () => {
    return this.state.skillList.map((val, key) => {
      return (
        <Option key={key} value={val.codeValue + ''}>
          {val.label}
        </Option>
      );
    });
  };

  fan = () => {
    let _that = this;
    if (_that.state.fan) {
      // _that.props.history.push(`/enterprise/reported`);
      _that.props.close();
    } else {
      confirm({
        title: '褰撳墠淇℃伅鏈繚瀛橈紝鏄惁纭杩斿洖锛�',
        okText: '纭',
        cancelText: '鍙栨秷',
        onOk() {
          // _that.props.history.push(`/enterprise/reported`);
          _that.props.close();
        },
        onCancel() {
          console.log('Cancel');
        }
      });
    }
  };

  //楠岃瘉鎵嬫満鍙风爜
  checkPhone = (rule, value, callback) => {
    if (value && !/^1[0-9]{10}$/.test(value)) {
      callback('璇疯緭鍏ユ纭殑鑱旂郴鏂瑰紡锛�');
    } else {
      callback();
    }
  };

  //璇佷欢绫诲瀷-韬唤璇佸彿鐮侀獙璇�
  checkIdCardNo = (rule, value, callback) => {
    // const form = this.props.form;
    // const idType = form.getFieldValue('idCardType');
    if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
      callback('璇疯緭鍏ユ纭殑韬唤璇佸彿鐮侊紒');
    } else {
      callback();
    }
  };
  //璇佷欢绫诲瀷-鏅€氬彿鐮侀獙璇�
  checkId = (rule, value, callback) => {
    if (value && !/^[a-zA-Z0-9]{1,20}$/.test(value)) {
      callback('璇疯緭鍏ユ纭殑璇佷欢鍙风爜锛�');
    } else {
      callback();
    }
  };

  //韬唤璇佹敼鍙樹簨浠�
  idCardTypeOnChangeHandler = value => {
    // this.props.form.validateFields(['cerNo']);
    this.props.form.setFieldsValue({ idCardNo: '' });
    this.setState({ idCardType: value });
  };

  render() {
    const { submitting } = this.props;
    const { getFieldDecorator } = this.props.form;
    const config = {
      rules: [{ type: 'object', required: true, message: '璇烽€夋嫨鏃ユ湡!' }]
    };

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 }
      }
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 }
      }
    };

    return (
      <Drawer
        overlayColor='rgba(0, 0, 0,0)'
        placement='right'
        visible={this.state.open}
        destroyOnClose
        width={600}
        zIndex={11}
        title='绠＄悊鍛樹俊鎭�'
        onChange={open => {
          this.props.onChange(open);
          this.setState({ open });
        }}
        onClose={() => {
          this.setState({
            open: false
          });
        }}
      >
        <Container>
          <div>
            {/* <header className="body-header" style={{ "paddingLeft": '20px', "paddingTop": '14px' }}>绠＄悊鍛樹俊鎭�</header> */}
            <div>
              <Form onSubmit={this.handleSubmit} style={{ marginTop: 24 }}>
                <FormItem {...formItemLayout} label='濮撳悕'>
                  {getFieldDecorator('name', {
                    initialValue: this.state.listPage.name,
                    rules: [
                      {
                        required: true,
                        message: '璇疯緭鍏ュ鍚�'
                      },
                      // {
                      //   // pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/,
                      //   pattern: /.*{1,50}/,
                      //   message: '璇疯緭鍏ュ皬浜�50浣嶄腑鏂囨垨鑻辨枃鐨勫鍚�'
                      // }
                    ]
                  })(<Input placeholder='璇疯緭鍏�' maxLength={50} />)}
                </FormItem>
                <FormItem {...formItemLayout} label='閮ㄩ棬'>
                  {getFieldDecorator('departName', {
                    initialValue: this.state.listPage.departName,
                    rules: [
                      {
                        required: true,
                        message: '璇疯緭鍏ラ儴闂�'
                      },
                    ]
                  })(<Input placeholder='璇疯緭鍏�' maxLength={20} />)}
                </FormItem>
                <FormItem {...formItemLayout} label='鑱屽姟'>
                  {getFieldDecorator('positionName', {
                    initialValue: this.state.listPage.positionName,
                    rules: [
                      {
                        required: true,
                        message: '璇疯緭鍏ヨ亴鍔�'
                      }
                    ]
                  })(<Input placeholder='璇疯緭鍏�'/>)}
                </FormItem>
                <FormItem {...formItemLayout} label='鎬у埆'>
                  {getFieldDecorator('sex', {
                    initialValue: this.state.listPage.sex,
                    rules: [
                      {
                        required: true,
                        message: '璇烽€夋嫨鎬у埆'
                      }
                    ]
                  })(
                    <RadioGroup>
                      <Radio value='1'>鐢�</Radio>
                      <Radio value='2'>濂�</Radio>
                    </RadioGroup>
                  )}
                </FormItem>
                <FormItem {...formItemLayout} label='鏄惁鏄€€浼嶅啗浜�'>
                  {getFieldDecorator('isVeteran', {
                    initialValue: this.state.listPage.isVeteran,
                    rules: [{ required: true, message: '璇烽€夋槸鍚︽槸閫€浼嶅啗浜�' }]
                  })(
                    <RadioGroup>
                      <Radio value='0'>鍚�</Radio>
                      <Radio value='1'>鏄�</Radio>
                    </RadioGroup>
                  )}
                </FormItem>
                <FormItem {...formItemLayout} label='姘戞棌'>
                  {getFieldDecorator('nation', {
                    initialValue: this.state.listPage.nation,
                    rules: [{ required: true, message: '璇烽€夋嫨姘戞棌' }]
                  })(
                    <Select placeholder='璇烽€夋嫨'>
                      {/* <Option value="">璇烽€夋嫨</Option> */}
                      {this.renderNationList()}
                    </Select>
                  )}
                </FormItem>
                {this.state.comManagerId === '00' ? (
                  <FormItem {...formItemLayout} label='鎴风睄'>
                    {getFieldDecorator('hu', {
                      rules: [{ required: true, message: '璇烽€夋嫨鎴风睄' }]
                    })(
                      // <Cascader
                      //   options={this.state.areas}
                      //   placeholder='璇烽€夋嫨'
                      // />
                      <PCascader placeholder="璇烽€夋嫨"/>
                    )}
                  </FormItem>
                ) : (
                  <FormItem {...formItemLayout} label='鎴风睄'>
                    {getFieldDecorator('hu', {
                      initialValue: [
                        this.state.listPage.residentProvince,
                        this.state.listPage.residentCity,
                        this.state.listPage.residentArea
                      ],
                      rules: [{ required: true, message: '璇烽€夋嫨鎴风睄' }]
                    })(
                      // <Cascader
                      //   options={this.state.areas}
                      //   placeholder='璇烽€夋嫨'
                      // />
                      <PCascader placeholder="璇烽€夋嫨"/>
                    )}
                  </FormItem>
                )}
                <FormItem {...formItemLayout} label='璇佷欢绫诲瀷'>
                  {getFieldDecorator('idCardType', {
                    initialValue: this.state.listPage.idCardType,
                    rules: [{ required: true, message: '璇烽€夋嫨璇佷欢绫诲瀷' }]
                  })(
                    <Select
                      disabled={this.state.comManagerId !== '00'}
                      placeholder='璇烽€夋嫨'
                      onChange={this.idCardTypeOnChangeHandler}
                    >
                      {this.idCardList()}
                    </Select>
                  )}
                </FormItem>
                <FormItem {...formItemLayout} label='璇佷欢鍙�'>
                  {this.state.idCardType === '1'
                    ? getFieldDecorator('idCardNo', {
                        initialValue: this.state.listPage.idCardNo,
                        rules: [
                          {
                            required: true,
                            message: '璇疯緭鍏ヨ瘉浠跺彿'
                          },
                          // {
                          //   validator: this.checkIdCardNo
                          // }
                        ]
                      })(
                        <Input
                          disabled={this.state.comManagerId !== '00'}
                          placeholder='璇疯緭鍏�'
                          maxLength={20}
                        />
                      )
                    : getFieldDecorator('idCardNo', {
                        initialValue: this.state.listPage.idCardNo,
                        rules: [
                          {
                            required: true,
                            message: '璇疯緭鍏ヨ瘉浠跺彿'
                          },
                          // {
                          //   validator: this.checkId
                          // }
                        ]
                      })(
                        <Input
                          disabled={this.state.comManagerId !== '00'}
                          placeholder='璇疯緭鍏�'
                          maxLength={20}
                        />
                      )}
                </FormItem>
                <FormItem {...formItemLayout} label='鑱旂郴鏂瑰紡'>
                  {getFieldDecorator('telephone', {
                    initialValue: this.state.listPage.telephone,
                    rules: [
                      {
                        required: true,
                        message: '璇疯緭鍏ヨ仈绯绘柟寮�'
                      },
                      {
                        validator: this.checkPhone
                      }
                    ]
                  })(<Input placeholder='璇疯緭鍏�' maxLength={20} />)}
                </FormItem>
                <FormItem {...formItemLayout} label='瀛﹀巻'>
                  {getFieldDecorator('education', {
                    initialValue: this.state.listPage.education,
                    rules: [{ required: true, message: '璇烽€夋嫨瀛﹀巻' }]
                  })(
                    <Select placeholder='璇烽€夋嫨'>
                      {/* <Option value="0">璇烽€夋嫨</Option> */}
                      {this.renderEducation()}
                    </Select>
                  )}
                </FormItem>
                <FormItem {...formItemLayout} label='鑱屼笟鎶€鑳界瓑绾�'>
                  {getFieldDecorator('jobSkillLevel', {
                    initialValue: this.state.listPage.jobSkillLevel,
                    rules: [{
                        required: true,
                        message: '璇烽€夋嫨鑱屼笟鎶€鑳界瓑绾�'
                      }]
                  })(
                    <Select placeholder='璇烽€夋嫨'>
                      {/* <Option value="0">璇烽€夋嫨</Option> */}
                      {this.skillList()}
                    </Select>
                  )}
                </FormItem>
                {this.state.comManagerId === '00' ? (
                  <FormItem {...formItemLayout} label='灞呬綇鍦板潃'>
                    {getFieldDecorator('ed', {
                      rules: [{ required: true, message: '璇烽€夋嫨灞呬綇鍦板潃' }]
                    })(
                      // <Cascader
                      //   options={this.state.areas}
                      //   placeholder='璇烽€夋嫨'
                      // />
                      <PCascader placeholder="璇烽€夋嫨"/>
                    )}
                  </FormItem>
                ) : (
                  <FormItem {...formItemLayout} label='灞呬綇鍦板潃'>
                    {getFieldDecorator('ed', {
                      initialValue: [
                        this.state.listPage.domicileProvince,
                        this.state.listPage.domicileCity,
                        this.state.listPage.domicileArea
                      ],
                      rules: [{ required: true, message: '璇烽€夋嫨灞呬綇鍦板潃' }]
                    })(
                      // <Cascader
                      //   options={this.state.areas}
                      //   placeholder='璇烽€夋嫨'
                      // />
                      <PCascader placeholder="璇烽€夋嫨"/>
                    )}
                  </FormItem>
                )}
                <FormItem
                  {...formItemLayout}
                  label=' '
                  colon={false}
                  className='detailedAddress'
                >
                  {getFieldDecorator('domicileAddress', {
                    initialValue: this.state.listPage.domicileAddress,
                    rules: [
                      {
                        required: true,
                        message: '灞呬綇鍏蜂綋鍦板潃涓嶈兘涓虹┖'
                      }
                    ]
                  })(<TextArea row={2} placeholder='璇疯緭鍏�' maxLength={50} />)}
                </FormItem>
                {/* <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
                  <Button loading={submitting} onClick={this.fan}>
                    杩斿洖
                  </Button>
                  <Button type="primary" style={{ marginLeft: 8 }} loading={this.state.loading} htmlType="submit">鎻愪氦</Button>
                </FormItem> */}
                <div
                  style={{
                    position: 'absolute',
                    bottom: 0,
                    width: '100%',
                    borderTop: '1px solid #e8e8e8',
                    padding: '10px 16px',
                    textAlign: 'right',
                    left: 0,
                    background: '#fff',
                    borderRadius: '0 0 4px 4px'
                  }}
                >
                  <Button
                    loading={submitting}
                    onClick={this.fan}
                    style={{ marginRight: '8px' }}
                  >
                    杩斿洖
                  </Button>
                  <Button
                    type='primary'
                    style={{ marginLeft: 8 }}
                    htmlType='submit'
                    loading={this.state.loading}
                    onSubmit={this.handleSubmit}
                  >
                    鎻愪氦
                  </Button>
                </div>
              </Form>
            </div>
          </div>
        </Container>
      </Drawer>
    );
  }
}

/*********************鏍峰紡*************************** */
const Container = style.div`{
  color: #333;
  .body-header{
      font-size: 20px;
      color: #333333;
      padding-bottom:16px;
      border-bottom:1px solid #e9e9e9;
  }
}`;