import React from 'react';
import { Modal, Input, Spin, Switch, Select, message, Popconfirm, Button } from 'antd';
import { provinceArr } from '../../dataDic.js';
import { companySearch } from '../../tools.js';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';

export default class TheModal extends React.Component {
    postData() {
        this.setState({
            loading: true
        });
        $.ajax({
            type: "POST",
            url: this.state.id ? globalConfig.context + "/api/admin/updateAdmin" : globalConfig.context + "/api/admin/insertAdmin",
            data: {
                'id': this.state.id,
                'name': this.state.name,
                'email': this.state.email,
                'mobile': this.state.mobile,
                'province': this.state.province,
                'roles': this.state.bindroles
            }
        }).done((res) => {
            if (res.error.length) {
                message.error(res.error[0].message);
            } else {
                message.success("保存成功");
                this.setState({
                    visible: false,
                });
                this.props.handleReturn(false, true);
                //第二个参数表示保存
            }
        }).always(() => {
            this.setState({
                loading: false
            })
        })
        this.props.postData;
    }
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            email: '',
            mobile: '',
            roles: [],
            visible: false,
            loading: false,
            provinceOption: [],
            bindroles: []
        }
    }
    handleCancel() {
        this.setState({
            visible: false,
        });
        this.props.handleReturn(false, false);
    }
    componentWillMount() {
        let _me = this;
        provinceArr.map(function (item) {
            _me.state.provinceOption.push(
                <Select.Option value={item} key={item}>{item}</Select.Option>
            )
        });
    }
    loadInitialData() {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/roles',
            cache: false
        }).done((rolesres) => {
            this.setState({
                roles: rolesres.data,
                loading: false
            });
        })
    }
    loadBindRoles(uid) {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/admin/role',
            cache: false,
            data: {
                "uid": uid
            }
        }).done((data) => {
            this.setState({
                bindroles: data.data || [],
                loading: false
            });
        })
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.show && !this.state.roles.length) {
            this.loadInitialData();
        };
        if (!this.state.visible && nextProps.show) {
            this.loadBindRoles(nextProps.data.id);
        };
        let nextState = {
            visible: nextProps.show,
            id: nextProps.data ? nextProps.data.id : '',
            name: nextProps.data ? nextProps.data.name : '',
            email: nextProps.data ? nextProps.data.email : '',
            mobile: nextProps.data ? nextProps.data.mobile : '',
            province: nextProps.data ? nextProps.data.province : ''
        };
        this.setState(nextState)
    }
    resetPwd(e) {
        this.setState({
            loading: true
        })
        $.ajax({
            type: 'post',
            url: globalConfig.context + "/api/admin/resetPwd",
            dataType: "json",
            data: {
                id: this.state.id
            }
        }).done((res) => {
            if (res.error && res.error.length) {
                message.error(res.error[0].message);
            } else {
                message.success("密码重置成功");
            }
        }).always(() => {
            this.setState({
                loading: false
            })
        });
    }
    getRolesSelection() {
        if (!this.state.id) {
            return <li></li>
        } else if (this.state.id != '1') {
            return <li>
                <span className='modal-text'>角色</span>
                <Select
                    multiple
                    style={{ width: '60%' }}
                    placeholder="选择用户关联角色"
                    value={this.state.bindroles}
                    onChange={this.bindRoles.bind(this)}
                >
                    {this.getRolesOptions()}
                </Select>
            </li>
        } else if (this.state.id == "1") {
            return <li><span className='modal-text'>角色</span><span>系统管理员</span></li>
        }
    }


    bindRoles(val) {
        this.setState({
            bindroles: val
        });
    }


    getRolesOptions() {
        let options = [];
        for (let i = 0; i < this.state.roles.length; i++) {
            options.push(<Select.Option key={String(this.state.roles[i].id)}>{this.state.roles[i].roleName}</Select.Option>);
        }
        return options;
    }

    render() {
        return (
            <div className="modal" >
                <Spin spinning={this.state.loading} >
                    <Modal title="管理员详情"
                        closable={false}
                        visible={this.state.visible}
                        onOk={this.postData.bind(this)}
                        onCancel={this.handleCancel.bind(this)}
                    >
                        <ul className="modal-content">
                            <li>
                                <span className='modal-text'>名字</span>
                                <Input value={this.state.name} onChange={(e) => { this.state.name = e.target.value; this.setState({ name: this.state.name }); }} />
                            </li>
                            <li>
                                <span className='modal-text'>登录账号</span>
                                <Input value={this.state.mobile} onChange={(e) => { this.state.mobile = e.target.value; this.setState({ mobile: this.state.mobile }); }} />
                            </li>
                            <li>
                                <span className='modal-text'>省份</span>
                                <Select placeholder="选择省份"
                                    style={{ width: 200 }}
                                    value={this.state.province}
                                    showSearch
                                    filterOption={companySearch}
                                    onChange={(e) => { this.setState({ province: e }) }}>
                                    {this.state.provinceOption}
                                </Select>
                            </li>
                            <li>
                                <span className='modal-text'>邮箱</span>
                                <Input value={this.state.email} onChange={(e) => { this.state.email = e.target.value; this.setState({ email: this.state.email }); }} />
                            </li>
                            {this.getRolesSelection()}
                            <li>
                                <span></span>
                                <Popconfirm
                                    title={"用户 [ " + this.state.name + " ] 的密码将会重置为123456，确认操作？"}
                                    onConfirm={this.resetPwd.bind(this)}
                                    okText="确认"
                                    cancelText="取消"
                                    placement="topLeft">
                                    <Button>重置密码</Button>
                                </Popconfirm>
                            </li>
                        </ul>
                    </Modal>
                </Spin>
            </div >
        );
    }
}
