import React, { useEffect, useMemo, useState } from "react";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import dayjs from "dayjs";
import {
  Button,
  Empty,
  Form,
  Input,
  message,
  Steps,
  Flex,
  Row,
  Col,
  Select,
  InputNumber,
  DatePicker,
  Space,
} from "antd";
import { NS_REGISTER } from "~/enumerate/namespace";
import AttachmentUpload from "~/components/AttachmentUpload";
import { resolveRegisterQueryParams } from "~/utils/resolveRegisterQueryParams";
import { safeApiCall } from "~/utils/handleApiResponse";

import headerImage from "~/enumerate/img/header.png";
import auditLookImage from "~/enumerate/img/auditLook.png";
import auditBkImage from "~/enumerate/img/audit.png";
import successIcon from "~/enumerate/img/successIcon.png";
import {
  creditCodeRule,
  latitudeRule,
  longitudeRule,
  nonNegativeIntegerRule,
  phoneRule,
  positiveNumberRule,
  urlRule,
} from "~/utils/validators";
import {
  QUALIFICATION_INDUSTRY_OPTIONS,
  ENTERPRISE_SCALE_OPTIONS,
  ENTERPRISE_STATUS_OPTIONS,
  FILING_RECORD_STATUS_OPTIONS,
  FILING_TYPE_OPTIONS,
} from "~/enumerate/enterpriseOptions";
import "./index.less";

const RegisterMore = (props) => {
  const queryParams = useMemo(() => resolveRegisterQueryParams(), []);
  const { orgInfoSave, register, syncUserToGBS } = props;
  const [current, setCurrent] = useState(0);
  const [form] = Form.useForm();
  const { registerLoading, syncUserToGBSLoading } = register;
  const hasRegisterContext = Boolean(queryParams.account && queryParams.registerUserId);

  const handleSave = async (type) => {
    if (!hasRegisterContext) {
      message.error("缺少注册信息，请从注册页重新进入");
      return;
    }

    const formValues = await form.validateFields();
    const values = {
      ...formValues,
      registerUserId: queryParams.registerUserId,
      productionDate: formValues.productionDate
        ? dayjs(formValues.productionDate).format("YYYY-MM-DD")
        : undefined,
      attachmentUrls: formValues.attachmentUrls
        ? JSON.stringify(formValues.attachmentUrls)
        : null,
      authStatusCode: type === "draft" ? 0 : 1,
      authStatusName: type === "draft" ? "草稿" : "已提交",
    };
    await safeApiCall(
      () => orgInfoSave(values),
      {
        defaultError: "机构信息保存失败，请稍后重试",
        onSuccess: async () => {
          await safeApiCall(
            () => syncUserToGBS({
              account: queryParams.account,
              registerUserId: queryParams.registerUserId,
            }),
            {
              defaultError: "用户信息同步失败，请稍后重试",
              onSuccess: () => {
                message.success("保存成功");
                setCurrent(1);
              },
            },
          );
        },
      },
    );
  };

  useEffect(() => {
    if (current === 1) {
      window.setTimeout(() => {
        setCurrent(2);
      }, 3000);
    }
  }, [current]);

  return (
    <div className="register-more">
      <div className="register-more-header">
        <img
          src={headerImage}
          alt=""
          style={{ width: "100%", height: "100%" }}
        />
        <div className="register-more-header-content">
          <div className="register-more-header-title">认证信息</div>
        </div>
      </div>
      <div className="register-more-content">
        <Flex justify="center">
          <Steps
            style={{
              width: "600px",
              marginBottom: "20px",
            }}
            current={current}
            //onChange={setCurrent}
            items={[
              {
                title: "填写信息",
              },
              {
                title: "认证审核中",
              },
              {
                title: "认证通过",
              },
            ]}
          />
        </Flex>
        {current === 0 && (
          <div>
            {!hasRegisterContext && (
              <Empty
                description="缺少注册信息，请从注册页重新进入"
                style={{ marginBottom: 24 }}
              />
            )}
            <Form form={form} labelCol={{ span: 10 }} disabled={!hasRegisterContext}>
              <Row gutter={[16, 16]}>
                <Col span={12}>
                  <Form.Item
                    name="unitName"
                    label="生产经营单位名称"
                    rules={[
                      { required: true, message: "请输入生产经营单位名称" },
                    ]}
                  >
                    <Input placeholder="请输入生产经营单位名称" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="creditCode"
                    label="统一社会信用代码"
                    rules={[creditCodeRule(true)]}
                  >
                    <Input placeholder="请输入统一社会信用代码" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="safetyIndustryCategoryName"
                    label="安全生产监管行业类别"
                    rules={[
                      { required: true, message: "请输入安全生产监管行业类别" },
                    ]}
                  >
                    <Input
                      placeholder="请输入安全生产监管行业类别"
                      allowClear
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="districtName"
                    label="属地"
                    rules={[{ required: true, message: "请选择属地" }]}
                  >
                    <Select
                      options={QUALIFICATION_INDUSTRY_OPTIONS}
                      placeholder="请选择属地"
                      allowClear
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="townStreet"
                    label="所属镇、街道"
                    rules={[{ required: true, message: "请输入所属镇街道" }]}
                  >
                    <Input placeholder="请输入所属镇街道" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="villageCommunity" label="属村（社区）">
                    <Input placeholder="请输入属村（社区）" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="longitude"
                    label="所在地坐标经度"
                    rules={[longitudeRule(false)]}
                  >
                    <InputNumber
                      style={{ width: "100%" }}
                      min={-180}
                      max={180}
                      precision={6}
                      placeholder="请输入经度"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="latitude"
                    label="所在地坐标纬度"
                    rules={[latitudeRule(false)]}
                  >
                    <InputNumber
                      style={{ width: "100%" }}
                      min={-90}
                      max={90}
                      precision={6}
                      placeholder="请输入纬度"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="registerAddress"
                    label="注册地址"
                    rules={[{ required: true, message: "请输入注册地址" }]}
                  >
                    <Input.TextArea rows={3} placeholder="请输入注册地址" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="businessAddress"
                    label="经营地址"
                    rules={[{ required: true, message: "请输入经营地址" }]}
                  >
                    <Input.TextArea rows={3} placeholder="请输入经营地址" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="ownershipTypeName" label="归属类型">
                    <Input placeholder="请输入归属类型" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="economyIndustryCode"
                    label="国民经济行业分类(GB/T4754-2017)"
                  >
                    <Input placeholder="请输入国民经济行业分类" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="legalRepresentative"
                    label="法定代表人"
                    rules={[{ required: true, message: "请输入法定代表人" }]}
                  >
                    <Input placeholder="请输入法定代表人" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="legalRepresentativePhone"
                    label="法定代表人联系电话"
                    rules={[phoneRule("法定代表人联系电话", false)]}
                  >
                    <Input placeholder="请输入法定代表人联系电话" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="principalName"
                    label="主要负责人"
                    rules={[{ required: true, message: "请输入主要负责人" }]}
                  >
                    <Input placeholder="请输入主要负责人" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="principalPhone"
                    label="主要负责人联系电话"
                    rules={[phoneRule("主要负责人联系电话", true)]}
                  >
                    <Input placeholder="请输入主要负责人联系电话" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="safetyDeptManager"
                    label="安全管理部门负责人"
                  >
                    <Input placeholder="请输入安全管理部门负责人" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="safetyDeptManagerPhone"
                    label="安全管理部门负责人联系电话"
                    rules={[phoneRule("安全管理部门负责人联系电话", false)]}
                  >
                    <Input
                      placeholder="请输入安全管理部门负责人联系电话"
                      allowClear
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="safetyDeputyManager" label="主管安全副总">
                    <Input placeholder="请输入主管安全副总" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="safetyDeputyPhone"
                    label="主管安全副总联系电话"
                    rules={[phoneRule("主管安全副总联系电话", false)]}
                  >
                    <Input
                      placeholder="请输入主管安全副总联系电话"
                      allowClear
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="productionDate" label="投产日期">
                    <DatePicker
                      style={{ width: "100%" }}
                      placeholder="请选择投产日期"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="businessStatusName" label="企业经营状态">
                    <Input placeholder="请输入企业经营状态" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="infoDisclosureUrl"
                    label="信息公开网址"
                    rules={[urlRule("信息公开网址", false)]}
                  >
                    <Input placeholder="请输入信息公开网址" allowClear />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="workplaceArea"
                    label="工作场所建筑面积"
                    rules={[positiveNumberRule("工作场所建筑面积", false)]}
                  >
                    <InputNumber
                      style={{ width: "100%" }}
                      min={0}
                      precision={2}
                      placeholder="请输入工作场所建筑面积"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="archiveRoomArea"
                    label="档案室面积"
                    rules={[positiveNumberRule("档案室面积", false)]}
                  >
                    <InputNumber
                      style={{ width: "100%" }}
                      min={0}
                      precision={2}
                      placeholder="请输入档案室面积"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="fulltimeEvaluatorCount"
                    label="专职安全评价师数量"
                    rules={[
                      nonNegativeIntegerRule("专职安全评价师数量", false),
                    ]}
                  >
                    <InputNumber
                      style={{ width: "100%" }}
                      min={0}
                      precision={0}
                      placeholder="请输入专职安全评价师数量"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="registeredEngineerCount"
                    label="注册安全工程师数量"
                    rules={[
                      nonNegativeIntegerRule("注册安全工程师数量", false),
                    ]}
                  >
                    <InputNumber
                      style={{ width: "100%" }}
                      min={0}
                      precision={0}
                      placeholder="请输入注册安全工程师数量"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="enterpriseStatusName" label="企业状态">
                    <Select
                      options={ENTERPRISE_STATUS_OPTIONS}
                      placeholder="请选择企业状态"
                      allowClear
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="enterpriseScaleName" label="企业规模">
                    <Select
                      options={ENTERPRISE_SCALE_OPTIONS}
                      placeholder="请选择企业规模"
                      allowClear
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="filingTypeName" label="备案类型">
                    <Select
                      options={FILING_TYPE_OPTIONS}
                      placeholder="请选择备案类型"
                      allowClear
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="filingRecordStatusName" label="备案状态">
                    <Select
                      options={FILING_RECORD_STATUS_OPTIONS}
                      placeholder="请选择备案状态"
                      allowClear
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <AttachmentUpload name="attachmentUrls" label="上传附件" />
                </Col>
              </Row>
            </Form>
            <Flex justify="center">
              <Space size={16}>
                {/* <Button
                  loading={registerLoading || syncUserToGBSLoading}
                  onClick={() => handleSave("draft")}
                >
                  暂存
                </Button> */}

                <Button
                  loading={registerLoading || syncUserToGBSLoading}
                  type="primary"
                  disabled={!hasRegisterContext}
                  onClick={() => handleSave("submit")}
                >
                  提交
                </Button>
              </Space>
            </Flex>
          </div>
        )}
        {current === 1 && (
          <div>
            <Flex justify="center" vertical align="center">
              <div
                className="audit-look"
                style={{
                  backgroundImage: `url(${auditBkImage})`,
                }}
              >
                <img src={auditLookImage} className="audit-look-img" />
              </div>
              <div>认证审核中，请耐心等待···</div>
            </Flex>
          </div>
        )}
        {current === 2 && (
          <div>
            <Flex justify="center" vertical align="center">
              <img src={successIcon} />
              <div>审核通过</div>
            </Flex>
          </div>
        )}
      </div>
    </div>
  );
};

export default Connect([NS_REGISTER], true)(RegisterMore);