import React,{PropTypes} from 'react';
import { connect } from 'react-redux'; 
import ReactDOM from 'react-dom';  
import cx from 'classnames';
import s from './form.scss';
import {loadOrganizations} from '../../../redux/actions/hrSetting'; 
import {createRecord} from '../../../utils/formUtil'; 
import {Form,Select,Tag,Input,Button,Col} from 'antd'; 
const Option = Select.Option; 
const FormItem = Form.Item;
const InputGroup = Input.Group;
const OptGroup = Select.OptGroup;

const getOptions=(organizations)=>{
  let children = [];
  organizations.map((organization,i)=>{
    children.push(<Option key={organization.uuid} {...organization}>{organization.name}</Option>);
  })
  return children;
}

class OrgField extends React.Component {
    constructor(props) {
        super(props);   
        this.filterOption=this.filterOption.bind(this); 
        this.selectChange=this.selectChange.bind(this); 
        this.state={
          organizationName:'',
          orgUuid:'',
        }
    }
    static propTypes = {  
        label:PropTypes.string,
        options:PropTypes.object,
        organizations:PropTypes.array  
    } 
    static defaultProps={ 
    }
    filterOption(inputValue, option){ /*过滤*/
      const {name,pinyin,pinyinfl}=option.props; 
       if(name&&name.indexOf(inputValue)!=-1){
        return true
      }if(pinyin&&pinyin.indexOf(inputValue)!=-1){
        return true
      }if(pinyinfl&&pinyinfl.indexOf(inputValue)!=-1){
        return true
      } 
      return false;
    } 
    selectChange(value){
        const {field={}}=this.props; 
        field.onChange(value);
    } 
    render(){    
        const {label,options,name,field={},organizations=[]}=this.props;
        const {organizationName,orgUuid}=this.state;  
        let defaultValue=field.value; 
        if(defaultValue&&defaultValue.indexOf(',')!=-1){ 
            defaultValue=field.value.split(',');
        }else if(defaultValue){  
            defaultValue=orgUuid ? [orgUuid] : [field.value]; 
        }else{ 
            defaultValue=[]
        } 
        return( 
          <FormItem
                label={label}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                required={options.is_required}
                validateStatus={null}
                help=""> 
              <Select  
                name={name} 
                style={{display:'inline-block'}} 
                multiple={false}
                style={{ width: '100%' }}
                placeholder={options.tooltip}
                notFoundContent='没有找到'
                filterOption={this.filterOption}
                optionLabelProp='name'
                disabled={false}
                value={defaultValue}
                onChange={this.selectChange}>
                {getOptions(organizations)}   
              </Select> 
          </FormItem>
        )
    }
}


const mapStateToProps = (state) => {  
  const {hrSetting:{organizations}}= state;
  return {
      organizations
  };
}

export default connect(mapStateToProps)(OrgField);