import React from 'react';
import { Row, Col, Modal, Form, Input, Spin, message } from "antd";
import './topTab.less';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';

const TopTab = React.createClass({
    getInitialState() {
        return {
            username: 'admin',
            loading: false
        };
    },
    logOut() {
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/login",
        }).done(function (data) {
            window.location.href = globalConfig.context + "/admin/login"
        });
    },
    onCancel() {
        this.setState({
            visible: false,
            password: undefined,
            usedPwd: undefined
        })
    },
    changePwd() {
        this.setState({
            loading: true
        })
        $.ajax({
          method: "post",
          dataType: "json",
          url: globalConfig.context + "/api/admin/updateAdmin",
          data: {
            password: this.state.password,
            usedPwd: this.state.usedPwd,
          },
          success: function(data) {
            if(data.error && data.error.length) {
                message.warning(data.error[0].message)
            }else {
                message.success("修改密码成功!")
                this.onCancel()
            }
          }.bind(this)
        }).always(
          function() {
            this.setState({
              loading: false
            });
          }.bind(this)
        );
    },
    componentWillMount () {
        this.loadData();
    },
    loadData() {
        // this.setState({
        //     loading: true
        // });
        // $.ajax({
        //     method: "get",
        //     dataType: "json",
        //     crossDomain: false,
        //     url: globalConfig.context + "/api/admin/notice/unreadCount",
        //     success: function (data) {
        //         if (!data.data) {
        //             if (data.error[0] && data.error[0]) {
        //                 message.warning(data.error[0].message);
        //                 return;
        //             };
        //         };
        //         this.setState({
        //             badge: data.data,
        //         });
        //     }.bind(this),
        // }).always(function (data) {
        //     this.setState({
        //         loading: false
        //     });
        // }.bind(this));
    },
    render() {
        const FormItem = Form.Item;
        return (
          <div className="account-top">
            <div className="acc-top-user">
              <span className="acc-top-user-name">
                <a
                  onClick={e => {
                    e.stopPropagation();
                    this.setState({ visible: true });
                  }}
                >
                  欢迎您,{" "}
                  {this.state.username || adminData.name || adminData.mobile}
                </a>{" "}
                <a onClick={this.logOut}>[ 退出 ]</a>
              </span>
              <span className="acc-top-title">科德官网内容管理</span>
              <span className="acc-top-user-toindex">
                <a href={globalConfig.context + "/portal/index.html"}>
                  返回首页
                </a>
              </span>
            </div>
            <Modal
              className="customeDetails"
              title="修改密码"
              visible={this.state.visible}
              onOk={this.changePwd}
              width={"330px"}
              onCancel={this.onCancel}
            >
              <Form
                layout="horizontal"
                onSubmit={this.edithandleSubmit}
                id="demand-form"
              >
                <Spin spinning={this.state.loading}>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 8 }}
                      wrapperCol={{ span: 12 }}
                      label="账号"
                    >
                      <Input
                        placeholder="请输入账号"
                        value={window.adminData.account}
                        disabled
                        style={{ width: "150px" }}
                      />
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 8 }}
                      wrapperCol={{ span: 12 }}
                      label="原密码"
                    >
                      <Input
                        placeholder="请输入原密码"
                        value={this.state.usedPwd}
                        onChange={e => {
                          this.setState({ usedPwd: e.target.value });
                        }}
                        style={{ width: "150px" }}
                      />
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 8 }}
                      wrapperCol={{ span: 12 }}
                      label="新密码"
                    >
                      <Input
                        placeholder="请输入新密码"
                        value={this.state.password}
                        onChange={e => {
                          this.setState({ password: e.target.value });
                        }}
                        style={{ width: "150px" }}
                      />
                    </FormItem>
                  </div>
                </Spin>
              </Form>
            </Modal>
          </div>
        );
    }
});

export default TopTab;