import { ConfigProvider, Select } from 'antd';
import { useEffect, useState } from 'react';

import services from '@/services';
import { useModel, useRequest } from '@umijs/max';
import RealtimeCQI from '../../components/RealtimeCQI';
import RightBox from './RightBox';
import StreetMap from './StreetMap';
import styles from './index.less';

interface PropsType {
  data: any;
  indexs: any;
  modalDispatch: any;
}
/** @name 区域指数弹窗 */
const DistrictIndex: React.FC<PropsType> = (props) => {
  const { areaListDto } = useModel('regionalIndex', (store) => ({
    areaListDto: store.areaListDto,
  }));

  const [data, setData] = useState<any>({
    data: props.data,
    indexs: props.indexs,
  });
  const { data: areaOptions } = useRequest(
    services.Physicalsign.getIndicatorGapAnalysis,
  );
  const { run: getIndexs } = useRequest(
    services.Physicalsign.getComparisonIndexInstance,
    {
      manual: true,
      onSuccess: (res) => {
        setData({
          data: areaListDto?.find(
            (item) => item.objectId === res?.currentIndex?.objectId,
          ),
          indexs: res?.currentIndex,
        });
      },
    },
  );
  const headerEl = (
    <div style={{ marginLeft: 50 }}>
      <ConfigProvider
        theme={{
          token: {
            colorBorder: 'transparent',
          },
          components: {
            Select: {
              selectorBg: 'transparent',
            },
          },
        }}
      >
        <Select
          style={{ width: 157, height: 40 }}
          options={
            areaOptions?.items?.filter((item) => item.label !== '成都市') || []
          }
          placeholder="选择区域"
          labelInValue
          onChange={(e) => {
            console.log(e);
            if (e) {
              getIndexs({
                physicalSignType: 1,
                indexType: 1,
                indexHierarchy: '1,2',
                objectId: e.value,
              });
              // dispatch.setOptions({ title: e.lable });
            }
          }}
        />
      </ConfigProvider>
    </div>
  );

  useEffect(() => {
    props.modalDispatch.setOptions({
      title: data?.data?.objectName + '运行情况',
      headerLeft: () => {
        return headerEl;
      },
    });
  }, [areaOptions, data]);

  return (
    <div className={styles.container}>
      <RealtimeCQI objectId={data?.data?.objectId}></RealtimeCQI>
      <StreetMap data={data}></StreetMap>
      <RightBox objectId={data?.data?.objectId}></RightBox>
    </div>
  );
};

export default DistrictIndex;
