FEV2 / fw-cms

import SelectBrandOrSeries from "@/pages/ehr/ProgramOfStudy/components/SelectBrandOrSeries";
import RangeRoleSelector from "@/pages/ehr/ProgramOfStudy/components/RangeRoleSelector";
import {
  Button,
  DatePicker,
  Divider,
  Form,
  Input,
  message,
  Modal,
  Radio,
  Spin,
  TreeSelect,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import React, { useEffect, useRef, useState } from "react";
import { useStore } from "../index";
import {
  isObjectChanged,
  validatorNumber,
  validatorNumberMoreThan0Less100,
} from "@/utils/validate";
import FeeweeUploadAttachment from "@/components/FeeweeUploadAttachment";
import TimeComponent from "./TimeComponent";
import AuthList from "./AuthList";
import ExamList from "./ExamList";
import {
  saveDraftApi,
  getStudyDraftDetailApi,
  getStudyDetailApi,
} from "../api";
import moment, { Moment } from "moment";
import { cloneDeep } from "lodash";

export default function ProgramOfStudySettingsModal() {
  const {
    listType,
    abilityTypeInitial,
    current,
    setCureent,
    visible,
    setVisible,
    isView,
    setIsView,
    questionBankInitial,
    form,
    pagination,
  } = useStore();
  const [confirmLoading, setConfirmLoading] = useState(false);
  const submitType = useRef<"save" | "draft">("save");
  const tempItem = useRef<EHrProgramOfStudySettings.ListVO>();

  useEffect(() => {
    if (visible) {
      if (current?.id) {
        setConfirmLoading(true);
        const api =
          listType === "列表" ? getStudyDetailApi : getStudyDraftDetailApi;
        api(current.id)
          .then((res) => {
            tempItem.current = res.data;

            // 查询题库列表
            questionBankInitial.setParams(
              {
                standardId: res.data?.typeId,
                adapterType: res.data?.adapterType,
                adapterIds: res.data?.adapterList
                  ?.map((adapter) => adapter.adapterId)
                  .join(","),
                scopeType: res.data?.roleRangeType,
                roleCode: res.data?.roleRangeList
                  ?.map((role) => role.roleCode)
                  .join(","),
              },
              true
            );

            form.setFieldsValue({
              ...res.data,
              adapter: {
                type: res.data?.adapterType,
                list: res.data?.adapterList?.map((range) => ({
                  value: range.adapterId,
                  label: range.adapterName,
                })),
              },
              rangeRole: {
                type: res.data?.roleRangeType,
                list: res.data?.roleRangeList?.map((role) => ({
                  value: role.roleCode,
                  label: role.roleName,
                })),
              },
              expireTime: res.data?.expireTime
                ? moment(res.data?.expireTime)
                : undefined,
              referenceTime: {
                type: res.data?.referenceTimeType,
                time: res.data?.referenceTime,
              },
            });
            setConfirmLoading(false);
          })
          .catch((error) => {
            setConfirmLoading(false);
            message.error(error.message);
          });
      } else {
        form.setFieldsValue({
          passLine: 90,
          rangeRole: { type: 1 },
          referenceTime: {
            type: 1,
          },
        });
      }
    }
  }, [visible, current]);

  const validatorBrandOrSeries = (
    rule: any,
    value: any = { type: 1, list: [] }
  ) => {
    if (value.type === 4) return Promise.resolve();
    if (!value.type || !value.list?.length) {
      return Promise.reject(Error("请选择适用范围"));
    }
    if (value.list && value.list.length > 0) return Promise.resolve();
    else {
      return Promise.reject(
        Error(
          `请选择${
            value.type === 1
              ? "品牌"
              : value.type === 2
              ? "车系"
              : value.type === 3
              ? "门店"
              : "适用范围"
          }`
        )
      );
    }
  };

  const validatorRangeRoleSelector = (
    rule: any,
    value: any = { type: 1, list: [] }
  ) => {
    if (value.type === 1) return Promise.resolve();
    if (!value.type || !value.list?.length) {
      return Promise.reject(Error("请选择适用范围"));
    }
    if (value.list && value.list.length > 0) return Promise.resolve();
    else {
      return Promise.reject(Error(`请选择适用角色`));
    }
  };

  const examTimeTypeChange = (e: any) => {
    const value = e.target.value;
    if (value == 1) form.setFieldsValue({ questionSecond: undefined }); // 切换考试时限类型，需要把另外一个类型值 置空；
    if (value == 2) form.setFieldsValue({ examMinute: undefined }); // 切换考试时限类型，需要把另外一个类型值 置空；
    return value;
  };

  const examList = Form.useWatch("examList", form);
  const authList = Form.useWatch("authList", form);
  // @ts-ignore
  const onOk = (val: any) => {
    if (!examList?.length && !authList?.length) {
      return message.error("考试和实操至少需要一个");
    }
    const params: EHrProgramOfStudySettings.ListVO = {
      id: listType === "列表" ? undefined : tempItem.current?.id,
      // referId: submitType.current === "draft" ? (current?.referId || current?.id) : current?.id,
      referId:
        listType === "列表" ? tempItem.current?.id : tempItem.current?.referId,
      name: val.name,
      typeId: val.typeId,
      roleRangeType: val?.rangeRole?.type,
      roleRangeList: val?.rangeRole?.list?.map((item: any) => ({
        roleCode: item.value,
        roleName: item.label,
      })),
      adapterType: val?.adapter?.type,
      adapterList: val?.adapter?.list?.map((item: any) => ({
        adapterId: item.value,
        adapterName: item.label,
      })),
      expireTime: val.expireTime
        ? (val.expireTime as Moment).valueOf()
        : undefined,
      programType: val?.examList?.length
        ? val?.authList?.length
          ? 3
          : 1
        : val?.authList?.length
        ? 2
        : undefined,
      examList: val?.examList,
      authList: val?.authList,
      examTimeType: val.examTimeType,
      examLongTime: val.examLongTime,
      passLine: val.passLine,
      trainRetryNum: val.trainRetryNum,
      referenceTimeType: val?.referenceTime?.type,
      referenceTime: val?.referenceTime?.time,
      attachList: val.attachList,
      draft: submitType.current === "draft",
    };
    if (
      tempItem.current &&
      !(listType === "草稿" && submitType.current === "save")
    ) {
      const _p = cloneDeep(params),
        _c = cloneDeep(tempItem.current);
      delete _p.id;
      delete _p.referId;
      delete _p.draft;
      delete _p.draftId;
      delete _c.id;
      delete _c.referId;
      delete _c.draft;
      delete _c.draftId;
      delete _c.typeName;
      delete _c.status;
      const isChanged = isObjectChanged(_c, _p);
      if (!isChanged) {
        return message.warning("您未修改任何信息，无需提交或保存草稿");
      }
    }
    const hide = message.loading("提交中，请稍后...", 0);
    setConfirmLoading(true);
    saveDraftApi(params)
      .then((res) => {
        hide();
        setConfirmLoading(false);
        message.success(res.result);
        setVisible(false);
        pagination.setLoading(true);
      })
      .catch((error) => {
        hide();
        setConfirmLoading(false);
        message.error(error.message || "保存失败");
      });
  };

  return (
    <Modal
      title={`${current ? "编辑" : "添加"}学习项目${
        current && listType === "草稿" ? "草稿" : ""
      }`}
      open={visible}
      maskClosable={false}
      width="60%"
      confirmLoading={confirmLoading}
      onCancel={() => setVisible(false)}
      afterClose={() => {
        form.resetFields();
        tempItem.current = undefined;
        setCureent(undefined);
        setIsView(false);
      }}
      footer={[
        <Button loading={confirmLoading} onClick={() => setVisible(false)}>
          取消
        </Button>,
        !isView ? (
          <Button
            loading={confirmLoading}
            onClick={() => {
              submitType.current = "draft";
              form.submit();
            }}
            style={{ color: "#FF921C", borderColor: "#FF921C" }}
          >
            保存草稿
          </Button>
        ) : null,
        !isView ? (
          <Button
            loading={confirmLoading}
            type="primary"
            onClick={() => {
              submitType.current = "save";
              form.submit();
            }}
          >
            提交
          </Button>
        ) : null,
      ]}
    >
      <Form
        form={form}
        onFinish={onOk}
        // wrapperCol={{ span: 20 }}
        // labelCol={{ span: 4 }}
      >
        <Spin spinning={confirmLoading}>
          <Divider orientation="left">1. 基础设置</Divider>
          <Form.Item
            label="学习项目"
            name="name"
            rules={[{ required: true, message: "请输入学习项目名称" }]}
          >
            <Input
              allowClear
              disabled={isView}
              placeholder="请输入学习项目名称"
            />
          </Form.Item>
          <Form.Item
            label="业务类型"
            name="typeId"
            rules={[{ required: true, message: "请选择业务类型" }]}
            getValueFromEvent={(typeId?: number) => {
              questionBankInitial.setParams({ standardId: typeId }, true);
              return typeId;
            }}
          >
            <TreeSelect
              allowClear
              placeholder="请选择业务类型"
              fieldNames={{
                label: "name",
                value: "id",
                children: "children",
              }}
              disabled={isView}
              showSearch
              treeNodeFilterProp="name"
              getPopupContainer={(triggerNode) => triggerNode.parentNode}
              treeData={abilityTypeInitial.data.map((parent) => ({
                ...parent,
                selectable: false,
              }))}
            />
          </Form.Item>
          <Form.Item
            label="适用范围"
            name="adapter"
            rules={[
              {
                required: true,
                validator: validatorBrandOrSeries,
                message: "请选择适用范围",
              },
            ]}
            getValueFromEvent={(value?: {
              type?: number;
              list?: { value?: string; label?: string }[];
            }) => {
              questionBankInitial.setParams(
                {
                  adapterType: value?.type,
                  adapterIds: value?.list?.map((item) => item.value).join(","),
                },
                true
              );
              return value;
            }}
          >
            <SelectBrandOrSeries disabled={isView} mode="multiple" />
          </Form.Item>
          <Form.Item
            label="适用角色"
            name="rangeRole"
            rules={[
              {
                required: true,
                validator: validatorRangeRoleSelector,
                message: "请选择适用角色",
              },
            ]}
            getValueFromEvent={(value?: {
              type?: number;
              list?: { value?: string; label?: string }[];
            }) => {
              questionBankInitial.setParams(
                {
                  scopeType: value?.type,
                  roleCode: value?.list?.map((item) => item.value).join(","),
                },
                true
              );
              return value;
            }}
          >
            <RangeRoleSelector disabled={isView} labelInValue mode="multiple" />
          </Form.Item>
          <Form.Item
            label="过期时间"
            name="expireTime"
            extra="不设置过期时间，则表明该学习项目为长期有效"
          >
            {/* @ts-ignore */}
            <DatePicker
              style={{ width: "100%" }}
              allowClear
              disabled={isView}
            />
          </Form.Item>
          <Divider orientation="left">2. 考核设置</Divider>
          <ExamList disabled={isView} />
          <Form.Item
            name="authList"
            label="实操配置"
            extra="该学习项目需要实操，才配置，不需要则不配置"
            style={{ paddingTop: 20 }}
          >
            <AuthList disabled={isView} />
          </Form.Item>
          <Divider orientation="left">3. 考核要求</Divider>
          {examList?.length ? (
            <>
              <Form.Item
                label="考试时限类型"
                name="examTimeType"
                rules={[{ required: true, message: "请选择考试时限类型" }]}
                getValueFromEvent={examTimeTypeChange}
              >
                <Radio.Group disabled={isView}>
                  <Radio key={1} value={1}>
                    按整场考试时长设置
                  </Radio>
                  <Radio key={2} value={2}>
                    按每道题时长计算
                  </Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item
                noStyle
                shouldUpdate={(prev, cur) => prev.examTimeType !== cur.examTimeType}
              >
                {({ getFieldValue }) => {
                  const examTimeType = getFieldValue("examTimeType");
                  if (examTimeType == 1) {
                    return (
                      <Form.Item
                        label="整场考试时长"
                        name="examLongTime"
                        rules={[
                          { required: true, message: "请输入整场考试时长" },
                          { validator: validatorNumber },
                        ]}
                      >
                        <Input
                          disabled={isView}
                          allowClear
                          placeholder="请输入整场考试时长"
                          suffix="&nbsp;&nbsp;分钟"
                        />
                      </Form.Item>
                    );
                  }
                  if (examTimeType == 2) {
                    return (
                      <Form.Item
                        label="单题时长"
                        name="examLongTime"
                        extra="系统会根据单题时长 x 题量 计算考试整场考试时长"
                        rules={[
                          { required: true, message: "请输入单题时长" },
                          { validator: validatorNumber },
                        ]}
                      >
                        <Input
                          disabled={isView}
                          allowClear
                          placeholder="请输入单题时长"
                          suffix="&nbsp;&nbsp;秒"
                        />
                      </Form.Item>
                    );
                  }
                  return null;
                }}
              </Form.Item>
            </>
          ) : null}

          <Form.Item
            label="及格线"
            name="passLine"
            rules={[
              { required: true, message: "请输入及格线" },
              { validator: validatorNumberMoreThan0Less100 },
            ]}
            extra="（总分*百分比）当前默认为90"
          >
            <Input
              disabled={isView}
              allowClear
              placeholder="请输入及格线"
              suffix="&nbsp;&nbsp;%"
              readOnly
              bordered={false}
            />
          </Form.Item>
          <Form.Item
            label="培训次数"
            name="trainRetryNum"
            rules={[
              { required: true, message: "请输入培训次数" },
              { validator: validatorNumber },
            ]}
          >
            <Input
              disabled={isView}
              allowClear
              placeholder="请输入培训次数"
              prefix="&nbsp;&nbsp;≤&nbsp;&nbsp;"
              suffix="&nbsp;&nbsp;次"
            />
          </Form.Item>
          <Form.Item
            label="项目花费时间标准"
            name="referenceTime"
            rules={[
              { required: true, message: "请输入项目花费时间标准" },
              { validator: validatorNumber },
            ]}
            extra="项目花费时间标准（培训+考核）"
          >
            <TimeComponent disabled={isView} />
          </Form.Item>
          <Divider orientation="left">4. 学习资料</Divider>
          <Form.Item
            label="学习资料"
            name="attachList"
            valuePropName="fidList"
            extra={
              isView ? (
                ""
              ) : (
                <>
                  <span>上传学习项目相关的资料附件</span>
                  <br />
                  <span>请上传PDF/视频MP4/音频MP3/图片/Word/Excel/PPT</span>
                </>
              )
            }
          >
            <FeeweeUploadAttachment multiple limitSize={100} disabled={isView}>
              <Button icon={<PlusOutlined />}>点击上传</Button>
            </FeeweeUploadAttachment>
          </Form.Item>
        </Spin>
      </Form>
    </Modal>
  );
}