import React from 'react';
import { Tag, Modal, Input, Spin, Switch, Select, message, Popconfirm, Button, Cascader, Icon } from 'antd';
import { provinceSelect, provinceList, getProvince } from '../../NewDicProvinceList.js';
import { companySearch } from '../../tools.js';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';

const ProvinceAdd = React.createClass({
    getInitialState() {
        return {
            cityOption: [],
            theProvince: [],
            citys: []
        };
    },
    componentWillReceiveProps(nextProps) {
        let theArr = [];
        this.state.theProvince = [nextProps.locations[nextProps.index].province];
        this.state.citys = nextProps.locations[nextProps.index].city || [];
        this.props.provinceList.map((item) => {
            if (item.id == nextProps.locations[nextProps.index].province) {
                item.cityList.map((city) => {
                    theArr.push({
                        value: city.id,
                        label: city.name
                    })
                });
            };
        });
        this.state.cityOption = theArr;
    },
    render() {
        return (
            <div style={{ display: 'inline-block', marginRight: '20px', marginBottom: '10px' }}>
                <Cascader placeholder="选择省份"
                    style={{ width: 80, marginRight: '20px', verticalAlign: 'middle' }}
                    options={this.props.provinceOption}
                    value={this.state.theProvince}
                    showSearch
                    filterOption={companySearch}
                    onChange={(e) => {
                        let bool = true, theArr = [], _me = this;;
                        this.props.locations.map((item, i) => {
                            if (item.province == e[0] && this.props.index != i) {
                                bool = false;
                            };
                        });
                        if (!bool) {
                            message.warning('请选择一个其他省份');
                            this.setState({
                                theProvince: undefined,
                                citys: undefined,
                                cityOption: []
                            });
                            return;
                        };
                        this.props.provinceList.map((item) => {
                            if (item.id == e) {
                                item.cityList.map((city) => {
                                    theArr.push({
                                        value: city.id,
                                        label: city.name
                                    })
                                });
                            };
                        });
                        this.props.getLocations(this.props.index, e[0])
                        this.setState({
                            theProvince: e,
                            citys: undefined,
                            cityOption: theArr,
                        })
                    }} />
                <Select style={{ verticalAlign: 'middle', width: 584 }}
                    placeholder="选择城市" notFoundContent="请先选择一个省份" multiple={true}
                    showSearch
                    filterOption={companySearch}
                    value={this.state.citys}
                    onChange={(e) => { this.setState({ citys: e }) }}
                    onBlur={() => {
                        this.props.getLocations(this.props.index, this.state.theProvince ? this.state.theProvince[0] : null, this.state.citys)
                    }}>
                    {this.state.cityOption.map((item) => {
                        return <Select.Option key={String(item.value)}>{item.label}</Select.Option>
                    })}
                </Select>
                <Button style={{ verticalAlign: 'middle', marginLeft: '20px' }} type="dashed" size="small"
                    onClick={() => { this.props.delLocations(this.props.index) }}>
                    <Icon type="minus" />
                </Button>
            </div>
        );
    },
})

const TheModal = React.createClass({
    postData() {
        this.setState({
            loading: true
        });
        let theArr = [];
        let theLocations = this.state.locations.concat();
        theLocations.map((item, i) => {
            if (item.province) {
                theArr.push(item);
            };
        });
        theArr.map((item) => {
            if (item.city && item.city.length) {
                item.city = item.city.join(',');
            } else {
                item.city = null;
            };
        });
        $.ajax({
            type: "POST",
            url: this.state.id ? globalConfig.context + "/api/admin/supervise/updateAdmin" : globalConfig.context + "/api/admin/supervise/insertAdmin",
            data: {
                data: JSON.stringify({
                    'id': this.state.id,
                    'name': this.state.name,
                    'email': this.state.email,
                    'mobile': this.state.mobile,
                    'position': this.state.position,
                    'locations': theArr,
                    'superiorId': this.state.superiorId
                }),
                '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;
    },
    getInitialState() {
        return {
            name: '',
            email: '',
            mobile: '',
            roles: [],
            visible: false,
            loading: false,
            bindroles: [],
            locations: [],
            cityOption: [],
            locationsObj: {}
        }
    },
    handleCancel() {
        this.setState({
            visible: false,
        });
        this.props.handleReturn(false, false);
    },
    loadInitialData() {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/roles',
            cache: false
        }).done((rolesres) => {
            this.setState({
                roles: rolesres.data,
                loading: false
            });
        })
    },
    loadAdminSelectList() {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/admin/supervise/adminSelectList',
            cache: false
        }).done((data) => {
            if (!data.data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                    return;
                };
            };
            let theArr = [], i;
            for (i in data.data) {
                theArr.push(
                    <Select.Option key={i}>{data.data[i]}</Select.Option>
                )
            };
            this.setState({
                adminSelectOption: theArr,
                loading: false
            });
        })
    },
    loadAdminOwnLocation() {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/admin/supervise/adminOwnLocation',
            cache: false
        }).done((data) => {
            if (!data.data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                    return;
                };
            };
            let theArr = [], theList = [];
            if ((typeof (data.data)).indexOf('string') == -1) {
                data.data.map((item) => {
                    theArr.push({
                        value: item.province,
                        label: getProvince(item.province)
                    });
                    let cityList = [];
                    if (item.city) {
                        item.city.split(',').map((c) => {
                            cityList.push({
                                id: Number(c),
                                name: getProvince(c)
                            });
                        });
                    };
                    theList.push({
                        id: item.province,
                        name: getProvince(item.province),
                        cityList: cityList.length ? cityList : null
                    });
                });
            } else {
                theArr = provinceSelect();
                theList = provinceList;
            }
            this.setState({
                provinceOption: theArr,
                provinceList: theList,
                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
            });
        })
    },
    loadLocations(id) {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/admin/supervise/adminDetailLocation',
            cache: false,
            data: {
                "id": id
            }
        }).done((data) => {
            if (!data.data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                    return;
                };
            };
            data.data.map((item) => {
                if (item.city) {
                    item.city = item.city.split(',');
                }
            });
            this.setState({
                locations: data.data,
                loading: false
            });
        })
    },
    componentWillMount() {
        this.loadAdminSelectList();
        this.loadAdminOwnLocation();
    },
    componentWillReceiveProps(nextProps) {
        if (nextProps.show && !this.state.roles.length) {
            this.loadInitialData();
        };
        if (!this.state.visible && nextProps.show) {
            if (nextProps.data.id) {
                this.loadBindRoles(nextProps.data.id);
                this.loadLocations(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 : '',
            position: nextProps.data ? nextProps.data.position : '',
            superiorId: nextProps.data ? nextProps.data.superiorId : '',
        };
        this.setState(nextState)
    },
    resetPwd(e) {
        this.setState({
            loading: true
        })
        $.ajax({
            type: 'post',
            url: globalConfig.context + "/api/admin/supervise/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 className="list">
                <span className='modal-text'>角色</span>
                <Select
                    multiple
                    style={{ width: '60%' }}
                    placeholder="选择用户关联角色"
                    value={this.state.bindroles}
                    onChange={this.bindRoles} >
                    {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;
    },
    getLocations(index, p, c) {
        this.state.locations.map((item, i) => {
            if (index == i) {
                item.province = p;
                item.city = c || [];
            };
        });
    },
    delLocations(index) {
        this.state.locations.splice(index, 1);
        this.setState({ locations: this.state.locations });
    },
    provinceAdd() {
        this.state.locations.push({
            province: null,
            city: null
        });
        this.setState({ locations: this.state.locations });
    },
    render() {
        return (
            <div className="modal" >
                <Spin spinning={this.state.loading} >
                    <Modal maskClosable={false} title="管理员详情"
                        closable={false} width={1000}
                        visible={this.state.visible}
                        onOk={this.postData}
                        onCancel={this.handleCancel} >
                        <ul className="modal-content clearfix">
                            <li className="list">
                                <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 className="list">
                                <span className='modal-text'>职位</span>
                                <Input value={this.state.position} onChange={(e) => { this.state.position = e.target.value; this.setState({ position: this.state.position }); }} />
                            </li>
                            <li className="list">
                                <span className='modal-text'>上级</span>
                                <Select style={{ verticalAlign: 'middle', width: 200 }}
                                    placeholder="选择一个上级" notFoundContent="没有获取到管理员列表"
                                    showSearch
                                    filterOption={companySearch}
                                    value={this.state.superiorId}
                                    onChange={(e) => { this.setState({ superiorId: e }) }} >
                                    {this.state.adminSelectOption}
                                </Select>
                            </li>
                            <li className="list">
                                <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 className="list">
                                <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()}
                            {this.state.id ? <li className="list">
                                <span></span>
                                <Popconfirm
                                    title={"用户 [ " + this.state.name + " ] 的密码将会重置为123456，确认操作？"}
                                    onConfirm={this.resetPwd}
                                    okText="确认"
                                    cancelText="取消"
                                    placement="topLeft">
                                    <Button>重置密码</Button>
                                </Popconfirm>
                            </li> : <li></li>}
                        </ul>
                        <div>
                            <span className='modal-text' style={{ verticalAlign: 'top' }}>地区</span>
                            {window.showPermissionList && window.showRoleList ? <div style={{ display: 'inline-block', width: '88%' }}>
                                {this.state.locations.map((item, i) => {
                                    return <ProvinceAdd
                                        provinceList={this.state.provinceList}
                                        provinceOption={this.state.provinceOption}
                                        getLocations={this.getLocations}
                                        delLocations={this.delLocations}
                                        locations={this.state.locations}
                                        index={i} key={i} />
                                })}
                                <Button style={{ verticalAlign: 'middle' }} type="dashed" size="small"
                                    onClick={this.provinceAdd}>
                                    <Icon type="plus" />
                                </Button>
                            </div> : <div style={{ display: 'inline-block', width: '88%' }}>
                                    {this.state.locations.map((item, i) => {
                                        return <Tag key={i}>{getProvince(item.province) + ' ' + (item.city ? item.city.map((c) => {
                                            return getProvince(c) + ' '
                                        }) : '')}</Tag>
                                    })}
                                </div>}
                        </div>
                    </Modal>
                </Spin>
            </div >
        );
    }
})

export default TheModal;