import React,{Component} from "react";
import {Button, Cascader, DatePicker, Form, Input, message, Modal, Radio, Select, Spin, Checkbox} from "antd";
import { areaSelect, Birthplace } from "@/areaList";
import { getProvinceList } from "@/addressList";
import moment from "moment";
import $ from "jquery/src/ajax";
import UserProcessing from './userProcessing';

const FormItem = Form.Item;

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
};

class UserProfile extends Component{
    constructor(props) {
        super(props);
        this.state={
            loading: false,
            doorId:'',
            employeeId:'',
            name:'',
            establish: props.aid ? true : false,
            aid:props.aid,
        }
        this.verifyDoor = this.verifyDoor.bind(this);
        this.verifyId = this.verifyId.bind(this);
        this.addOk = this.addOk.bind(this);
        this.editOk = this.editOk.bind(this);
        this.editPeo = this.editPeo.bind(this);
    }

    componentDidMount() {
        let areaArr = getProvinceList();
        let Area = areaSelect(areaArr);
        let Birthplaces = Birthplace(areaArr);
        this.setState({
            Area,
            Birthplaces: Birthplaces,
        });
        if(this.props.ModalData && !this.state.isAddPeo){
            this.editPeo();
        }
    }

    verifyDoor() {
        this.setState({
            loading: true,
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/personnel/checkDoorId",
            data: {
                doorId: this.state.doorId,
                id: this.props.id,
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success("此编号未被占用");
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    }

    verifyId() {
        this.setState({
            loading: true,
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/personnel/checkEmployeeId",
            data: {
                employeeId: this.state.employeeId,
                id: this.props.id
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success("此编号未被占用");
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    }

    inspect(fn) {
        if(!this.state.name){
            message.warning('请输入姓名');
            return;
        }
        if(!this.state.employeeId){
            message.warning('请输入员工编号');
            return;
        }
        if(!this.state.doorId){
            message.warning('请输入门禁编号');
            return;
        }
        if(isNaN(parseInt(this.state.sex))){
            message.warning('请选择性别');
            return;
        }
        if(!this.state.nation){
            message.warning('请输入民族');
            return;
        }
        if(!(this.state.residence) || this.state.residence.length === 0){
            message.warning('请选择户籍地址');
            return;
        }
        if((!this.state.nativePlace) || this.state.nativePlace.length === 0){
            message.warning('请选择籍贯');
            return;
        }
        if((!this.state.now) || this.state.now.length === 0){
            message.warning('请选择现住地址');
            return;
        }
        fn();
    }

    addOk(aid) {
        this.setState({
            loading: true,
            aid,
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/personnel/add",
            data: {
                name: this.state.name,
                doorId: this.state.doorId,
                aid,
                sex: this.state.sex,
                nation: this.state.nation,
                residenceProvince: this.state.residence[0],
                residenceCity: this.state.residence[1],
                residenceArea: this.state.residence[2],
                residenceAddress: this.state.residenceAddress,
                nativePlaceProvince: this.state.nativePlace[0],
                nativePlaceCity: this.state.nativePlace[1],
                nowProvince: this.state.now[0],
                nowCity: this.state.now[1],
                nowArea: this.state.now[2],
                nowAddress: this.state.nowAddress,
                idCard: this.state.idCard,
                certificationAuthority: this.state.certificationAuthority,
                marriage: this.state.marriage,
                politicalOutlook: this.state.politicalOutlook,
                son: this.state.son,
                girl: this.state.girl,
                birthdays: this.state.birthdays,
                employeeId: this.state.employeeId,
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success("添加成功！");
                    this.props.setNowAid(aid);
                    this.props.onCancel();
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    }

    editOk(aid) {
        this.setState({
            loading: true,
            aid,
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/personnel/update",
            data: {
                aid,
                id: this.props.id,
                name: this.state.name,
                doorId: this.state.doorId,
                sex: this.state.sex,
                nation: this.state.nation,
                residenceProvince: this.state.residence[0],
                residenceCity: this.state.residence[1],
                residenceArea: this.state.residence[2],
                residenceAddress: this.state.residenceAddress,
                nativePlaceProvince: this.state.nativePlace[0],
                nativePlaceCity: this.state.nativePlace[1],
                nowProvince: this.state.now[0],
                nowCity: this.state.now[1],
                nowArea: this.state.now[2],
                nowAddress: this.state.nowAddress,
                idCard: this.state.idCard,
                certificationAuthority: this.state.certificationAuthority,
                marriage: this.state.marriage,
                politicalOutlook: this.state.politicalOutlook,
                son: this.state.son,
                girl: this.state.girl,
                birthdays: this.state.birthdays,
                employeeId: this.state.employeeId,
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success("修改成功！");
                    this.props.setNowAid(aid);
                    this.props.onCancel();
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    }

    editPeo() {
        let residence = [];
        residence[0] = this.props.ModalData.residenceProvince;
        residence[1] = this.props.ModalData.residenceCity;
        residence[2] = this.props.ModalData.residenceArea;
        let nativePlace = [];
        nativePlace[0] = this.props.ModalData.nativePlaceProvince;
        nativePlace[1] = this.props.ModalData.nativePlaceCity;
        let now = [];
        now[0] = this.props.ModalData.nowProvince;
        now[1] = this.props.ModalData.nowCity;
        now[2] = this.props.ModalData.nowArea;
        this.setState({
            id: this.props.ModalData.id,
            doorId: this.props.ModalData.doorId,
            name: this.props.ModalData.name,
            birthdays: this.props.ModalData.birthdays,
            sex: this.props.ModalData.sex,
            nation: this.props.ModalData.nation,
            residence: residence ? residence : [],
            residenceAddress: this.props.ModalData.residenceAddress,
            now: now ? now : [],
            nowAddress: this.props.ModalData.nowAddress,
            nativePlace: nativePlace ? nativePlace : [],
            idCard: this.props.ModalData.idCard,
            certificationAuthority: this.props.ModalData.certificationAuthority,
            marriage: this.props.ModalData.marriage,
            son: this.props.ModalData.son,
            girl: this.props.ModalData.girl,
            politicalOutlook: this.props.ModalData.politicalOutlook || this.props.ModalData.politicalOutlook == 0
                ? this.props.ModalData.politicalOutlook
                : undefined,
            employeeId: this.props.ModalData.employeeId,
        });
    }

    render() {
        return (
            <Modal
                maskClosable={false}
                visible={this.props.visible}
                footer={null}
                width={800}
                style={{ position: "relative", zIndex: 9999 }}
                onCancel={this.props.onCancel}
            >
                <Spin spinning={this.state.loading}>
                    <h2
                        style={{
                            textAlign: "center",
                            paddingBottom: 10,
                            marginBottom: 10,
                        }}
                    >
                        {this.props.isAddPeo ? "新增人事档案" : "修改人事档案"}
                    </h2>
                    <div className="clearfix">
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="员工编号"
                        >
                            <Input
                                placeholder="请输入员工编号"
                                style={{ width: 200 }}
                                value={this.state.employeeId}
                                onChange={(e) => {
                                    this.setState({
                                        employeeId: e.target.value,
                                    });
                                }}
                            />
                            <Button
                                disabled={!(this.state.employeeId || this.state.employeeId == 0)}
                                style={{ position: "absolute" }}
                                type={"primary"}
                                onClick={this.verifyId}
                            >
                                验证重复
                            </Button>
                        </FormItem>
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="门禁编号"
                        >
                            <Input
                                style={{ width: 200 }}
                                placeholder="请输入门禁编号"
                                value={this.state.doorId}
                                onChange={(e) => {
                                    this.setState({
                                        doorId: e.target.value,
                                    });
                                }}
                            />
                            <Button
                                disabled={!(this.state.doorId || this.state.doorId == 0)}
                                style={{ position: "absolute" }}
                                type={"primary"}
                                onClick={this.verifyDoor}
                            >
                                验证重复
                            </Button>
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <FormItem className="half-item" {...formItemLayout} label="姓名">
                            <Input
                                placeholder="请输入姓名"
                                style={{ width: 200 }}
                                value={this.state.name}
                                onChange={(e) => {
                                    this.setState({
                                        name: e.target.value,
                                    });
                                }}
                            />
                        </FormItem>
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="出生日期"
                        >
                            <DatePicker
                                value={
                                    this.state.birthdays ? moment(this.state.birthdays) : null
                                }
                                onChange={(e, t) => {
                                    this.setState({
                                        birthdays: t,
                                    });
                                }}
                            />
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <FormItem className="half-item" {...formItemLayout} label="性别">
                            <Radio.Group
                                onChange={(e) => {
                                    this.setState({ sex: e.target.value });
                                }}
                                value={this.state.sex}
                            >
                                <Radio value={0}>男</Radio>
                                <Radio value={1}>女</Radio>
                            </Radio.Group>
                        </FormItem>
                        <FormItem className="half-item" {...formItemLayout} label="民族">
                            <Input
                                placeholder="输入民族（例：汉族）"
                                style={{ width: 200 }}
                                value={this.state.nation}
                                onChange={(e) => {
                                    this.setState({
                                        nation: e.target.value,
                                    });
                                }}
                            />
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="户籍地址"
                        >
                            <Cascader
                                options={this.state.Area}
                                value={this.state.residence}
                                placeholder="选择城市"
                                style={{ width: "200px" }}
                                onChange={(e, pre) => {
                                    this.setState({ residence: e });
                                }}
                            />
                        </FormItem>
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="户籍街道地址"
                        >
                            <Input
                                placeholder="输入街道地址"
                                style={{ width: 200 }}
                                value={this.state.residenceAddress}
                                onChange={(e) => {
                                    this.setState({
                                        residenceAddress: e.target.value,
                                    });
                                }}
                            />
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="现住地址"
                        >
                            <Cascader
                                options={this.state.Area}
                                value={this.state.now}
                                placeholder="选择城市"
                                style={{ width: "200px" }}
                                onChange={(e, pre) => {
                                    this.setState({ now: e });
                                }}
                            />
                        </FormItem>
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="现住街道地址"
                        >
                            <Input
                                placeholder="输入街道地址"
                                style={{ width: 200 }}
                                value={this.state.nowAddress}
                                onChange={(e) => {
                                    this.setState({
                                        nowAddress: e.target.value,
                                    });
                                }}
                            />
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <FormItem className="half-item" {...formItemLayout} label="籍贯">
                            <Cascader
                                options={this.state.Birthplaces}
                                value={this.state.nativePlace}
                                placeholder="选择籍贯"
                                style={{ width: "200px" }}
                                onChange={(e, pre) => {
                                    this.setState({ nativePlace: e });
                                }}
                            />
                        </FormItem>
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="身份证"
                        >
                            <Input
                                placeholder="输入身份证信息"
                                style={{ width: 200 }}
                                value={this.state.idCard}
                                onChange={(e) => {
                                    this.setState({
                                        idCard: e.target.value,
                                    });
                                }}
                            />
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="身份证领证机关"
                        >
                            <Input
                                placeholder="输入机关名称"
                                style={{ width: 200 }}
                                value={this.state.certificationAuthority}
                                onChange={(e) => {
                                    // let reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                                    this.setState({
                                        certificationAuthority: e.target.value,
                                    });
                                }}
                            />
                            {/* <span style={{ color: "red", marginLeft: "15px" }}>*</span> */}
                        </FormItem>
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="婚姻状态"
                        >
                            <Radio.Group
                                onChange={(e) => {
                                    this.setState({ marriage: e.target.value });
                                }}
                                value={this.state.marriage}
                            >
                                <Radio value={0}>未婚</Radio>
                                <Radio value={1}>已婚</Radio>
                                <Radio value={2}>离异</Radio>
                            </Radio.Group>
                        </FormItem>
                    </div>
                    <div className="clearfix">
                        <FormItem
                            className="half-item"
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 30 }}
                            label="子女数量"
                        >
                            <span>儿子：</span>
                            <Input
                                placeholder="输入数量"
                                style={{ width: 80 }}
                                type={"number"}
                                value={this.state.son}
                                onChange={(e) => {
                                    this.setState({
                                        son: e.target.value,
                                    });
                                }}
                            />
                            <span style={{ marginLeft: 10 }}>女儿：</span>
                            <Input
                                placeholder="输入数量"
                                style={{ width: 80 }}
                                type={"number"}
                                value={this.state.girl}
                                onChange={(e) => {
                                    this.setState({
                                        girl: e.target.value,
                                    });
                                }}
                            />
                        </FormItem>
                        <FormItem
                            className="half-item"
                            {...formItemLayout}
                            label="政治面貌"
                        >
                            <Select
                                placeholder="请选择政治面貌"
                                style={{ width: 200 }}
                                onChange={(e) => {
                                    this.setState({ politicalOutlook: e });
                                }}
                                value={this.state.politicalOutlook}
                            >
                                <Select.Option value={0}>群众</Select.Option>
                                <Select.Option value={1}>中共预备党员</Select.Option>
                                <Select.Option value={2}>中共党员</Select.Option>
                                <Select.Option value={3}>致公党党员</Select.Option>
                            </Select>
                        </FormItem>
                    </div>
                    <Checkbox
                        style={{
                            paddingLeft: '34px',
                            paddingTop: '10px',
                        }}
                        checked={this.state.establish}
                        onChange={
                            (e) => {
                              this.setState({
                                  establish: e.target.checked
                            });
                        }}>
                        是否同步创建系统账户
                    </Checkbox>
                    {!this.state.establish  ? <Button
                        type="primary"
                        shape="round"
                        size="large"
                        style={{
                            position: "relative",
                            left: "24%",
                            top: '10px',
                            transform: "translateX(-50%)",
                        }}
                        onClick={this.props.isAddPeo ? ()=>{this.inspect(this.addOk)} : ()=>{this.inspect(this.editOk)}}
                    >
                        保存
                    </Button> : null}
                    {this.state.establish ? <div>
                        <div>----------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
                        <UserProcessing
                            userDetaile={this.state.aid ? true : false}
                            name={this.state.name}
                            aid={this.state.aid}
                            inspect={(v)=>{this.inspect(v)}}
                            onPreservation={(aid)=>{
                                if(this.props.isAddPeo){
                                    this.addOk(aid);
                                }else{
                                    this.editOk(aid);
                                }
                            }}
                        />
                    </div> : null}
                </Spin>
            </Modal>
        )
    }
}

export default UserProfile;
