import React, { Component } from 'react';
import { Row, Col, Menu, Icon, Tabs, Form, Input, Button, Modal} from 'antd';
import test from '../assets/1.png';
import styles from './pc_header.less';
import { connect } from 'dva';
import { routerRedux, Link } from 'dva/router';
import message from "../models/home/message";
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const { TabPane } = Tabs;
const FormItem = Form.Item;

@Form.create()
export default class PCHeader extends Component {
 state = {
   current:"top",
   hasLogined:false,
   userName:'',
   loading: false,
   visible: false
 }
 setModalVisibel(value){
   this.setState({visible:value});
 }
 handelClick(e){
   if(e.key=="register"){
     this.setState({current:'register'});
     this.setModalVisibel(true);
   }else{
     this.setState({current:e.key});
   }
 }
 handleSubmit(e){
   e.preventDefault();
   var myFetchOptions = {
     method:'GET'
   };
   var fromData = this.props.form.getFieldValue();
   console.log(fromData);
   fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=register&username=userName&password=password&r_userName="+fromData.r_userName+"&r_password="+formData.r_password+"&r_confirmPassword="+formData.r_confirmPassword,myFetchOptions).
     then(response=>response.json()).then(json=>{
       this.setState({userName:json.NickUserName});
   });
   message.success("请求成功！");
   this.setModalVisibel(false);
 }
 render() {
   const url ='/test';
   const { getFieldDecorator } = this.props.form;
   const userShow = this.state.hasLogined?
     <Menu.Item key="loginout">
       <Button type="dashed">{this.state.userName}</Button>
       <Link target="_blank"><Button type="dashed">个人中心</Button></Link>
       <Link target="_blank"><Button type="dashed">退出</Button></Link>
     </Menu.Item>
     :<Menu.Item key="register">
       <Icon type="appstore" />注册/登录
     </Menu.Item>
   return (
     <header>
       <Row>
         <Col span={2} />
         <Col span={4}>
           <a href={url} className={styles.logo}>
             <img src={test} alt="logo"></img>
           <span>ReactNews</span>
           </a>
         </Col>
         <Col span={16}>
           <Menu mode="horizontal"  onClick={this.handelClick.bind(this)} selectedKeys={[this.state.current]}>
             <Menu.Item key="top">
               <Icon type="appstore" />头条
             </Menu.Item>
             <Menu.Item key="keji">
               <Icon type="appstore" />科技
             </Menu.Item>
             <Menu.Item key="wenhua">
               <Icon type="appstore" />文化
             </Menu.Item>
             <Menu.Item key="yule">
               <Icon type="appstore" />娱乐
             </Menu.Item>
             <Menu.Item key="shishang">
               <Icon type="appstore" />时尚
             </Menu.Item>
             {userShow}
           </Menu>
           <Modal title="个人中心"  visible={this.state.visible}  onOk={()=>this.setModalVisibel(false)} onCancel={()=>this.setModalVisibel(false)}>
             <Tabs type="card">
               <TabPane tab="注册" key="1">
                 <Form horizontal="true" onSubmit={this.handleSubmit}>
                   <FormItem label="账号">
                     <Input placeholder="请输入您的账号" {...getFieldDecorator('r_userName')}/>
                   </FormItem>
                   <FormItem label="密码">
                     <Input type="password" placeholder="请输入您的密码" {...getFieldDecorator('r_password')}/>
                   </FormItem>
                   <FormItem label="确认密码">
                     <Input type="password" placeholder="请确认您的密码" {...getFieldDecorator('r_confirmPassword')}/>
                   </FormItem>
                   <Button type="primary" htmlType="submit">注册</Button>
                 </Form>
               </TabPane>

             </Tabs>
           </Modal>
         </Col>
         <Col span={2} />
       </Row>
     </header>
   );
 }
}