import clsx from 'clsx';
import React, { useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ZhenDataPromise } from '../../../../models/_/adcd';
import { DrpRealPromise } from '../../../../models/_/real';
import useRefresh from '../../../../utils/useRefresh';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import AreaDrpChart from './chart';

export default function AreaDrp({ style }) {
  const t = useRefresh(60 * 1000);
  const { data: adcdList } = useRequest(ZhenDataPromise.get);
  const { data: drpList } = useRequest(DrpRealPromise.get, t);
  const areaDrpTmType = useSelector(s => s.overallview.areaDrpTmType);
  const dispatch = useDispatch();

  const data = useMemo(() => {
    if (!adcdList) {
      return [];
    }

    const resMap = {};
    adcdList.forEach(({ ADCD, NAME }) => {
      resMap[ADCD.substr(0, 9)] = {
        ADCD,
        NAME,
        drp: 0,
        cnt: 0,
        av: 0,
      }
    });

    drpList?.forEach(o => {
      const adcd = o?.adcd?.substr(0, 9);
      if (resMap[adcd]) {
        resMap[adcd].drp += o[areaDrpTmType] || 0;
        resMap[adcd].cnt += 1;
      }
    });

    const ret = Object.values(resMap);
    ret.forEach(o => {
      if (o.cnt) {
        o.av = parseFloat((o.drp / o.cnt).toFixed(1));
      }
    })

    return Object.values(resMap);
  }, [adcdList, drpList, areaDrpTmType]);
  
  return (
    <PanelBox
      style={style}
      title="供水覆盖率"
      color="blue"
    >
      <AreaDrpChart data={data} />
    </PanelBox>
  )
}