import { useState, useEffect } from "react";
import { ConfigProvider, Modal, Form, Input, Select, message, Button } 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 = [], successModalVisible } = props;

  const [form] = Form.useForm();

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

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

  const onFinish = ({ username, phonenumber, sCustomerId }) => {
    const url = `${commonConfig.feedback_host}sftlogininfo/insertPasswordUserName/add`;
    const params = {
      sUserName: username,
      sLanguage: "sChinese",
      sBrandsId: "1111111111",
      sSubsidiaryId: "1111111111",
      sPhone: phonenumber,
      sCustomerId,
    };
    commonServices.postValueService("", params, url).then(({ data: result = {} }) => {
      const { code = -1, msg = "接口出错" } = result;
      if (code > -1) {
        props.setState({
          successModalVisible: true,
          phonenumber,
        });
      } else {
        message.error(msg);
      }
    });
  };

  return (
    <ConfigProvider prefixCls="antdV5">
      <Modal
        title="用户注册"
        open={userRegisterMode && !successModalVisible}
        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="phonenumber"
            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>
      <Modal
        open={successModalVisible}
        title="注册成功"
        onCancel={handleCancel}
        footer={
          <Button type="primary" onClick={handleCancel}>
            确认
          </Button>
        }
        width={400}
      >
        <p style={{ fontWeight: "bold", fontSize: 16 }}>请等待【管理员审核】成功后用以下账号登陆！</p>
        <p>
          用户名: <span style={{ fontSize: 16 }}>{props.phonenumber}</span>
        </p>
        <p>
          密&nbsp;&nbsp;&nbsp;&nbsp;码: <span style={{ fontSize: 16 }}>{props.phonenumber}</span>
        </p>
      </Modal>
    </ConfigProvider>
  );
};

export default UserRegistration;