import LabelImgText from '@/components/LabelImgText';
import { qlZwUrl } from '@/constants';
import React from 'react';
import styles from './index.less';
interface PropsType {
  data: DistrictAPI.RealtimeIndexDTO;
}
/** @name 气泡卡片 */
const PopoverCardKnotty: React.FC<PropsType> = (props) => {
  const { data, projectList } = props;
  console.log(data);
  const getMap = (data: string) => {
    try {
      return JSON.parse(data);
    } catch (error) {
      console.log(error);

      return {};
    }
  };
  const valueStyle = {
    color: '#fff',
    fontSize: 16,
  };
  const labelStyle = {
    color: '#CBEDFF',
    fontSize: 16,
  };

  return (
    <div className={styles.container}>
      <div className={styles.topContent}>
        <img src={`${qlZwUrl}${data?.photos}`} alt="" className={styles.img} />
        <div className={styles.tRwarp}>
          <div className={styles.title} title={data?.standardEventTitle}>
            {data?.dictgnlxName || '--'}
          </div>
          <div style={{marginTop:8,marginBottom:10}}>
            <span className={styles.tag1}>{data?.dictjglxName}</span>
          </div>
          <LabelImgText
          label={'所属区域'}
          value={data?.regionName || '--'}
          valueStyle={valueStyle}
          labelStyle={labelStyle}
        />
        <LabelImgText
          label={'设施位置：'}
          value={data?.descroad || '--'}
          valueStyle={valueStyle}
          labelStyle={labelStyle}
        />
        <LabelImgText
          label={'责任单位：'}
          value={data?.descgldw || '--'}
          valueStyle={valueStyle}
          labelStyle={labelStyle}
        />
        </div>
      </div>

    
      <div className={styles.content}>
        <div>{data?.status}</div>
        <div className={styles.warp}>
          {projectList?.map((item: any, index: number) => {
            return (
              <div style={{ marginBottom: 15 }} key={index}>
                <div style={{ marginBottom: 10, fontSize: 20 }}>
                  {item?.projectName}
                </div>
                <div className={styles.pw}>
                  {item?.reportObjectList?.map((i: any, idx: number) => {
                    return (
                      <div className={styles.item} key={idx}>
                        <div style={{ color: 'rgb(202, 223, 252)' }}>
                          {i?.reportObject}
                          <span
                            className={styles.tag}
                            style={{
                              color: i.normalFlag === '0' ? '#47ffa0' : 'red',
                            }}
                          >
                            {i.normalFlag === '0' ? '正常' : '异常'}
                          </span>
                        </div>
                        <div style={{ marginTop: 3 }}>
                          {Object.entries(getMap(i?.monitoringValue))?.map(
                            (it: any) => {
                              return (
                                <div>
                                  {it[0]}:{it[1]}
                                </div>
                              );
                            },
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <img
        src={require('@/assets/images/closeBtn.png')}
        alt=""
        className={styles.close}
        style={{ width: 28, height: 28 }}
        data-event-key="close"
      />
    </div>
  );
};

export default PopoverCardKnotty;
