import React, {useState} from 'react';
import { Modal, Form, Input, Row, Col, DatePicker, Radio, message, Select } from 'antd';
import moment from 'moment';
import config from "../../../config/config";

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;

const UserModal = (props) => {

  const { userModalVisible, userInfoData, operateType, onSave, updateUser, onCancel } = props;
  const [form] = Form.useForm();
  const { getFieldsValue, validateFields, setFieldsValue, resetFields } = form;

  const [email, setEmail] = useState(null);
  const [emailSuffix, setEmailSuffix] = useState("@126.com");
  const [confirmPassword, setConfirmPassword] = useState(null);

  const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const singleFormItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
  };

  const onOk = () => {
    validateFields().then(values => {
      if (values.password != confirmPassword) {
        message.warning("两次输入的密码不一致！");
        return;
      }
      values.email = email + emailSuffix;
      operateType == "add" ? onSave(values) : updateUser(values);
    }).catch(error => {
      const errors = error.errorFields;
      for (let i = 0; i < errors.length; i++) {
        console.log(errors[i].name[0] + " ===>>> " + errors[i].errors[0]);
      }
    });
  };

  const userSexOptions = config.USER_SEX.map(item => <Radio key={item.name} value={item.name}>{item.name}</Radio>);

  const selectAfter = (
    <Select defaultValue="@126.com" className="select-after" onChange={value => setEmailSuffix(value)}>
      <Option value="@126.com">@126.com</Option>
      <Option value="@163.com">@163.com</Option>
      <Option value="@qq.com">@qq.com</Option>
      <Option value="@foxmail.com">@foxmail.com</Option>
      <Option value="@sina.com">@sina.com</Option>
      <Option value="@139.com">@139.com</Option>
    </Select>
  );

  return (
    <div>
      <Modal
        centered={true}
        visible={userModalVisible}
        title={operateType == "add" ? "新增" : "修改"}
        okText="保存"
        onCancel={onCancel}
        onOk={onOk}
        width={700}
        destroyOnClose={true}
        bodyStyle={{height: "325px"}}
      >
        <Form initialValues={userInfoData} form={form} style={{marginLeft: "-45px"}}>
          <Row>
            <Col span={0}>
              <FormItem label="用户ID" name={"id"}>
                <Input />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem { ...formItemLayout } label="用户名" name={"userName"} rules={[{required: true, message: '请输入用户名'}]}>
                <Input placeholder={"请输入用户名"} disabled={operateType == "edit" ? "disabled" : false}/>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem { ...formItemLayout } label="性别" name={"sex"} rules={[{required: true, message: '请输入密码'}]}>
                <RadioGroup>
                  {userSexOptions}
                </RadioGroup>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem { ...formItemLayout } label="密码" name={"password"} rules={[{required: true, message: '请输入密码'}]}>
                <Input placeholder={"请输入密码"} />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem { ...formItemLayout } label="确认密码" rules={[{required: true, message: '请输入密码'}]}>
                <Input placeholder={"请输入密码"} value={confirmPassword ? confirmPassword : (userInfoData && userInfoData.password ? userInfoData.password : null)} onChange={e => setConfirmPassword(e.target.value)}/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <FormItem { ...formItemLayout } label="电话号码" name={"phoneNumber"} rules={[{required: true, message: '请输入电话号码'}]}>
                <Input placeholder={"请输入电话号码"} />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem { ...formItemLayout } label="邮箱" rules={[{required: true, message: '请输入邮箱'}]}>
                <Input placeholder={"请输入邮箱"} addonAfter={selectAfter} onChange={e => setEmail(e.target.value)}
                       value={email ? email : (userInfoData && userInfoData.email ? userInfoData.email.substr(0, userInfoData.email.indexOf("@")) : null)}/>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <FormItem { ...singleFormItemLayout } label="个人简介" name={"resume"} rules={[{required: false}]}>
                <Input.TextArea showCount maxLength={500} placeholder={"请输入个人简介，最长500个字"} />
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <FormItem { ...singleFormItemLayout } label="个性标签" name={"individual"} rules={[{required: false}]}>
                <Select mode="tags" placeholder="请输入个性标签，最长100个字" style={{ width: '100%' }} />
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
  );
};

export default UserModal;
