import React,{Component} from "react";
import {AutoComplete, Button, Form, Icon, Input, message, Modal, Popconfirm, Select, Spin} from "antd";
import {cityArr, post, station} from "../../../dataDic";
import $ from "jquery/src/ajax";
import {splitUrl} from "../../../tools";
import moment from "moment";
import ImgList from "../../../common/imgList";

class PicturesWall extends Component{
    constructor(props) {
        super(props);
        this.state={
            previewVisible: false,
            previewImage: '',
            fileList: [],
            role:[],
            district:[],
            cityOption:[],
        }
    }
    handleCancel() {
        this.setState({ previewVisible: false })
    }
    handlePreview(file) {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }
    handleChange(info) {
        let fileList = info.fileList;
        this.setState({ fileList });
        this.props.fileList(fileList);
    }
    componentWillReceiveProps(nextProps) {
        this.state.fileList = nextProps.pictureUrl;
    }
    render() {
        const { fileList } = this.state;
        return (
                <ImgList
                    domId={this.props.domId}
                    uploadConfig={{
                        action:globalConfig.context + "/api/admin/superviser/uploadAdminImg",
                        data:{ 'sign': this.props.pictureSign },
                        multiple:true,
                        listType:"picture-card",
                    }}
                    onChange={(infor)=>{
                        this.handleChange(infor)
                    }}
                    fileList={fileList}
                />
        );
    }
}

class UserProcessing extends Component{
    constructor(props) {
        super(props);
        this.state={
            orgCodeUrl:[],
            loading: false,
            loaduser: {},
            visible:false,
            datauser:[],
            role:[],
            roleArr:[],
            departmentArr:[],
            addId:'',
            customerArr:[],
        }
        this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.httpChange = this.httpChange.bind(this);
        this.blurChange = this.blurChange.bind(this);
        this.selectAuto = this.selectAuto.bind(this);
        this.resetPwd = this.resetPwd.bind(this);
    }
    //新建获取id
    addIdS() {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/superviser/newId',
            data: {},
            success: function(data) {
                this.setState({
                    id: data.data
                });
            }.bind(this),
        }).always(function() {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    handleSubmit(e) {
        e.preventDefault();
        this.props.inspect(()=>{
            if(!this.state.role || this.state.role.length === 0){
                message.warning('请选择角色');
                return false;
            };
            if(!this.state.status&&this.props.userDetaile){
                message.warning('请选择角色状态');
                return false;
            };
            if(window.adminData.isSuperAdmin){
                if(!this.state.departmentId){
                    message.warning('请选择组织部门');
                    return false;
                };
            }
            if(!this.state.theTypes&&!this.state.superiorId){
                message.warning('请输入正确的上级主管');
                return false;
            };
            if(this.state.contactMobile){
                if(!(/^1[1-9][0-9]\d{4,8}$/.test(this.state.contactMobile))){
                    message.warning("不是完整的11位手机号或者正确的手机号前七位");
                    this.setState({
                        loading: false
                    });
                    return false;
                }
            }
            let theorgCodeUrl = [];
            if (this.state.orgCodeUrl.length) {
                let picArr = [];
                this.state.orgCodeUrl.map(function (item) {
                    if ( item.response && item.response.data && item.response.data.length ){
                        picArr.push(item.response.data);
                    }
                });
                theorgCodeUrl = picArr.join(",");
            };
            let api = this.props.userDetaile?"/api/admin/superviser/updateAdmin":'/api/admin/superviser/insertAdmin'
            this.setState({
                loading: true
            });
            $.ajax({
                method: "POST",
                dataType: "json",
                crossDomain: false,
                url: globalConfig.context + api,
                data: {
                    roles:this.state.role,
                    data:JSON.stringify({
                        id:this.state.id?this.state.id:this.props.aid,
                        mobile:this.state.mobile,
                        status:this.state.status,
                        contactMobile:this.state.contactMobile,
                        name:this.props.name,
                        departmentId:window.adminData.isSuperAdmin?this.state.departmentId:window.adminData.departmentId,
                        duty:this.state.duty,
                        position:this.state.position,//岗位
                        email:this.state.email,
                        superiorId:this.state.theTypes?this.state.theTypes:this.state.superiorId,
                        district:this.state.district,
                        headPortraitUrl:theorgCodeUrl.length?theorgCodeUrl:'',
                        entryTime:this.state.selTime
                    })
                }
            }).done(function (data) {
                this.setState({
                    loading: false
                });
                if (!data.error.length) {
                    if(this.props.userDetaile){
                        this.props.onPreservation(this.props.aid);
                    }else{
                        this.props.onPreservation(data.data.id);
                    }

                } else {
                    message.warning(data.error[0].message);
                }
            }.bind(this));
        });
    }

    //主管初始加载(自动补全)
    supervisor(e){
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/organization/selectName",
            data:{
                name:e
            },
            success: function (data) {
                let thedata=data.data;
                if (!thedata) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                    thedata = {};
                };
                this.setState({
                    customerArr:thedata,
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    //上级主管输入框失去焦点是判断客户是否存在
    selectAuto(value,options){
        this.setState({
            superior:value
        })
    }

    blurChange(e){
        let theType='';
        let contactLists=this.state.customerArr || [];
        if (e) {
            contactLists.map(function (item) {
                if (item.name == e.toString()) {
                    theType = item.id;
                }
            });
        }
        this.setState({
            theName:e,
            theTypes:theType
        })
    }

    //值改变时请求客户名称
    httpChange(e){
        if(e.length>=1){
            this.supervisor(e);
        }
        this.setState({
            superior:e
        })
    }

    rolesArrS() {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/role",
            data: {
                uid: this.props.aid
            },
            success: function(data) {
                let thedata = data.data;
                if(data.error && data.error.length) {
                    message.warning(data.error[0].message);
                }else{
                    this.setState({
                        role:thedata,
                    })
                }
            }.bind(this),
        }).always(function() {
        }.bind(this));
    }

    //查看基本详情基本信息
    loaduser(aid){
        if(aid){
            $.ajax({
                method: "post",
                dataType: "json",
                crossDomain: false,
                url: globalConfig.context + '/api/admin/superviser/selectAllByid',
                data: {
                    id: aid
                },
                success: function (data) {
                    let thisdata = data.data;
                    if (!thisdata) {
                        if (data.error && data.error.length) {
                            message.warning(data.error[0].message);
                        };
                        thisdata = {};
                    };
                    this.setState({
                        id: thisdata.id,
                        mobile: thisdata.mobile,
                        name: thisdata.name,
                        email: thisdata.email,
                        createTime: thisdata.createTime,
                        district:thisdata.district!=' '?JSON.parse(thisdata.district):undefined,
                        position: thisdata.position?thisdata.position:undefined,
                        superior:thisdata.superior,
                        superiorId: thisdata.superiorId,//上级Id
                        duty:thisdata.duty?thisdata.duty:undefined,//职务
                        status:thisdata.status?thisdata.status:undefined,
                        contactMobile:thisdata.contactMobile?thisdata.contactMobile:undefined,//手机号
                        departmentId:thisdata.departmentId?thisdata.departmentId:undefined,//部门id
                        userNo:thisdata.userNo,
                        orgCodeUrl: thisdata.headPortraitUrl? splitUrl(thisdata.headPortraitUrl, ',', globalConfig.avatarHost + '/upload') : [],
                        theTypes:'',
                        entryTime:thisdata.entryTime?moment(thisdata.entryTime,'YYYY-MM-DD'):undefined,
                        selTime:thisdata.entryTime
                    });
                }.bind(this),
            }).always(function () {
                this.setState({
                    loading: false
                });
            }.bind(this));
        }
    }

    //重置密码
    resetPwd() {
        this.setState({
            loading: true
        })
        $.ajax({
            type: 'post',
            url: globalConfig.context + "/api/admin/superviser/resetPwd",
            dataType: "json",
            data: {
                id: this.props.aid
            },
        }).done((res) => {
            if (res.error && res.error.length) {
                message.error(res.error[0].message);
            } else {
                message.success("密码重置成功");
            }
        }).always(() => {
            this.setState({
                loading: false
            })
        });
    }

    //入职时间选择
    selTime(e,index){
        this.setState({
            entryTime:e,
            selTime:index
        })
    }

    getOrgCodeUrl(e) {
        this.setState({ orgCodeUrl: e });
    }

    componentDidMount() {
        if(!this.props.userDetaile){
            this.addIdS();
        };
        this.rolesList();
        this.departmentList();

        if(this.props.userDetaile && this.props.aid){
            this.loaduser(this.props.aid);
            this.rolesArrS();
        }else{
            this.state.name='';
            this.state.mobile='',
            this.state.role=[];
            this.state.departmentId=undefined;
            this.state.mobile='';
            this.state.duty=undefined;
            this.state.position=undefined;
            this.state.station=undefined;
            this.state.contactMobile='';
            this.state.email='';
            this.state.superiorId='';
            this.state.superior='';
            this.state.district=[];
            this.state.orgCodeUrl=[];
            this.state.id='';
            this.state.entryTime=undefined;
        }
    }

    componentWillMount(e){
        const cityArrs=[];
        cityArr.map(function (item) {
            cityArrs.push(
                <Select.Option key={item.value}>{item.key}</Select.Option>
            )
        });
        this.state.cityOption=cityArrs;
    }

    rolesList() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/roles",
            data: {},
            success: function (data) {
                let thedata = data.data;
                let theArr = [];
                if (!thedata) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                    ;
                    thedata = {};
                } else {
                    thedata.map(function (item, index) {
                        theArr.push({
                            key: index,
                            roleName: item.roleName,
                            id: item.id,
                        })
                    })
                }
                this.setState({
                    roleArr: theArr,
                })
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }
    //部门
    departmentList() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/organization/selectSuperId",
            data: {

            },
            success: function(data) {
                let thedata = data.data;
                let theArr = [];
                if(!thedata) {
                    if(data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    thedata.map(function(item, index) {
                        theArr.push({
                            key: index,
                            name: item.name,
                            id: item.id,
                            depNo: item.depNo
                        })
                    })
                }
                this.setState({
                    departmentArr: theArr,
                })
            }.bind(this),
        }).always(function() {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    render() {
        const FormItem = Form.Item
        const formItemLayout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 14 },
        };
        const dataSources=this.state.customerArr || [];
        const options = dataSources.map((group,index) =>
            <Select.Option key={index} value={group.name}>{group.name}</Select.Option>
        )
        return (
            <div>
                    <h2
                        style={{
                            textAlign: "center",
                            paddingBottom: 10,
                            marginBottom: 10,
                        }}
                    >
                        {this.props.userDetaile?'修改系统账户':'同步系统账户'}
                    </h2>
                    <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">
                        <Spin spinning={this.state.loading}>
                            <div className="clearfix">
                                <FormItem
                                    labelCol={{ span: 4 }}
                                    wrapperCo={{ span: 14 }}
                                    label="用户角色"
                                >
                                    <Select
                                        mode="tags"
                                        tokenSeparators={[',']}
                                        placeholder="选择用户角色"
                                        value={this.state.role}
                                        style={{width:'200px'}}
                                        onChange={(e)=>{
                                            this.setState({
                                                role:e
                                            })
                                        }} >
                                        {
                                            this.state.roleArr.map(function (item) {
                                                return <Select.Option key={item.id} >{item.roleName}</Select.Option>
                                            })
                                        }
                                    </Select>
                                    <span className="mandatory">*</span>
                                    <span style={{color:'red',padding:'0 15px'}}>存在多个角色</span>
                                    {this.props.userDetaile?
                                        <Popconfirm
                                            title={"用户 [ " + this.props.name + " ] 的密码将会重置为123456，确认操作？"}
                                            onConfirm={this.resetPwd}
                                            okText="确认"
                                            cancelText="取消"
                                            placement="topLeft">
                                            <Button>重置密码</Button>
                                        </Popconfirm>:''}
                                </FormItem>
                                {this.props.userDetaile?<FormItem className="half-item"
                                                                  {...formItemLayout}
                                                                  label="用户状态" >
                                    <Select placeholder="用户状态" value={this.state.status} style={{width:'200px'}}
                                            onChange={(e)=>{this.setState({status:e})}} >
                                        <Select.Option value="正常" >正常</Select.Option>
                                        <Select.Option value="注销" >注销</Select.Option>
                                        <Select.Option value="锁定" >锁定</Select.Option>
                                    </Select>
                                    <span className="mandatory">*</span>
                                </FormItem>:''}
                                <FormItem className="half-item"
                                          {...formItemLayout}
                                          label="用户名" >
                                    <Input placeholder="请输入用户名" style={{width:'200px'}} value={this.state.mobile}
                                           onChange={(e)=>{this.setState({mobile:e.target.value})}} required="required"/>
                                    <span className="mandatory">*</span>
                                </FormItem>
                                <FormItem className="half-item"
                                          {...formItemLayout}
                                          label="联系方式" >
                                    <Input placeholder="请输入手机号" style={{width:'200px'}} value={this.state.contactMobile}
                                           onChange={(e)=>{this.setState({contactMobile:e.target.value})}} />
                                </FormItem>
                                {window.adminData.isSuperAdmin?<FormItem className="half-item"
                                                                         {...formItemLayout}
                                                                         label="组织部门" >
                                    <Select placeholder="选择组织部门"
                                            style={{ width: 200 }}
                                            value={this.state.departmentId}
                                            onChange={(e) => { this.setState({ departmentId: e }) }}>
                                        {
                                            this.state.departmentArr.map(function (item) {
                                                return <Select.Option key={item.id} >{item.name}</Select.Option>
                                            })
                                        }
                                    </Select>
                                    <span className="mandatory">*</span>
                                </FormItem>:''}
                                <FormItem className="half-item"
                                          {...formItemLayout}
                                          label="职务"
                                >
                                    <Select placeholder="选择职务" style={{width:'200px'}} value={this.state.duty} onChange={(e)=>{this.setState({duty:e})}}>
                                        {
                                            post.map(function (item) {
                                                return <Select.Option key={item.value} >{item.key}</Select.Option>
                                            })
                                        }
                                    </Select>
                                </FormItem>
                                <FormItem className="half-item"
                                          {...formItemLayout}
                                          label="岗位"
                                >
                                    <Select placeholder="选择岗位" style={{width:'200px'}} value={this.state.position} onChange={(e)=>{this.setState({position:e})}}>
                                        {
                                            station.map(function (item) {
                                                return <Select.Option key={item.value} >{item.key}</Select.Option>
                                            })
                                        }
                                    </Select>
                                </FormItem>
                                <FormItem className="half-item"
                                          {...formItemLayout}
                                          label="电子邮箱" >
                                    <Input placeholder="请输入邮箱" style={{width:'200px'}} value={this.state.email}
                                           onChange={(e)=>{this.setState({email:e.target.value})}} />
                                </FormItem>
                                <FormItem className="half-item"
                                          {...formItemLayout}
                                          label="上级主管"
                                >
                                    <AutoComplete
                                        className="certain-category-search"
                                        dropdownClassName="certain-category-search-dropdown"
                                        dropdownMatchSelectWidth={false}
                                        dropdownStyle={{ width: 200 }}
                                        size="large"
                                        style={{ width: '200px' }}
                                        dataSource={options}
                                        placeholder="输入名称"
                                        value={this.state.superior}
                                        onChange={this.httpChange}
                                        filterOption={true}
                                        onBlur={this.blurChange}
                                        onSelect={this.selectAuto}
                                    >
                                        <Input/>
                                    </AutoComplete>
                                    <span className="mandatory">*</span>
                                </FormItem>
                                {this.props.userDetaile?
                                    <FormItem className="half-item"
                                              {...formItemLayout}
                                              label="用户编号" >
                                        <span>{this.state.userNo}</span>
                                    </FormItem>
                                    :''}
                                <div className='clearfix'>
                                    <FormItem className="half-item"
                                              {...formItemLayout}
                                              label="地区" >
                                        <Select
                                            multiple
                                            style={{width:'500px'}}
                                            placeholder="选择地区"
                                            filterOption={(input, option) => { return option.props.children.indexOf(input) >= 0 }}
                                            value={this.state.district}
                                            onChange={(pids) => {
                                                this.state.district = pids;
                                                this.setState({
                                                    district: this.state.district
                                                })
                                            }}
                                        >
                                            {this.state.cityOption}
                                        </Select>
                                    </FormItem>
                                </div>
                                <div className="clearfix pictures">
                                    <FormItem
                                        labelCol={{ span: 4 }}
                                        wrapperCol={{ span: 18 }}
                                        label="用户头像" >
                                        <PicturesWall
                                            domId={'newUser1'}
                                            pictureSign="customer_sys_file"
                                            fileList={this.getOrgCodeUrl}
                                            pictureUrl={this.state.orgCodeUrl} />
                                        <p>图片建议：要清晰。</p>
                                    </FormItem>
                                </div>
                            </div>
                            <FormItem wrapperCol={{ span: 12, offset: 4 }} style={{
                                paddingTop: '16px',
                                paddingLeft: '140px',
                            }}>
                                <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
                            </FormItem>
                        </Spin>
                    </Form>
            </div>
        );
    }
}

export default UserProcessing;
