import { Descriptions, Divider, Form, Modal, Select } from "antd";
import { useEffect, useState } from "react";
import PersonnelSelect from "zy-react-library/components/Select/Personnel/Gwj";
import { DISPOSAL_STATIS } from "~/enumerate/constant";
import { renderAlarmCurrentValue } from "~/utils/alarm";

function DetailModal(props) {
  const [form] = Form.useForm();
  const [detail, setDetail] = useState(null);

  useEffect(() => {
    if (!props.open) {
      return;
    }
    props.alarmRecordInfo({ id: props.currentId }).then((res) => {
      if (res?.success) {
        setDetail(res.data || {});
      }
    });
  }, [props.open, props.currentId, props.alarmRecordInfo]);

  const handleSubmit = async (values) => {
    if (props.isBatch) {
      await props.alarmBatchAssign({
        ids: props.alarmIds,
        disposeUserId: values.disposeUserId,
      });
    } else {
      await props.alarmAssign({
        id: props.alarmId,
        disposeUserId: values.disposeUserId,
      });
    }
    props.history.goBack();
  };

  return (
    <Modal
      destroyOnClose
      open={props.open}
      title="查看"
      onCancel={props.onCancel}
      footer={null}
      maskClosable={false}
      width={720}
    >
      <Divider orientation="left">报警信息</Divider>
      {detail && (
        <Descriptions column={2} bordered>
          <Descriptions.Item label="传感器编码">{detail.sensorCode || "-"}</Descriptions.Item>
          <Descriptions.Item label="传感器名称">{detail.sensorName || "-"}</Descriptions.Item>
          <Descriptions.Item label="传感器类型">{detail.sensorTypeName || "-"}</Descriptions.Item>
          <Descriptions.Item label="传感器属性">{detail.sensorAttrName || "-"}</Descriptions.Item>
          <Descriptions.Item label="告警值">{renderAlarmCurrentValue(detail)}</Descriptions.Item>
          <Descriptions.Item label="计量单位">{detail.unitName || "-"}</Descriptions.Item>
          <Descriptions.Item label="高高报警阈值">{detail.thresholdHighHigh || "-"}</Descriptions.Item>
          <Descriptions.Item label="高报警阈值">{detail.thresholdHigh || "-"}</Descriptions.Item>
          <Descriptions.Item label="低低报警阈值">{detail.thresholdLowLow || "-"}</Descriptions.Item>
          <Descriptions.Item label="低报警阈值">{detail.thresholdLow || "-"}</Descriptions.Item>
          <Descriptions.Item label="报警编号">{detail.alarmNo || "-"}</Descriptions.Item>
          <Descriptions.Item label="报警时间">{detail.alarmTime || "-"}</Descriptions.Item>
          <Descriptions.Item label="报警描述" span={2}>
            {detail.deviceSourceDesc || "-"}
          </Descriptions.Item>
          <Descriptions.Item label="报警位置" span={2}>{detail.disposeRemark || "-"}</Descriptions.Item>
        </Descriptions>
      )}
      <Divider orientation="left">处置分配</Divider>
      <Form form={form} layout="vertical" onFinish={handleSubmit}>
        <Form.Item
          label="报警处置"
          name="disposeUserId"
          rules={[{ required: true, message: "请选择报警处置" }]}
        >
          <Select
            options={DISPOSAL_STATIS.map(item => ({
              value: item.bianma,
              label: item.name,
            }))}
            placeholder="请选择报警处置"
            disabled
          />
        </Form.Item>
        <Form.Item
          label="报警类型"
          name="disposeUserId"
          rules={[{ required: true, message: "请选择报警类型" }]}
        >
          <Select
            options={DISPOSAL_STATIS.map(item => ({
              value: item.bianma,
              label: item.name,
            }))}
            placeholder="请选择报警类型"
            disabled
          />
        </Form.Item>
        <Form.Item
          label="报警级别"
          name="disposeUserId"
          rules={[{ required: true, message: "请选择报警级别" }]}
        >
          <Select
            options={DISPOSAL_STATIS.map(item => ({
              value: item.bianma,
              label: item.name,
            }))}
            placeholder="请选择报警级别"
            disabled
          />
        </Form.Item>
        <Form.Item
          label="处置人"
          name="disposeUserId"
          rules={[{ required: true, message: "请选择处置人" }]}
        >
          <PersonnelSelect placeholder="请选择处置人" />
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default DetailModal;
