import { Flex } from 'antd';
import React, { useEffect, useState } from 'react';
import AreaCQI from './AreaCQI';
import styles from './index.less';
import SidebarMenu from './SidebarMenu';
import UrbanProblem from './UrbanProblem';
import services from '@/services';

/** @name 重点区域 */
const KeyAreaDetail: React.FC<{ objectId: string, cqi: string }> = (props) => {
  const [active, setActive] = useState(0);
  const { objectId, cqi } = props
  console.log('KeyAreaDetail', objectId)

  const [eventList, setEventList] = useState([])

  const getEventListData = async () => {
    const params = {
      eventStatus: '处置中',
      keyAreaId: objectId, // objectId
      dateType: 'monthly', // dateType
      // limit: 10
    }
    const res = await services.Physicalsign.getNormalEventListForKeyAreas(params)
    if (res.code === 200) {
      console.log('getTimesData', res.data)
      setEventList(res.data)
    }
  }

  useEffect(() => {
    getEventListData()
  }, [])


  return (
    <Flex className={styles.container} gap={8}>
      <SidebarMenu
        menuClickHandle={function (params: any): void {
          setActive(params);
        }}
        active={active}
        cqi={cqi}
        eventNum={eventList?.length}
      ></SidebarMenu>
      {active === 0 && <AreaCQI objectId={objectId}></AreaCQI>}
      {active === 1 && <UrbanProblem objectId={objectId}></UrbanProblem>}
    </Flex>
  );
};

export default KeyAreaDetail;
