/* eslint-disable */
import React, { useEffect, useState, useRef } from "react";
import {
  Button,
  Form,
  Space,
  Upload,
  Select,
  Switch,
  message,
  DatePicker,
  Modal,
  Spin,
  Input,
  Image
} from "antd";
import {
  CheckOutlined,
  CloseCircleOutlined,
  EditOutlined,
  SendOutlined,
  SaveOutlined,
  MinusOutlined
} from "@ant-design/icons";
import BackIcon from "@/assets/back.svg";
import CopyAllIcon from "@/assets/copyallWhite.svg";
import moment from "moment";
import BraftEditor from "braft-editor";
import "braft-editor/dist/index.css";
import gStyles from "@/index.less";
import styles from "./index.less";
import * as commonConfig from "@/utils/config";
import * as commonUtils from "@/utils/utils";
import AntdDraggableModal from "@/components/Common/AntdDraggableModal";
import WorkOrderSystemService from "./WorkOrderSystemService";
import WorkOrderSystemConfig from "./WorkOrderSystemConfig";

// 主入口
const WorkOrderSystemDetail = props => {
  const [loading, setLoading] = useState(false);
  // 详情弹窗id
  const { current: detailModalId } = useRef(
    "detailModalId_" +
      Math.random()
        .toString(36)
        .substring(2)
  );

  // 最小化状态
  const [bMin, setBMin] = useState(false);
  window.setBMin = setBMin;
  // 强制更新视图
  const [updater, setUpdater] = useState(0);
  const forceUpdate = () => {
    setUpdater(updater + 1);
  };
  // 刷新页面
  const [refresher, setRefresher] = useState(0);
  const refresh = () => {
    setRefresher(refresher + 1);
  };
  const [form] = Form.useForm();
  const [formEnabled, setFormEnabled] = useState(false);
  const { sId, app, refreshSlaveTable, gdsjurisdiction } = props;
  const { userinfo } = app;
  const { sUserName: sMakePerson } = userinfo;
  const [detailData, setDetailData] = useState({});
  const {
    sTitle,
    fileData = [],
    replyData = [],
    sContentMemo,
    sCustomerId,
    sCustomerName,
    sModuleId,
    sModuleName,
    sHanldeId,
    sCopyHanldeId,
    bVsersion,
    bBug,
    sType,
    tDevHandleDate,
    tHandleDate,
    sStatus
  } = detailData;

  const [customerOption, setCustomerOption] = useState([]); // 【所属客户】下拉选项
  const [moduleOption, setModuleOption] = useState([]); // 【所属模块】下拉选项
  const [userOption, setUserOption] = useState([]); // 【处理人、抄送人】下拉选项
  const { priorityOption } = WorkOrderSystemConfig; // 【优先级】下拉选项
  const [replyModalVisible, setReplyModalVisible] = useState(false); // 回复弹窗状态
  const [assignmentModalVisible, setAssignmentModalVisible] = useState(false); // 指派弹窗状态
  const [resolutionModalVisible, setResolutionModalVisible] = useState(false); // 解决弹窗状态
  const enabled = !["已关闭"].includes(sStatus); // 是否可操作

  // 富文本看点击图片事件
  const [imageVisible, setImageVisible] = useState(false);
  const [imageSrc, setImageSrc] = useState(null);
  useEffect(() => {
    const showImage = e => {
      if (e.target && e.target.nodeName === "IMG") {
        const { src } = e.target;
        if (src) {
          setImageSrc(src);
          setImageVisible(true);
        }
      }
    };

    document.addEventListener("dblclick", showImage);
    return () => {
      document.removeEventListener("dblclick", showImage);
    };
  }, []);

  // 显示的按钮
  const [btnShowData, setBtnShowData] = useState([]);
  // 过滤掉没有权限的按钮
  useEffect(
    () => {
      if (!enabled) {
        setBtnShowData([]);
        return;
      }
      const defaultBtnData = [
        "BtnReplyd",
        "BtnEdit",
        "BtnAssign",
        "BtnSolve",
        "BtnClose"
      ];
      if (gdsjurisdiction) {
        gdsjurisdiction.forEach(child => {
          const index = defaultBtnData.findIndex(
            item => item === child.sAction
          );
          if (index > -1) {
            defaultBtnData.splice(index, 1);
          }
        });
      }
      setBtnShowData(defaultBtnData);
    },
    [gdsjurisdiction, enabled]
  );

  // 指派/解决
  const addReplyHanle = async values => {
    const response = await WorkOrderSystemService.addReplyHanle({
      ...values,
      sId,
      sMakePerson
    });
    setLoading(false);
    if (commonUtils.isNotEmptyObject(response)) {
      refreshSlaveTable();
      props.onSaveState({
        workOrderSystemDetailModalVisible: false
      });
    }
  };

  // 初始化加载数据
  useEffect(
    async () => {
      setDetailData(await WorkOrderSystemService.getDetailData({ sId }));
      setCustomerOption(
        (await WorkOrderSystemService.getsCustomerData()).map(item => ({
          label: item.sCustomerName,
          value: item.sCustomerId || item.sId,
          item
        }))
      );
      setModuleOption(
        (await WorkOrderSystemService.getsModuleData()).map(item => ({
          label: item.sModuleName,
          value: item.sModuleId,
          item
        }))
      );
      setUserOption(
        (await WorkOrderSystemService.getUserData()).map(item => ({
          label: item.sHanldeName,
          value: item.sHanldeId,
          item
        }))
      );
    },
    [refresher]
  );

  // detailData变化时，给表单赋值
  useEffect(
    () => {
      if (
        commonUtils.isNotEmptyArr(detailData) &&
        commonUtils.isNotEmptyArr(customerOption) &&
        commonUtils.isNotEmptyArr(moduleOption)
      ) {
        const temp = {};
        replyData.forEach((item, index) => {
          const {
            tCreateDate,
            sMakePerson: sMakePersonTemp,
            sResult,
            sContentMemo: sContentMemoTemp,
            sAssignedBy
          } = item;
          temp[`reply${index}`] = (
            <span>
              {index + 1}.{tCreateDate} <span>由</span>{" "}
              <strong>{sMakePersonTemp}</strong> {sResult.replace("已", "")}
              {sAssignedBy ? (
                <>
                  <span>给 </span>
                  <strong>{sAssignedBy}</strong>
                </>
              ) : (
                ""
              )}
            </span>
          );
          if (sContentMemoTemp) {
            temp[`replyContentMemo${index}`] = BraftEditor.createEditorState(
              sContentMemoTemp
            );
          }
        });

        const addState = {};
        if (sCustomerId) {
          if (customerOption.find(item => item.value === sCustomerId)) {
            addState.sCustomerId = sCustomerId;
          } else {
            setCustomerOption(prevState => [
              ...prevState,
              {
                value: sCustomerId,
                label: sCustomerName,
                item: {
                  sCustomerId,
                  sCustomerName
                }
              }
            ]);
          }
        }

        if (sModuleId) {
          if (moduleOption.find(item => item.value === sModuleId)) {
            addState.sModuleId = sModuleId;
          } else {
            setModuleOption(prevState => [
              ...prevState,
              {
                value: sModuleId,
                label: sModuleName,
                item: {
                  sModuleId,
                  sModuleName
                }
              }
            ]);
          }
        }

        form.setFieldsValue({
          sTitle,
          sContentMemo: BraftEditor.createEditorState(sContentMemo),
          ...addState,
          sHanldeId,
          sCopyHanldeId: sCopyHanldeId ? sCopyHanldeId.split(",") : [],
          bVsersion,
          bBug,
          sType: sType !== undefined ? parseInt(sType) : "",
          tDevHandleDate: tDevHandleDate ? moment(tDevHandleDate) : "",
          tHandleDate: tHandleDate ? moment(tHandleDate) : "",
          ...temp
        });
        forceUpdate();
      }
    },
    [detailData, customerOption, moduleOption]
  );

  const [fileList, setFileList] = useState([]); // 附件列表
  const [fileAdd, setFileAdd] = useState([]); // 新增附件

  // fileData变化时，给附件列表赋值
  useEffect(
    () => {
      setFileList(
        [...fileData].map(item => {
          const { sId: uid, sPictureName: name, sPicturePath } = item;
          return {
            uid,
            name,
            url: `${
              commonConfig.feedback_host
            }file/download?savePathStr=${sPicturePath}&sModelsId=100`,
            status: "done",
            item
          };
        })
      );
    },
    [fileData]
  );

  // fileAdd变化时，调用新增附件接口
  useEffect(
    async () => {
      if (fileAdd.length) {
        setFileAdd([]);
        const _fileData = await WorkOrderSystemService.uploadAdd(fileAdd, {
          sId,
          sMakePerson
        });
        setFileList([
          ...fileList,
          ..._fileData.map(item => {
            const { sId: uid, sPictureName: name, sPicturePath } = item;
            return {
              uid,
              name,
              url: `${
                commonConfig.feedback_host
              }file/download?savePathStr=${sPicturePath}&sModelsId=100`,
              status: "done",
              item
            };
          })
        ]);
      }
    },
    [fileAdd]
  );

  // 附件props
  const uploadProps = {
    accept: "*/*",
    multiple: true,
    fileList,
    disabled: !btnShowData.includes("BtnEdit"),
    beforeUpload: file => {
      setFileAdd(prevState => [...prevState, file]);
      return false;
    },
    onRemove: file => {
      Modal.confirm({
        title: "确认删除",
        onOk() {
          WorkOrderSystemService.deleteFile(file.item, sId, () => {
            setFileList(fileList.filter(item => item.uid !== file.uid));
            message.success("附件删除成功");
          });
        }
      });
    }
  };

  // 回复props
  const replyProps = {
    ...props,
    replyModalVisible,
    detailData,
    detailModalId,
    setReplyModalVisible,
    refresh,
    bMin,
    setBMin
  };

  // 指派props
  const assignmentProps = {
    ...props,
    bMin,
    setBMin,
    userOption,
    visible: assignmentModalVisible,
    setVisible: setAssignmentModalVisible,
    detailData,
    onFinish: values => {
      setLoading(true);
      setAssignmentModalVisible(false);
      const { value, label } = userOption.find(
        item => item.value === values.sHanldeId
      );

      const copyDataAdd = {};
      const copyData = userOption.filter(item =>
        values.sCopyHanldeId.includes(item.value)
      );

      if (commonUtils.isNotEmptyArr(copyData)) {
        copyDataAdd.sCopyFor = copyData.map(item => item.label).toString();
        copyDataAdd.sCopyForId = copyData.map(item => item.value).toString();
      }

      addReplyHanle({
        sAssignedBy: label,
        sAssignedById: value,
        ...copyDataAdd,
        sContentMemo: values.sContentMemo
          ? values.sContentMemo.toHTML()
          : "<p></p>",
        sResult: "已指派"
      });
    }
  };

  // 解决props
  const resolutionModalProps = {
    ...props,
    bResolution: true,
    userOption,
    visible: resolutionModalVisible,
    setVisible: setResolutionModalVisible,
    detailData,
    bMin,
    setBMin,
    onFinish: values => {
      setResolutionModalVisible(false);
      addReplyHanle({
        sContentMemo: values.sContentMemo
          ? values.sContentMemo.toHTML()
          : "<p></p>",
        sResult: "已解决"
      });
    }
  };

  // 图片弹窗props
  const imageModalProps = {
    imageSrc,
    imageVisible,
    setImageVisible
  };

  // 修改后保存
  const onFinish = async values => {
    setLoading(true);
    const {
      sContentMemo,
      sCustomerId,
      sModuleId,
      sHanldeId,
      sCopyHanldeId,
      bVsersion,
      bBug,
      sType,
      tDevHandleDate,
      tHandleDate
    } = values;

    const response = await WorkOrderSystemService.detailUpdate({
      sId,
      sMakePerson,
      sTitle,
      sContentMemo: sContentMemo.toHTML(),
      ...customerOption.find(item => item.value === sCustomerId).item,
      ...moduleOption.find(item => item.value === sModuleId).item,
      ...userOption.find(item => item.value === sHanldeId).item,
      sCopyHanldeId: sCopyHanldeId.toString(),
      sCopyHanldeName: userOption
        .filter(item => sCopyHanldeId.includes(item.value))
        .map(item => item.label)
        .toString(),
      bVsersion,
      bBug,
      sType,
      tDevHandleDate: tDevHandleDate
        ? moment(tDevHandleDate).format("YYYY-MM-DD")
        : undefined,
      tHandleDate: tDevHandleDate
        ? moment(tHandleDate).format("YYYY-MM-DD")
        : undefined,
      sStatus: "已修改"
    });

    setLoading(false);
    if (commonUtils.isNotEmptyObject(response)) {
      setFormEnabled(false);
      refresh();
      refreshSlaveTable();
    }
  };

  return (
    <Spin spinning={loading}>
      <Form
        form={form}
        onFinish={onFinish}
        labelCol={{
          span: 3
        }}
        wrapperCol={{
          span: 21
        }}
        className={`${styles.workOrderSystemDetail} ${detailModalId}`}
      >
        <Form.Item
          name="sTitle"
          labelCol={{
            span: 0
          }}
          wrapperCol={{
            span: 24
          }}
        >
          <Input.TextArea
            disabled
            bordered={false}
            autoSize={{ minRows: 1, maxRows: 10 }}
            style={{
              fontSize: 16,
              fontWeight: "bold",
              resize: "none",
              color: "#000"
            }}
          />
        </Form.Item>
        <Form.Item
          name="sContentMemo"
          labelCol={{
            span: 0
          }}
          wrapperCol={{
            span: 24
          }}
        >
          <BraftEditor
            className={styles.braftEditorReadOnly}
            readOnly={true}
            controls={[]}
          />
        </Form.Item>

        <Form.Item
          className={styles.formItemHalf}
          name="sCustomerId"
          label="所属客户"
          rules={[{ required: formEnabled }]}
        >
          <Select
            allowClear
            showSearch={true}
            options={customerOption}
            optionFilterProp="label"
            placeholder="请选择所属客户"
            disabled={!formEnabled}
          />
        </Form.Item>
        <Form.Item
          className={styles.formItemHalf}
          name="sModuleId"
          label="所属模块"
          rules={[{ required: formEnabled }]}
        >
          <Select
            mode={formEnabled ? "tags" : ""}
            showSearch={true}
            options={moduleOption}
            optionFilterProp="label"
            placeholder="请选择所属模块"
            disabled={!formEnabled}
            onChange={value => {
              if (value.length) {
                form.setFieldValue("sModuleId", value[value.length - 1]);
              }
            }}
          />
        </Form.Item>
        <Form.Item
          className={styles.formItemHalf}
          name="sHanldeId"
          label="处理人"
          rules={[{ required: formEnabled }]}
        >
          <Select
            allowClear
            showSearch={true}
            options={userOption}
            optionFilterProp="label"
            placeholder="请选择处理人"
            disabled={!formEnabled}
          />
        </Form.Item>
        <Form.Item
          className={styles.formItemHalf}
          name="sCopyHanldeId"
          label="抄送人"
        >
          <Select
            allowClear
            showSearch={true}
            options={userOption}
            optionFilterProp="label"
            mode="multiple"
            placeholder={formEnabled ? "请选择抄送人" : ""}
            disabled={!formEnabled}
          />
        </Form.Item>
        <Form.Item
          className={styles.formItemAQuarter}
          name="bVsersion"
          label="标版同样问题"
          valuePropName="checked"
        >
          <Switch
            checkedChildren="是"
            unCheckedChildren="否"
            disabled={!formEnabled}
          />
        </Form.Item>
        <Form.Item
          className={styles.formItemBug}
          name="bBug"
          valuePropName="checked"
        >
          <Switch
            checkedChildren="bug"
            unCheckedChildren="需求"
            disabled={!formEnabled}
          />
        </Form.Item>
        <Form.Item
          className={styles.formItemAQuarter}
          name="sType"
          label="优先级"
        >
          <Select
            className={styles.sTypeSelect}
            popupClassName={styles.sTypedDropdown}
            options={priorityOption}
            optionFilterProp="label"
            disabled={!formEnabled}
          />
        </Form.Item>
        <Form.Item
          className={styles.formItemAQuarter1}
          name="tDevHandleDate"
          label="开发截止日期"
          rules={[
            {
              validator: (_, chooseDate) => {
                const tHandleDate = form.getFieldValue().tHandleDate;
                if (
                  chooseDate &&
                  tHandleDate &&
                  chooseDate.isAfter(tHandleDate)
                ) {
                  return Promise.reject(
                    new Error("【开发截止日期】不能晚于【截止日期】")
                  );
                } else {
                  return Promise.resolve();
                }
              }
            }
          ]}
        >
          <DatePicker
            placeholder={formEnabled ? "请选择开发截止日期" : ""}
            disabled={!formEnabled}
          />
        </Form.Item>
        <Form.Item
          className={styles.formItemAQuarter1}
          name="tHandleDate"
          label="截止日期"
          rules={[
            {
              validator: (_, chooseDate) => {
                const tDevHandleDate = form.getFieldValue().tDevHandleDate;
                if (
                  chooseDate &&
                  tDevHandleDate &&
                  chooseDate.isBefore(tDevHandleDate)
                ) {
                  return Promise.reject(
                    new Error("【截止日期】不能早于【开发截止日期】")
                  );
                } else {
                  return Promise.resolve();
                }
              }
            }
          ]}
        >
          <DatePicker
            placeholder={formEnabled ? "请选择截止日期" : ""}
            disabled={!formEnabled}
          />
        </Form.Item>
        <div className={styles.replyDiv}>
          <div className={styles.replyTitle}>历史记录</div>
          {replyData.map((item, index) => {
            const { sContentMemo: sContentMemoTemp } = item;
            const itemName = `reply${index}`;
            const itemName1 = `replyContentMemo${index}`;
            const itemDom = form.getFieldValue()[itemName];
            return (
              itemDom && (
                <>
                  <Form.Item name={itemName} key={index}>
                    <div style={{ fontSize: 14 }}>{itemDom}</div>
                  </Form.Item>
                  {sContentMemoTemp ? (
                    <Form.Item name={itemName1}>
                      <BraftEditor
                        className={styles.detailBraftEditorReply}
                        readOnly={true}
                        controls={[]}
                      />
                    </Form.Item>
                  ) : (
                    ""
                  )}
                </>
              )
            );
          })}
        </div>
        <Form.Item name="fileData" label="附件" className={styles.annex}>
          <Upload {...uploadProps}>
            {btnShowData.includes("BtnEdit") && <a>添加附件</a>}
          </Upload>
        </Form.Item>
        <Form.Item />

        <Form.Item className={styles.fixedBtns}>
          <Space>
            {!formEnabled && (
              <Button
                type="primary"
                icon={<img src={BackIcon} />}
                className={styles.iconBtn}
                style={{ background: "#838A9D", borderColor: "#838A9D" }}
                onClick={() => {
                  props.onSaveState({
                    workOrderSystemDetailModalVisible: false
                  });
                }}
              >
                返回
              </Button>
            )}
            {!formEnabled &&
              btnShowData.includes("BtnReplyd") && (
                <Button
                  type="primary"
                  icon={<img src={CopyAllIcon} />}
                  className={styles.iconBtn}
                  style={{ background: "#ff822d", borderColor: "#ff822d" }}
                  onClick={() => {
                    setReplyModalVisible(true);
                  }}
                >
                  回复
                </Button>
              )}
            {!formEnabled &&
              btnShowData.includes("BtnEdit") && (
                <Button
                  type="primary"
                  icon={<EditOutlined />}
                  className={styles.iconBtn}
                  onClick={() => {
                    setFormEnabled(true);
                    document.querySelector(`.${detailModalId}`).scrollTop = 0;
                  }}
                >
                  修改
                </Button>
              )}
            {formEnabled && (
              <Button
                type="primary"
                htmlType="submit"
                icon={<SaveOutlined />}
                style={{ background: "#ff822d", borderColor: "#ff822d" }}
                className={styles.iconBtn}
              >
                保存
              </Button>
            )}
            {formEnabled && (
              <Button
                type="primary"
                icon={<CloseCircleOutlined />}
                className={styles.iconBtn}
                onClick={() => {
                  setFormEnabled(false);
                  refresh();
                }}
              >
                取消
              </Button>
            )}
            {!formEnabled &&
              btnShowData.includes("BtnAssign") && (
                <Button
                  type="primary"
                  icon={<SendOutlined />}
                  className={styles.iconBtn}
                  onClick={() => {
                    setAssignmentModalVisible(true);
                  }}
                >
                  指派
                </Button>
              )}
            {!formEnabled &&
              btnShowData.includes("BtnSolve") && (
                <Button
                  type="primary"
                  icon={<CheckOutlined />}
                  className={styles.iconBtn}
                  onClick={() => {
                    setResolutionModalVisible(true);
                  }}
                >
                  解决
                </Button>
              )}
            {!formEnabled &&
              btnShowData.includes("BtnClose") && (
                <Button
                  type="primary"
                  icon={<CloseCircleOutlined />}
                  className={styles.iconBtn}
                  onClick={() => {
                    Modal.confirm({
                      title: "确认关闭工单",
                      onOk() {
                        const evaluate = async () => {
                          const result = await WorkOrderSystemService.evaluate({
                            dEvaluate: 5,
                            sId,
                            sMakePerson
                          });

                          if (result) {
                            refreshSlaveTable();
                            props.onSaveState({
                              workOrderSystemDetailModalVisible: false
                            });
                          }
                        };
                        evaluate();
                      }
                    });
                  }}
                >
                  关闭工单
                </Button>
              )}
          </Space>
        </Form.Item>
      </Form>
      {replyModalVisible && <ReplyModal {...replyProps} />}
      {assignmentModalVisible && <AssignmentModal {...assignmentProps} />}
      {resolutionModalVisible && <AssignmentModal {...resolutionModalProps} />}
      {imageVisible && <ImageModal {...imageModalProps} />}
    </Spin>
  );
};

// 回复弹窗
const ReplyModal = props => {
  const {
    replyModalVisible,
    detailData,
    detailModalId,
    setReplyModalVisible,
    refresh,
    bMin,
    setBMin
  } = props;
  const { sId, sTitle } = detailData;
  const [loading, setLoading] = useState(false);

  const closeModal = () => {
    setReplyModalVisible(false);
  };

  const onFinish = async values => {
    setLoading(true);
    const { app } = props;
    const { userinfo } = app;
    const { sUserName: sMakePerson, sId: sLoginId } = userinfo;

    const returnData = await WorkOrderSystemService.addReply({
      sContentMemo: values.sContentMemo.toHTML(),
      sMakePerson,
      sLoginId,
      sId,
      status: "回复"
    });
    setLoading(false);
    if (commonUtils.isNotEmptyArr(returnData)) {
      message.success("成功");
      refresh();
      setTimeout(() => {
        document.querySelector(`.${detailModalId}`).scrollTop = 9999;
      }, 500);
      closeModal();
    }
  };

  return (
    replyModalVisible && (
      <AntdDraggableModal
        title={
          <>
            <span>
              {sTitle}
              -回复内容
            </span>
            <Button
              type="link"
              style={{
                position: "absolute",
                right: 30,
                top: 6,
                color: "#4a495f"
              }}
              onClick={() => {
                props.onSaveState({ bMin: true }, () => {
                  setBMin(true);
                });
              }}
            >
              <MinusOutlined />
            </Button>
          </>
        }
        open={replyModalVisible && !bMin}
        className={`${gStyles.workOrderSystemModal} ${styles.replyModal}`}
        style={{ top: "10vh" }}
        width="80vw"
        footer={null}
        onCancel={closeModal}
      >
        <Spin spinning={loading}>
          <Form onFinish={onFinish}>
            <Form.Item
              name="sContentMemo"
              label=""
              rules={[
                {
                  required: true,
                  validator: (_, sContentMemo) => {
                    if (sContentMemo.toHTML() === "<p></p>") {
                      return Promise.reject(new Error("请输入内容"));
                    } else {
                      return Promise.resolve();
                    }
                  }
                }
              ]}
            >
              <BraftEditor
                className={styles.replyBraftEditor}
                readOnly={false}
                media={{
                  uploadFn: WorkOrderSystemService.uploadFn
                }}
              />
            </Form.Item>
            <Form.Item className={styles.flexCener}>
              <Space>
                <Button onClick={closeModal}>取消</Button>
                <Button htmlType="submit" type="primary">
                  确认
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Spin>
      </AntdDraggableModal>
    )
  );
};

// 指派弹窗
const AssignmentModal = props => {
  const {
    visible,
    userOption,
    detailData,
    onFinish,
    setVisible,
    bResolution,
    setBMin,
    bMin
  } = props;
  const { sTitle, sCopyHanldeId } = detailData;
  const initialValues = {
    sCopyHanldeId: sCopyHanldeId ? sCopyHanldeId.split(",") : []
  };

  const closeModal = () => {
    setVisible(false);
  };

  return (
    visible && (
      <AntdDraggableModal
        title={
          <>
            <span>{bResolution ? "已解决确认" : `${sTitle}-指派人选择`}</span>
            <Button
              type="link"
              style={{
                position: "absolute",
                right: 30,
                top: 6,
                color: "#4a495f"
              }}
              onClick={() => {
                props.onSaveState({ bMin: true }, () => {
                  setBMin(true);
                });
              }}
            >
              <MinusOutlined />
            </Button>
          </>
        }
        open={visible && !bMin}
        className={`${gStyles.workOrderSystemModal} ${styles.assignmentModal}`}
        style={{ top: "10vh" }}
        width="80vw"
        footer={null}
        onCancel={closeModal}
      >
        <Form
          initialValues={initialValues}
          onFinish={onFinish}
          labelCol={{
            span: 2
          }}
          wrapperCol={{
            span: 22
          }}
        >
          {!bResolution && (
            <>
              <Form.Item
                name="sHanldeId"
                label="指派人"
                rules={[{ required: true }]}
              >
                <Select
                  allowClear
                  showSearch={true}
                  options={userOption}
                  optionFilterProp="label"
                  placeholder="请选择指派人"
                />
              </Form.Item>
              <Form.Item name="sCopyHanldeId" label="抄送人">
                <Select
                  allowClear
                  mode="multiple"
                  showSearch={true}
                  options={userOption}
                  optionFilterProp="label"
                  placeholder="请选择抄送人"
                />
              </Form.Item>
            </>
          )}
          <Form.Item name="sContentMemo" label="备注">
            <BraftEditor
              className={styles.replyBraftEditor}
              readOnly={false}
              media={{
                uploadFn: WorkOrderSystemService.uploadFn
              }}
            />
          </Form.Item>

          <Form.Item className={styles.flexCener}>
            <Space>
              <Button onClick={closeModal}>取消</Button>
              <Button htmlType="submit" type="primary">
                确认
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </AntdDraggableModal>
    )
  );
};

// 图片弹窗
const ImageModal = ({ imageSrc, imageVisible, setImageVisible }) => {
  return (
    <Image
      style={{ display: "none" }}
      preview={{
        visible: imageVisible,
        scaleStep: 0.2,
        src: imageSrc,
        onVisibleChange: () => {
          setImageVisible(false);
        }
      }}
    />
  );
};

export default WorkOrderSystemDetail;