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 config from '../../../../config';
import DpAlert from '../../../../layouts/mui/DpAlert';
import { DcpjPromise } from '../../../../models/_/dcpj';

function Item({ data, viewInfo }) {
  return (
    <div className="item">
      <div className={`header alert${data.warngradeid === 5 ? 1 : 2}`}>
      </div>
      <div className="content">
        <div className="main">
          <div className="title" onClick={() => viewInfo(data)}>{data.adnm || '--'}</div>
          <div className="span"></div>
          <div className="extra">{appconsts.warnStatus_TYPE[data.warnstatusid]}</div>
        </div>
        <div className="desc">
          <span>{data.warndesc}</span>
        </div>
        <div className="tail">
          <span>{data.warnstm.substr(0, 'yyyy-mm-dd hh:mm'.length)}</span>
          <a onClick={() => viewInfo(data, 'danad')} style={{ textAlign: 'right' }}>危险区</a>
        </div>
      </div>
    </div>
  );
}


function ShYj({ data }) {

  const [hisdata, sethisdata] = useState();

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

    if (data.length === 0) {
      httpget(apiurl.shyj.find, { adcd: config.SHYJ_ADCD, page: 1, size: 10, warnstatusid: 30 })
        .then(({ data }) => sethisdata(data.list || []))
    }
  }, [data?.length]);

  const dispatch = useDispatch();
  const viewInfo = useCallback((record, type) => {
    if (type === 'danad') {
      const adcd = record?.adcd?.replace(/([0]{3})*$/, '');
      if (adcd) {
        Promise.all([
          DcpjPromise.danad.get(),
          DcpjPromise.transfer.get(),
          DcpjPromise.placement.get(),
        ]).then(([danads, transfers, placements]) => {
          const highlights = [
            ...((danads || []).filter(o => o?.ADCD?.startsWith(adcd)).map(o => ({ ...o, type: 'danad' }))),
            ...((transfers || []).filter(o => o?.ADCD?.startsWith(adcd)).map(o => ({ ...o, type: 'transfer' }))),
            ...((placements || []).filter(o => o?.ADCD?.startsWith(adcd)).map(o => ({ ...o, type: 'placement' })))
          ];
          if (highlights.length > 0) {
            dispatch.map.openHighlights({
              title: `${record.adnm}危险区/转移路线/安置点`,
              records: highlights.map(o => ({
                id: o.PID,
                adcd: o.ADCD,
                lgtd: o.lgtd,
                lttd: o.lttd,
                name: o.NAME,
                type: o.type,
              }))
            })
          }
          dispatch.map.highlightFeatures(highlights.map(o => ({
            type: o.type,
            props: o,
            fill: 'rgb(239, 164, 114)',
            stroke: o.type === 'danad' ? 'rgb(239, 164, 114)' : '#f6f082'
          })));
        });
      }
    } else {
      dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: record })
    }
  }, [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.warnid} viewInfo={viewInfo} data={o} />
        ))
      }
    </div>
  )
}

export default React.memo(ShYj);