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, Input } from 'antd'
import { onChange, onComponentChange } from '@/util'
import { curStatuOptions } from '@/data'
import API from '@/api'

const { Option } = Select

export default class EmploymentInfo extends Component {
  constructor(){
    super()

    this.getDepartmentList()
  }

  state={
    departmentList : []
  }

  async getDepartmentList(){
    let {data} = await API.base.getDepartmentList() 
    this.setState({departmentList:data})
  }


  render () {
    return (
      <div className="employment-info">
        <InfoHeader title="应聘信息" />
        <CardWrapper>
          <Row>
            <Col span={10}>
              <LabelInput>应聘岗位</LabelInput>
              <Select
                placeholder="请选择岗位"
                style={{ width: '100%' }}
                value={this.props.info.department||(this.state.departmentList[0] && this.state.departmentList[0].name)}
                onChange={onChange('department', true).bind(this)}
              >
                {
                  this.state.departmentList.map(function (item) {
                    return <Option key={item.name}>{item.name}</Option>
                  })
                }
              </Select>
            </Col>
            <Col span={10} offset={4}>
              <LabelInput>期望薪资（请输入正整数）</LabelInput>
              <Input
                placeholder="请输入期望薪资"
                value={this.props.info.sallary}
                onChange={onChange('sallary', true).bind(this)}
              />
            </Col>
          </Row>
          <Row>
            <Col span={10}>
              <LabelInput>目前状态</LabelInput>
              <Select
                placeholder="请选择目前状态"
                style={{ width: '100%' }}
                value={this.props.info.personalInfo && curStatuOptions[this.props.info.personalInfo.curStatus]}
                onChange={onComponentChange('personalInfo', 'curStatus', true).bind(this)}
              >
                {
                  curStatuOptions.map(function (item, index) {
                    return <Option value={index} key={index}>{item}</Option>
                  })
                }
              </Select>
            </Col>
          </Row>
        </CardWrapper>
      </div>
    )
  }
}
