import React, { useCallback, useEffect, useState } from 'react';
import './ShYj.less';
import appconsts from '../../../../models/appconsts';
import { useDispatch } from 'react-redux';
import apiurl from '../../../../models/apiurl';
import { httpget } from '../../../../utils/request';
import DpAlert from '../../../../layouts/mui/DpAlert';
import moment from 'moment';
import { HDRealPromise } from '../../../../models/_/real';
import { InfoPopNames } from '../../InfoPops';
import { hdyjLatestClosed } from '../../../../models/_/hdyj';
import config from '../../../../config';


function Item({ data, viewInfo, flyTo }) {
  const tm1 = moment(data.exptm).format('YYYY-MM-DD HH:mm');
  const tm2 = moment(data.tm).format('YYYY-MM-DD HH:mm');

  const rz = data.rz;
  const brz = data[appconsts.stWarnLevelKey[data.level]];
  const arz = typeof brz === 'number' ? (rz - brz).toFixed(2) : '-';

  return (
    <div className="item">
      <div className={`header level${data.level}`}>
      </div>
      <div className="content">
        <div className="main">
          <div className="title">
            <span style={{ cursor: 'pointer' }} onClick={() => flyTo(data)}>{data.stnm}</span>
          </div>
          <div className="span"></div>
          <div className="extra">{appconsts.stWarnStatus[data.status]}</div>
        </div>
        <div className="desc">
          <span>{`报警水位${rz}m，测站${appconsts.stWarnLevel[data.level]}为${brz ?? '-'}m，超${arz || '-'}m`}</span>
        </div>
        <div className="tail">
          <span>报警: {tm1}</span>
          {
            tm2 !== tm1 ? (
              <span>更新: {tm2}</span>
            ) : null
          }
          <a style={{ cursor: 'pointer' }} onClick={() => viewInfo(data)}>处理</a>
        </div>
      </div>
    </div>
  );
}


function Hdyj({ data }) {

  const [hisdata, sethisdata] = useState();

  useEffect(() => {
    if (!data) {
      return;
    }

    if (data.length === 0) {
      hdyjLatestClosed().then(data => {
        sethisdata(data || [])
      });
    }
  }, [data?.length]);

  const dispatch = useDispatch();
  const viewInfo = useCallback((record) => {
    dispatch.runtime.setInfoDlg({ layerId: 'StWarnRecord', properties: record })
  }, [dispatch]);


  const flyTo = useCallback(async ({ stcd, source }) => {
    const list = await HDRealPromise.get() || [];
    const record = list.find(o => o.stcd === stcd) || {};
    const { lgtd, lttd } = record;
    if (lgtd && lttd) {
      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd],
        zoom: 15,
        pitch: config.poiPitch,
      });
    }
  }, [dispatch]);

  const showdata = hisdata?.length > 0 ? hisdata : (data || []);

  return (
    <div className="dppanel-shyj">
      {
        hisdata?.length > 0 && <DpAlert severity="info">当前无预警，显示最新10条已关闭预警</DpAlert>
      }
      {
        showdata.map(o => (
          <Item key={o.id} flyTo={flyTo} viewInfo={viewInfo} data={o} />
        ))
      }
    </div>
  )
}

export default React.memo(Hdyj);