import { useState, useEffect } from "react";
import { ConfigProvider, Modal, Form, Input, Select, message } from "antd";
import commonConfig from "@/utils/config";
import * as commonServices from "@/services/services";

const UserRegistrationEvent = () => {
  const [state, setState0] = useState({});
  const setState = payload => {
    setState0({ ...state, ...payload });
  };

  // 初始化获取所属客户
  useEffect(() => {
    const url = `${commonConfig.feedback_host}sysworkorder/getCustomerData`;
    commonServices.postValueService("", {}, url).then(({ data: result = {} }) => {
      const { code = -1, data, msg = "接口出错" } = result;
      if (code > -1) {
        setState({ customerData: data });
      } else {
        message.error(msg);
      }
    });
  }, []);

  return {
    ...state,
    setState,
  };
};

const UserRegistration = ({ _this }) => {
  const { userRegisterMode } = _this.state;
  if (!userRegisterMode) return "";

  const props = UserRegistrationEvent();
  const { customerData = [] } = props;

  const [form] = Form.useForm();

  const handleCancel = () => {
    _this.setState({
      userRegisterMode: false,
    });
  };

  const handleOk = () => {
    form.submit();
  };

  const onFinish = values => {
    console.log("=====Success:", values);
  };

  return (
    <ConfigProvider prefixCls="antdV5">
      <Modal title="用户注册" open={userRegisterMode} okText="确认" cancelText="取消" onOk={handleOk} onCancel={handleCancel} width={400}>
        <Form
          name="basic"
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
          labelAlign="left"
        >
          <Form.Item label="用户名" name="username" rules={[{ required: true, message: "未填写用户名!" }]}>
            <Input />
          </Form.Item>

          <Form.Item
            label="手机号"
            name="telenumber"
            rules={[
              { required: true, message: "未填写手机号!" },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: "请输入有效的中国大陆手机号",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item label="公司名称" name="company" rules={[{ required: true, message: "未选择公司!" }]}>
            <Select
              fieldNames={{ label: "sCustomerName", value: "sCustomerId" }}
              options={customerData}
              showSearch
              filterOption={(inputValue, option) => option.sCustomerName?.includes(inputValue)}
            />
          </Form.Item>
        </Form>
      </Modal>
    </ConfigProvider>
  );
};

export default UserRegistration;