import React, { useEffect, 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 { tools } from "@cqsjjb/jjb-common-lib";

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,
  nonNegativeIntegerRule,
  phoneRule,
  positiveNumberRule,
  urlRule,
  normalizeUrl,
} from "~/utils/validators";
import {
  CHONGQING_DISTRICTS,
  ECONOMY_INDUSTRY_OPTIONS,
  ENTERPRISE_SCALE_OPTIONS,
  ENTERPRISE_STATUS_OPTIONS,
  QUALIFICATION_INDUSTRY_OPTIONS,
  REGISTERED_ORG_FILING_TYPE_SEARCH_OPTIONS,
  REGISTERED_ORG_FILING_RECORD_STATUS_OPTIONS,
} from "~/enumerate/enterpriseOptions";
import BaiduMapPicker from "~/components/BaiduMapPicker";
import "./index.less";

const { router } = tools;

const RegisterMore = (props) => {
  const { orgInfoSave, register, syncUserToGBS } = props;
  const [current, setCurrent] = useState(0);
  const [mapPickerVisible, setMapPickerVisible] = useState(false);
  const [form] = Form.useForm();
  const { registerLoading, syncUserToGBSLoading } = register;
  const hasRegisterContext = Boolean(
    router.query?.account && router.query?.registerUserId,
  );

  const loadDetail = async () => {
    const res = await props.orgInfoGet({
      data: router.query?.account,
    });
    if (res?.data) {
      form.setFieldsValue({
        ...res.data,
        productionDate: res.data.productionDate
          ? dayjs(res.data.productionDate)
          : undefined,
        attachmentUrls: res.data.attachmentUrls
          ? JSON.parse(res.data.attachmentUrls)
          : null,
      });
    }
  };

  useEffect(() => {
    loadDetail();
  }, []);

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

    const formValues = await form.validateFields();
    const values = {
      ...formValues,
      registerUserId: router.query?.registerUserId,
      productionDate: formValues.productionDate
        ? dayjs(formValues.productionDate).format("YYYY-MM-DD")
        : undefined,
      attachmentUrls: formValues.attachmentUrls
        ? JSON.stringify(formValues.attachmentUrls)
        : null,
      infoDisclosureUrl: formValues.infoDisclosureUrl
        ? normalizeUrl(formValues.infoDisclosureUrl)
        : undefined,
      authStatusCode: type === "draft" ? 0 : 1,
      authStatusName: type === "draft" ? "草稿" : "已提交",
    };
    const res1 = await orgInfoSave(values);
    if (res1.success) {
      const res2 = await syncUserToGBS({
        account: router.query?.account,
        registerUserId: router.query?.registerUserId,
      });
      if (res2.success) {
        message.success("保存成功");
        setCurrent(1);
      }
    }
  };

  const handleMapConfirm = ({ lng, lat }) => {
    form.setFieldsValue({ longitude: lng, latitude: lat });
    setMapPickerVisible(false);
  };

  const handleLogin = () => {
    message.success("即将跳转到登录页面，请稍候...");
    setTimeout(() => {
      window.location.href =
        "https://gbs-gateway.qhdsafety.com/login/client/ZQAQPJ";
    }, 2000);
  };

  useEffect(() => {
    if (current === 1) {
      window.setTimeout(() => {
        setCurrent(2);
      }, 3000);
    }
    if (current === 2) {
      handleLogin();
    }
  }, [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 noStyle name="id" />
                  <Form.Item
                    name="unitName"
                    label="生产经营单位名称"
                    rules={[
                      { required: true, message: "请输入生产经营单位名称" },
                    ]}
                  >
                    <Input
                      placeholder="请输入生产经营单位名称"
                      allowClear
                      maxLength={200}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="creditCode"
                    label="统一社会信用代码"
                    rules={[creditCodeRule(true)]}
                  >
                    <Input
                      placeholder="请输入统一社会信用代码"
                      allowClear
                      maxLength={18}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="safetyIndustryCategoryCode"
                    label="安全生产监管行业类别"
                    rules={[
                      { required: true, message: "请选择安全生产监管行业类别" },
                    ]}
                  >
                    <Select
                      options={QUALIFICATION_INDUSTRY_OPTIONS}
                      mode="multiple"
                      placeholder="请选择安全生产监管行业类别"
                      allowClear
                      onChange={(value, option) => {
                        form.setFieldValue(
                          "safetyIndustryCategoryName",
                          option?.map((item) => item.label).join(",") || "",
                        );
                      }}
                    />
                  </Form.Item>
                  <Form.Item name="safetyIndustryCategoryName" noStyle />
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="districtCode"
                    label="属地"
                    rules={[{ required: true, message: "请选择属地" }]}
                  >
                    <Select
                      options={CHONGQING_DISTRICTS}
                      placeholder="请选择属地"
                      allowClear
                      onChange={(value, option) => {
                        form.setFieldValue("districtName", option?.label || "");
                      }}
                    />
                  </Form.Item>
                  <Form.Item name="districtName" noStyle />
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="townStreet"
                    label="所属镇、街道"
                    rules={[{ required: true, message: "请输入所属镇街道" }]}
                  >
                    <Input
                      placeholder="请输入所属镇街道"
                      allowClear
                      maxLength={100}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="villageCommunity" label="属村（社区）">
                    <Input
                      placeholder="请输入属村（社区）"
                      allowClear
                      maxLength={100}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="所在地坐标经度">
                    <Flex>
                      <Form.Item
                        name="longitude"
                        noStyle
                        dependencies={["latitude"]}
                        rules={[
                          {
                            validator(_, value) {
                              const latitude = form.getFieldValue("latitude");
                              if (
                                value !== undefined &&
                                value !== null &&
                                value !== "" &&
                                (latitude === undefined ||
                                  latitude === null ||
                                  latitude === "")
                              ) {
                                return Promise.reject(
                                  new Error("填写经度后，纬度必填"),
                                );
                              }
                              return Promise.resolve();
                            },
                          },
                        ]}
                      >
                        <InputNumber
                          style={{ width: "100%" }}
                          min={-180}
                          max={180}
                          precision={6}
                          placeholder="请输入经度"
                          allowClear
                        />
                      </Form.Item>

                      <Button onClick={() => setMapPickerVisible(true)}>
                        选择
                      </Button>
                    </Flex>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="latitude"
                    label="所在地坐标纬度"
                    dependencies={["longitude"]}
                    rules={[
                      {
                        validator(_, value) {
                          const longitude = form.getFieldValue("longitude");
                          if (
                            value !== undefined &&
                            value !== null &&
                            value !== "" &&
                            (longitude === undefined ||
                              longitude === null ||
                              longitude === "")
                          ) {
                            return Promise.reject(
                              new Error("填写纬度后，经度必填"),
                            );
                          }
                          return Promise.resolve();
                        },
                      },
                    ]}
                  >
                    <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="请输入注册地址"
                      maxLength={200}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="businessAddress"
                    label="经营地址"
                    rules={[{ required: true, message: "请输入经营地址" }]}
                  >
                    <Input.TextArea
                      rows={3}
                      placeholder="请输入经营地址"
                      maxLength={200}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="ownershipTypeName" label="归属类型">
                    <Input
                      placeholder="请输入归属类型"
                      allowClear
                      maxLength={50}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="economyIndustryCode"
                    label="国民经济行业分类(GB/T4754-2017)"
                  >
                    <Select
                      options={ECONOMY_INDUSTRY_OPTIONS}
                      placeholder="请选择国民经济行业分类"
                      allowClear
                      onChange={(value, option) => {
                        form.setFieldValue(
                          "economyIndustryName",
                          option?.label || "",
                        );
                      }}
                    />
                  </Form.Item>
                  <Form.Item name="economyIndustryName" noStyle />
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="legalRepresentative"
                    label="法定代表人"
                    rules={[{ required: true, message: "请输入法定代表人" }]}
                  >
                    <Input
                      placeholder="请输入法定代表人"
                      allowClear
                      maxLength={50}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="legalRepresentativePhone"
                    label="法定代表人联系电话"
                    rules={[phoneRule("法定代表人联系电话", false)]}
                  >
                    <Input
                      placeholder="请输入法定代表人联系电话"
                      allowClear
                      maxLength={11}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="principalName"
                    label="主要负责人"
                    rules={[{ required: true, message: "请输入主要负责人" }]}
                  >
                    <Input
                      placeholder="请输入主要负责人"
                      allowClear
                      maxLength={50}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="principalPhone"
                    label="主要负责人联系电话"
                    rules={[phoneRule("主要负责人联系电话", true)]}
                  >
                    <Input
                      placeholder="请输入主要负责人联系电话"
                      allowClear
                      maxLength={11}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="safetyDeptManager"
                    label="安全管理部门负责人"
                  >
                    <Input
                      placeholder="请输入安全管理部门负责人"
                      allowClear
                      maxLength={50}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="safetyDeptManagerPhone"
                    label="安全管理部门负责人联系电话"
                    rules={[phoneRule("安全管理部门负责人联系电话", false)]}
                  >
                    <Input
                      placeholder="请输入安全管理部门负责人联系电话"
                      allowClear
                      maxLength={11}
                    />
                  </Form.Item>
                </Col>

                <Col span={12}>
                  <Form.Item
                    name="safetyDeputyPhone"
                    label="主管安全副总联系电话"
                    rules={[phoneRule("主管安全副总联系电话", false)]}
                  >
                    <Input
                      placeholder="请输入主管安全副总联系电话"
                      allowClear
                      maxLength={11}
                    />
                  </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
                      maxLength={50}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="infoDisclosureUrl"
                    label="信息公开网址"
                    rules={[urlRule("信息公开网址", false)]}
                  >
                    <Input
                      placeholder="请输入信息公开网址"
                      allowClear
                      maxLength={200}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="workplaceArea"
                    label="工作场所建筑面积"
                    rules={[positiveNumberRule("工作场所建筑面积", false)]}
                  >
                    <InputNumber
                      style={{ width: "100%" }}
                      min={0}
                      max={99999}
                      precision={2}
                      placeholder="请输入工作场所建筑面积"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="archiveRoomArea"
                    label="档案室面积"
                    rules={[positiveNumberRule("档案室面积", false)]}
                  >
                    <InputNumber
                      style={{ width: "100%" }}
                      min={0}
                      max={99999}
                      precision={2}
                      placeholder="请输入档案室面积"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="fulltimeEvaluatorCount"
                    label="专职安全评价师数量"
                    rules={[
                      nonNegativeIntegerRule("专职安全评价师数量", false),
                    ]}
                  >
                    <InputNumber
                      style={{ width: "100%" }}
                      min={0}
                      max={99999}
                      precision={0}
                      placeholder="请输入专职安全评价师数量"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="registeredEngineerCount"
                    label="注册安全工程师数量"
                    rules={[
                      nonNegativeIntegerRule("注册安全工程师数量", false),
                    ]}
                  >
                    <InputNumber
                      style={{ width: "100%" }}
                      min={0}
                      max={99999}
                      precision={0}
                      placeholder="请输入注册安全工程师数量"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="enterpriseStatusCode" label="企业状态">
                    <Select
                      options={ENTERPRISE_STATUS_OPTIONS}
                      placeholder="请选择企业状态"
                      allowClear
                      onChange={(value, option) => {
                        form.setFieldValue(
                          "enterpriseStatusName",
                          option?.label || "",
                        );
                      }}
                    />
                  </Form.Item>
                  <Form.Item name="enterpriseStatusName" noStyle />
                </Col>
                <Col span={12}>
                  <Form.Item name="enterpriseScaleCode" label="企业规模">
                    <Select
                      options={ENTERPRISE_SCALE_OPTIONS}
                      placeholder="请选择企业规模"
                      allowClear
                      onChange={(value, option) => {
                        form.setFieldValue(
                          "enterpriseScaleName",
                          option?.label || "",
                        );
                      }}
                    />
                  </Form.Item>
                  <Form.Item name="enterpriseScaleName" noStyle />
                </Col>
                <Col span={12}>
                  <Form.Item name="filingTypeCode" label="备案类型">
                    <Select
                      options={REGISTERED_ORG_FILING_TYPE_SEARCH_OPTIONS}
                      placeholder="请选择备案类型"
                      allowClear
                      onChange={(value, option) => {
                        form.setFieldValue("filingTypeName", option?.label);
                      }}
                    />
                  </Form.Item>
                  <Form.Item name="filingTypeName" noStyle />
                </Col>
                <Col span={12}>
                  <Form.Item name="filingRecordStatusCode" label="备案状态">
                    <Select
                      options={REGISTERED_ORG_FILING_RECORD_STATUS_OPTIONS}
                      placeholder="请选择备案状态"
                      allowClear
                      onChange={(value, option) => {
                        form.setFieldValue(
                          "filingRecordStatusName",
                          option?.label || "",
                        );
                      }}
                    />
                  </Form.Item>
                  <Form.Item name="filingRecordStatusName" noStyle />
                </Col>
                <Col span={12}>
                  <AttachmentUpload
                    name="attachmentUrls"
                    label="上传附件"
                    extra={"最多上传10个PDF、DOC、DOCX格式文件"}
                    maxCount={10}
                    accept=".pdf,.doc,.docx"
                  />
                </Col>
              </Row>
            </Form>
            <BaiduMapPicker
              visible={mapPickerVisible}
              onCancel={() => setMapPickerVisible(false)}
              onConfirm={handleMapConfirm}
            />
            <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);