import { Descriptions, Divider, Modal } from "antd";
import dayjs from "dayjs";
import { useEffect, useState } from "react";
import VideoIcon from "zy-react-library/components/Icon/VideoIcon";
import PreviewImg from "zy-react-library/components/PreviewImg";
import Video from "zy-react-library/components/Video";
import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile/gwj";
import UseGetFile from "zy-react-library/hooks/useGetFile";
import { getLabelName } from "zy-react-library/utils";
import { SENSOR_ATTR_OPTIONS } from "~/enumerate/constant";
import { renderAlarmCurrentValue } from "~/utils/alarm";
import BaiduMap from "../../BaiduMap";

function DetailModal(props) {
  const [detail, setDetail] = useState({});
  const [videoModalOpen, setVideoModalOpen] = useState(false);
  const [disposalFiles, setDisposalFiles] = useState([]);
  const { loading: getFileLoading, getFile } = UseGetFile();

  const getImageFun = async () => {
    const disposalFiles = props.fireRegionId
      ? await getFile({
          eqType: UPLOAD_FILE_TYPE_ENUM["800"],
          eqForeignKey: props.alarmRecordId,
        })
      : [];
    setDisposalFiles(disposalFiles);
  };
  useEffect(() => {
    if (!props.open) {
      return;
    }

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

  const formatTime = (value) => {
    if (!value) {
      return "-";
    }

    const time = dayjs(value);
    return time.isValid() ? time.format("YYYY-MM-DD HH:mm:ss") : value;
  };

  return (
    <Modal
      destroyOnClose
      open={props.open}
      title="查看"
      onCancel={props.onCancel}
      footer={null}
      maskClosable={false}
      width={1200}
      confirmLoading={props.confirmLoading || getFileLoading}
    >
      <Divider orientation="left">报警信息</Divider>
      <Descriptions column={2} bordered labelStyle={{ width: 200 }}>
        <Descriptions.Item label="传感器编码">{detail.sensorCode || "-"}</Descriptions.Item>
        <Descriptions.Item label="传感器名称">{detail.sensorName || "-"}</Descriptions.Item>
        <Descriptions.Item label="传感器类型">{detail.sensorTypeName || "-"}</Descriptions.Item>
        <Descriptions.Item label="传感器属性">
          {getLabelName({ status: detail.sensorAttr, list: SENSOR_ATTR_OPTIONS }) || "-"}
        </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="报警时间">{formatTime(detail.alarmTime)}</Descriptions.Item>
        <Descriptions.Item label="报警描述" span={2}>
          {detail.alarmDesc || detail.deviceSourceDesc || "-"}
        </Descriptions.Item>
        <Descriptions.Item label="报警位置" span={2}>
          {detail.longitude && detail.latitude
            ? (
                <BaiduMap
                  longitude={detail.longitude}
                  latitude={detail.latitude}
                  style={{
                    border: "1px solid #f0f0f0",
                    borderRadius: 4,
                    overflow: "hidden",
                  }}
                />
              )
            : "暂无定位信息"}
        </Descriptions.Item>
      </Descriptions>

      {props.type === 1 && (
        <div>
          <Divider orientation="left">报警处置</Divider>
          <Descriptions column={2} bordered labelStyle={{ width: 200 }}>
            <Descriptions.Item label="报警确认人">{detail.assignUserName}</Descriptions.Item>
            <Descriptions.Item label="确认时间">{detail.assignTime || "-"}</Descriptions.Item>
            <Descriptions.Item label="报警类型">{detail.alarmTypeName || detail.alarmType || "-"}</Descriptions.Item>
            <Descriptions.Item label="报警级别">{detail.alarmLevelName || detail.alarmLevel || "-"}</Descriptions.Item>
            <Descriptions.Item label="处置人">{detail.disposeUserName || "-"}</Descriptions.Item>
          </Descriptions>

          <Divider orientation="left">处置结果</Divider>
          <Descriptions column={2} bordered labelStyle={{ width: 200 }}>
            <Descriptions.Item label="处置人">{detail.disposeUserName || "-"}</Descriptions.Item>
            <Descriptions.Item label="处置时间">{detail.disposeTime || "-"}</Descriptions.Item>
            <Descriptions.Item label="处置结果" span={2}>{detail.disposeResult || "-"}</Descriptions.Item>
            <Descriptions.Item label="处置图片" span={2}>
              {" "}
              <PreviewImg files={disposalFiles} />
            </Descriptions.Item>
            <Descriptions.Item label="处置视频" span={2}>
              {detail.videoUrl
                ? (
                    <VideoIcon
                      onClick={() => {
                        setVideoModalOpen(true);
                      }}
                    />
                  )
                : "-"}
            </Descriptions.Item>
          </Descriptions>
        </div>
      )}

      {videoModalOpen && (
        <Video
          visible={videoModalOpen}
          source={detail.videoUrl}
          onCancel={() => setVideoModalOpen(false)}
          title="处置视频"
        />
      )}
    </Modal>
  );
}

export default DetailModal;
