import React from 'react';
import { Row, Col, Modal, Form, Input, message } from "antd";
import './topTab.less';
import SpinContainer from '../component/SpinContainer';
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"
                    >
                        <SpinContainer spinning={this.state.loading}>
                            <div className="clearfix">
                                <FormItem
                                    className="half-item"
                                    labelCol={{ span: 8 }}
                                    wrapperCol={{ span: 12 }}
                                    label="账号"
                                >
                                    <Input
                                        placeholder="请输入账号"
                                        value={window.adminData && 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>
                        </SpinContainer>
                    </Form>
                </Modal>
            </div>
        );
    }
});

export default TopTab;