import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { Radio, Input, Card, Tabs, Button, message } from 'antd';
const TabPane = Tabs.TabPane;

const RadioGroup = Radio.Group;
import cx from 'classnames';
import l from '../components/loginFormLess.les';
import s from './main.les';
import { chooseTenant, getTenantsAction } from "../redux/actions/authed"
import LoginBgImg from './LoginBgImg'

const radioStyle = {
  display: 'block',
  height: '30px',
  lineHeight: '30px'
};

class ChooseTenantContainer extends React.Component {
  constructor(props) {
    super(props);
    this.renderRadio = this.renderRadio.bind(this);
    this.state = {
      value: 1
    }
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(getTenantsAction());
  }

  componentWillReceiveProps(nextProps) { }

  componentWillUnmount() { }

  renderRadio(tenants) {
    let radio = [];
    if (tenants && tenants.length) {
      tenants.map((item, index) => {
        radio.push(
          <Radio key={index} style={radioStyle} value={item.id}>{item.name}</Radio>
        )
      })
    }
    return radio;

  }
  onChange = (e) => {
    this.setState({ value: e.target.value });
  }
  changeTenant() {
    const { value } = this.state;
    const { dispatch } = this.props;
    if (value == 1) {
      message.info("请选择企业");
    } else {
      dispatch(chooseTenant(value))
    }
  }
  render() {
    const { tenants } = this.props;
    console.log('tenants.....', tenants);
    return (
      <div className={cx('login_container')}>
        <div className={cx(s.tanants_body, 'tenants_warp')}>
          <div style={{ width: '160px', height: '24px', margin: '0 auto', textAlign: 'center', fontSize: '16px' }}>----请选择企业----</div>
          <div style={{ overflow: 'hidden', width: '368px', height: '198px', marginTop: '16px' }}>
            <div style={{ width: '400px', height: '215px', overflow: 'scroll' }}>
              <RadioGroup style={{ paddingBottom: '10px' }} onChange={this.onChange} value={this.state.value}>
                {
                  this.renderRadio(tenants)
                }
              </RadioGroup>
            </div>
          </div>
          <div className={cx(s.tenants_foot)}>
            <Button type='primary' style={{ height: '45px', width: '100%', fontSize: '14px' }} onClick={this.changeTenant.bind(this)}>完成</Button>
            <div className={cx(s.back_link)} onClick={() => {
              window.location = '#/';
            }}>返回登录</div>
          </div>
        </div>
      </div>
    )
  }
}

const mapState = (state) => {
  const { hr: {
    tenants
  } } = state
  return { tenants }
};
export default connect(mapState)(ChooseTenantContainer);