import React, { useState, useEffect } from "react";
import { useRequest, Link, history } from "umi";
import InitForm from "@/components/InitForm";
import defaultFields from "./fields";
import { message, Tabs, Button, Input, Empty, Form } from "antd";
import { doFetch } from "@/utils/doFetch";
import styles from "./index.less";
const { TabPane } = Tabs,
  { Search } = Input;
const Logon = (props) => {
  const { run, loading } = useRequest(doFetch, {
      manual: true,
      formatResult: (res) => res,
      onSuccess: (result, params) => {
        if (result.code == "0000") {
          message.success("已提交注册信息，请等待审核...");
          // history.push("/user/login")
          ct("2");
        }
      },
    }),
    [tabKey, ct] = useState("1"),
    [fields, cf] = useState(),
    [tel, ctel] = useState(""),
    [userDetails, cu] = useState(),
    [formRef] = Form.useForm();

  useEffect(() => {
    if (tabKey == "1") {
      for (let i in defaultFields) {
        defaultFields[i].value = i.indexOf("List") > -1 ? [] : null;
        defaultFields[i].disabled = false;
        formRef.setFieldsValue({ [i]: i.indexOf("List") > -1 ? [] : null });
      }
      cf({ ...defaultFields });
    } else {
      cu();
      ctel("");
    }
  }, [tabKey]);
  function saveData(values) {
    let newfields = JSON.parse(JSON.stringify(values));
    run({
      url: "/ngic-auth/sysAccountApply/saveForRegister",
      params: { ...newfields },
    });
  }
  return (
    <div className={styles.main}>
      <div>
        <img src="./logo.svg" alt="" style={{ width: 44, marginBottom: 30 }} />
        


      </div>
      <div className={`${styles.body} logon`}>
        <Tabs
          tabBarExtraContent={<Link to="/user/login">立即登录</Link>}
          activeKey={tabKey}
          onChange={(key) => {
            ct(key);
          }}
        >
          <TabPane tab="立即注册" key="1">
            <InitForm
              style={{ marginTop: -20 }}
              fields={fields}
              submitData={(values) => {
                saveData(values);
              }}
              onChange={(changedValues, allValues) => {
                //联动操作
              }}
              submitting={loading}
              formRef={formRef}
            ></InitForm>
          </TabPane>
          <TabPane tab="申请进度" key="2">
            <div style={{ textAlign: "center" }}>
              <Search
                value={tel}
                onChange={(e) => {
                  ctel(e.target.value);
                }}
                placeholder="请输入手机号"
                allowClear
                onSearch={(value) => {
                  if (value) {
                    doFetch({
                      url: "/ngic-auth/sysAccountApply/queryByPhone",
                      params: { telephone: value.replace(/^\s+|\s+$/g, "") },
                    }).then((res) => {
                      if (res.code == "0000") {
                        let data = res?.data?.data;
                        if (data) {
                          let topFields = {
                            statusName: {
                              value: data.statusName,
                              type: "input",
                              title: "工单状态",
                              name: ["statusName"],
                              required: false,
                              disabled: true,
                            },
                            applyTime: {
                              value: data.applyTime,
                              type: "datepicker",
                              title: "申请时间",
                              name: ["applyTime"],
                              required: false,
                              disabled: true,
                              format: "YYYY-MM-DD HH:mm:ss",
                            },
                          };
                          for (let i in defaultFields) {
                            defaultFields[i].value = data[i];
                            defaultFields[i].disabled = true;
                          }
                          let applyFields = {
                            auditTime: {
                              value: data.auditTime,
                              type: "datepicker",
                              title: "审批时间",
                              name: ["auditTime"],
                              required: false,
                              disabled: true,
                            },
                            auditUserName: {
                              value: data.auditUserName,
                              type: "input",
                              title: "审批人",
                              name: ["auditUserName"],
                              required: false,
                              disabled: true,
                            },
                            auditResultName: {
                              value: data.auditResultName,
                              type: "input",
                              title: "审批结果",
                              name: ["auditResultName"],
                              required: false,
                              disabled: true,
                            },
                            auditOpinion: {
                              value: data.auditOpinion,
                              type: "textarea",
                              title: "审批意见",
                              name: ["auditOpinion"],
                              required: false,
                              col: { span: 24 },
                              disabled: true,
                            },
                          };
                          cf({
                            ...topFields,
                            ...defaultFields,
                            ...applyFields,
                          });
                        }
                        cu(data);
                      }
                    });
                  }
                }}
                style={{ width: 400, marginBottom: 15 }}
              />
            </div>
            {tel && userDetails && (
              <InitForm
                fields={fields}
                submitData={(values) => {
                  saveData(values);
                }}
                onChange={(changedValues, allValues) => {
                  //联动操作
                }}
                submitting={loading}
                actions={(form, submitBtn) => {
                  return null;
                }}
              ></InitForm>
            )}
            {!userDetails && <Empty />}
          </TabPane>
        </Tabs>
      </div>
    </div>
  );
};
export default Logon;