/** @format */

import React from 'react';

import Modal from '../../../baseComponents/Modal';
import RelationWarningChart from './RelationWarningChart';
import { Container, SubTitle } from './styled.subModal';

/**
 * @description 房屋列表
 */

interface SubModalProps {
  item: Record<string, any> | null;
  visible: boolean;
  refreshKey: number;
}

const SubModal = (props: SubModalProps) => {
  const { item, refreshKey, ...otherProps } = props;

  if (!item) {
    return null;
  }

  return (
    <Modal {...otherProps} style={{ left: 200 }} key={refreshKey}>
      <Container>
        <SubTitle>历史关联预警</SubTitle>
        <RelationWarningChart data={item.relationWarningList} />
        <SubTitle className="mt24">关联预警记录</SubTitle>
        <div className="warning-list">
          {item.warningList && item.warningList.length
            ? item.warningList.map(
                (item: Record<string, any>, index: number) => (
                  <div
                    key={index}
                    className={`warning-item ${index === 0 ? 'active' : ''}`}
                  >
                    <img
                      src="https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/46ecdb9a-61a1-458e-98bc-47be0a5510a8.png"
                      alt="info"
                    />
                    <span className="type">{item.type}</span>
                    <span className="date">{item.date}</span>
                  </div>
                ),
              )
            : null}
        </div>
      </Container>
    </Modal>
  );
};

export default SubModal;