import React, { Component } from 'react'
import CardWrapper from '@/component/CardWrapper'
import InfoHeader from '@/component/InfoHeader'
import LabelInput from '@/ui-component/LabelInput'
import { Row, Col, Select, Radio, Input, DatePicker } from 'antd'
import addressData from '@/data/cityData'
import { politicsOptions, marriageOptions, accountCharacterOptions, nationOptions } from '@/data'
import { onChange, onComponentChange } from '@/util'
import moment from 'moment'

const provinces = Object.keys(addressData)
let citys = addressData[provinces[0]]

const { Option } = Select
const RadioGroup = Radio.Group
const isEvent = true
export default class PersonalInfo extends Component {
  onProvinceChange (province) {
    citys = addressData[province] || []

    if (this.props && this.props.transferMsg) {
      this.props.transferMsg('npProvince', province)
      this.props.transferMsg('npCity', citys[0])
    }
  }

  render () {
    return (
      <div className="personal-info">
        <InfoHeader title="基本信息" />
        <CardWrapper>
          <Row>
            <Col span={10}>
              <LabelInput>姓名</LabelInput>
              <Input
                placeholder="请输入姓名"
                value={this.props.info.name}
                onChange={onChange('name', isEvent).bind(this)}
              />
            </Col>
            <Col span={10} offset={4}>
              <LabelInput>性别</LabelInput>
              <RadioGroup
                onChange={onComponentChange('personalInfo', 'sex', isEvent).bind(this)}
                value={parseInt(this.props.info.personalInfo && this.props.info.personalInfo.sex)}
              >
                <Radio value={1}>男</Radio>
                <Radio value={0}>女</Radio>
              </RadioGroup>
            </Col>
          </Row>
          <Row>
            <Col span={10}>
              <LabelInput>民族</LabelInput>
              <Select
                onChange={onComponentChange('personalInfo', 'nation').bind(this)}
                placeholder="请选择民族"
                style={{ width: '100%' }}
                value={nationOptions[this.props.info.personalInfo && this.props.info.personalInfo.nation]}
              >
                {nationOptions.map((item, index) => (
                  <Option key={index} value={index}>
                    {item}
                  </Option>
                ))}
              </Select>
            </Col>
            <Col span={10} offset={4}>
              <p className="input-label not-must">宗教信仰</p>
              <Input
                placeholder="请输入宗教信仰"
                onChange={onComponentChange('personalInfo', 'belief', isEvent).bind(this)}
                value={this.props.info.personalInfo && this.props.info.personalInfo.belief}
              />
            </Col>
          </Row>
          <Row>
            <Col span={10}>
              <LabelInput>健康状况</LabelInput>
              <Input
                placeholder="请输入健康状况"
                onChange={onComponentChange('personalInfo', 'healthy', isEvent).bind(this)}
                value={this.props.info.personalInfo && this.props.info.personalInfo.healthy}
              />
            </Col>
            <Col span={10} offset={4}>
              <LabelInput>重大疾病史</LabelInput>
              <Input
                placeholder="请输入重大疾病史"
                value={this.props.info.personalInfo && this.props.info.personalInfo.diseases}
                onChange={onComponentChange('personalInfo', 'diseases', isEvent).bind(this)}
              />
            </Col>
          </Row>
          <Row>
            <Col span={10}>
              <LabelInput>籍贯省市</LabelInput>
              <Col span={10}>
                <Select
                  onChange={this.onProvinceChange.bind(this)}
                  placeholder="请选择省"
                  style={{ width: '100%' }}
                  value = {this.props.info.npProvince}
                >
                  {provinces.map((item, index) => (
                    <Option key={index} value={item}>
                      {item}
                    </Option>
                  ))}
                </Select>
              </Col>
              <Col span={10} offset={4}>
                <Select
                  onChange={onChange('npCity', true).bind(this)}
                  placeholder="请选择市"
                  style={{ width: '100%' }}
                  value = {this.props.info.npCity}
                >
                  {addressData[this.props.info.npProvince].map((item) => (
                    <Option key={item}>
                      {item}
                    </Option>
                  ))}

                </Select>
              </Col>
            </Col>
            <Col span={10} offset={4}>
              <LabelInput>政治面貌</LabelInput>
              <RadioGroup
                onChange={onComponentChange('personalInfo', 'politics', isEvent).bind(this)}
                value={parseInt(this.props.info.personalInfo && this.props.info.personalInfo.politics)}
              >
                {politicsOptions.map((item, index) => (
                  <Radio key={index} value={index}>
                    {item}
                  </Radio>
                ))}
              </RadioGroup>
            </Col>
          </Row>

          <Row>
            <Col span={10}>
              <LabelInput>身份证号</LabelInput>
              <Input
                onChange={onChange('identity', isEvent).bind(this)}
                placeholder="请输入身份证号"
                value={this.props.info.identity}
              />
            </Col>
            <Col span={10} offset={4}>
              <LabelInput>婚姻状况</LabelInput>
              <RadioGroup
                onChange={onComponentChange('personalInfo', 'marriage', isEvent).bind(this)}
                value={parseInt(this.props.info.personalInfo && this.props.info.personalInfo.marriage)}
              >
                {marriageOptions.map((item, index) => (
                  <Radio key={index} value={index}>
                    {item}
                  </Radio>
                ))}
              </RadioGroup>
            </Col>
          </Row>

          <Row>
            <Col span={10}>
              <LabelInput>户口所在地</LabelInput>
              <Input
                onChange={onComponentChange('personalInfo', 'registration', isEvent).bind(this)}
                placeholder="请输入户口所在地"
                value={this.props.info.personalInfo && this.props.info.personalInfo.registration}
              />
            </Col>
            <Col span={10} offset={4}>
              <LabelInput>户口性质</LabelInput>
              <RadioGroup
                onChange={onComponentChange('personalInfo', 'accountCharacter', isEvent).bind(this)}
                value={parseInt(this.props.info.personalInfo && this.props.info.personalInfo.accountCharacter)}
              >
                {accountCharacterOptions.map((item, index) => (
                  <Radio key={index} value={index}>
                    {item}
                  </Radio>
                ))}
              </RadioGroup>
            </Col>
          </Row>

          <Row>
            <Col span={10}>
              <LabelInput>家庭详细住址</LabelInput>
              <Input
                placeholder="请输入家庭详细住址"
                onChange={onComponentChange('personalInfo', 'address', true).bind(this)}
                value={this.props.info.personalInfo && this.props.info.personalInfo.address}
              />
            </Col>
            <Col span={10} offset={4}>
              <p className="input-label not-must">出生日期</p>
              <DatePicker
                onChange={onComponentChange('personalInfo', 'dateOfBirth').bind(this)}
                format="YYYY/MM/DD"
                placeholder="请输入出生日期"
                style={{ width: '100%' }}
                value = {this.props.info.personalInfo && this.props.info.personalInfo.dateOfBirth && moment(this.props.info.personalInfo && this.props.info.personalInfo.dateOfBirth, 'YYYY-MM-DD')}
              />
            </Col>
          </Row>
          <Row>
            <Col span={10}>
              <p className="input-label not-must">身高</p>
              <Input
                placeholder="请输入身高"
                value={this.props.info.personalInfo && this.props.info.personalInfo.height}
                onChange={onComponentChange('personalInfo', 'height', isEvent).bind(this)}
              />
            </Col>
            <Col span={10} offset={4}>
              <p className="input-label not-must">外语及程度</p>
              <Input
                placeholder="请输入外语及程度"
                value={this.props.info.personalInfo && this.props.info.personalInfo.foreign}
                onChange={onComponentChange('personalInfo', 'foreign', isEvent).bind(this)}
              />
            </Col>
          </Row>
          <Row>
            <Col span={10}>
              <p className="input-label not-must">技能证书</p>
              <Input
                placeholder="请输入技能证书"
                value={this.props.info.personalInfo && this.props.info.personalInfo.skillCertificate}
                onChange={onComponentChange('personalInfo', 'skillCertificate', isEvent).bind(this)}
              />
            </Col>
            <Col span={10} offset={4}>
              <p className="input-label not-must">职称及类别</p>
              <Input
                placeholder="请输入职称及类别"
                value={this.props.info.personalInfo && this.props.info.personalInfo.skillType}
                onChange={onComponentChange('personalInfo', 'skillType', isEvent).bind(this)}
              />
            </Col>
          </Row>
          <Row>
            <Col span={10}>
              <p className="input-label not-must">首次参加工作时间</p>
              <DatePicker
                onChange={onComponentChange('personalInfo', 'fristWork').bind(this)}
                format="YYYY/MM/DD"
                placeholder="请输入首次参加工作时间"
                style={{ width: '100%' }}
                value = {this.props.info.personalInfo && this.props.info.personalInfo.fristWork && moment(this.props.info.personalInfo && this.props.info.personalInfo.fristWork, 'YYYY-MM-DD')}
              />
            </Col>
          </Row>
        </CardWrapper>
      </div>
    )
  }
}
