var React = require('react');
var Router = require('react-router');
var Link = Router.Link;
var DigH5 = require("../../../libs/dig-h5/DigH5.jsx");
var FontIcon = DigH5.FontIcon;
var TextField = DigH5.TextField;
var RaisedButton = DigH5.RaisedButton;
var Checkbox = DigH5.Checkbox;
var IconButton = DigH5.IconButton;
var Paper = DigH5.Paper;
var WebContext = DigH5.Utils.WebContext;


var Login = React.createClass({

	contextTypes: {
      router: React.PropTypes.func
  	},

	render: function() {
		return (
			<div className="login-page">
				<div className="login-container">
					<Paper className="login-paper" innerClassName="login-paper-inner" zDepth={2}>
						<IconButton iconClassName="bingo-dig-icons-409" className="right-action-icon"/>
						<div className="login-title-container">
							<FontIcon className="bingo-dig-icons-6 login-icon-main" />
							<span className="login-title">
								使用你的系统账号登陆
							</span>
						</div>
						<div className="login-form-container">
							<div className="login-form-user">
								<div className="dig-row">
									<div className="dig-cols-1 login-icon">
										<FontIcon className="bingo-dig-icons-741" />
									</div>
									<div className="dig-cols-11">
										<TextField 
											ref="username"
											hintText="用户名"
										  	defaultValue="admin"
										  	floatingLabelText="用户名"
										  	className="login-text" />
									</div>
								</div>
							</div>
							<div className="login-form-password">
								<div className="dig-row">
									<div className="dig-cols-1 login-icon">
										<FontIcon className="bingo-dig-icons-68" />
									</div>
									<div className="dig-cols-11">
										<TextField 
											ref="password"
											hintText="密码"
											type="password"
											floatingLabelText="密码"
											className="login-text" />
									</div>
								</div>
							</div>
							<div className="login-form-action">
								<div className="login-form-login">
									<Checkbox
									  ref="checkbox"
									  id="checkbox"
									  name="checkboxName" 
									  value="checkboxValue"
									  className="login-status"
									  label="保持登陆状态"/>
									<FontIcon className="bingo-dig-icons-52 login-status-icon" />
									<RaisedButton className="login-action" onClick={this._login} label="点击登陆" primary={true} />
								</div>
							</div>
						</div>
						<div className="login-register">
							<span className="login-register-title">
								创建一个账户
							</span>
						</div>
					</Paper>
				</div>
			</div>
		);
	},

	_login: function () {
		//login代码

		var userName = this.refs.username.getValue();
		WebContext.setUser(true, "userId", userName, 'areaCode', 'orgName');
		WebContext.setLoginStatus(true);
		this.context.router.transitionTo("index");
	}

});

module.exports = Login;