// import BMapView from '@/components/BMapView';
import CooglMap from '@/components/CooglMap';
import EmptySpace from '@/components/EmptySpace';
import services from '@/services';
import BMapService from '@/utils/mapService';
import { cqiDisplay, getColorByIndex } from '@/utils/ui';
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
import { useRequest, useToggle } from 'ahooks';
import { ConfigProvider, Flex, Input, Popover, Space } from 'antd';
import classNames from 'classnames';
import gsap from 'gsap';
import React, {
  CSSProperties,
  Fragment,
  useEffect,
  useRef,
  useState,
} from 'react';
// import { CustomOverlay, Polygon, Polyline } from 'react-bmapgl';
import PopoverCard from '../PopoverCard';
import styles from './index.less';

/** @name 街道地图 */
const StreetMap: React.FC<{ data: { data: any; index: any } }> = ({ data }) => {
  const [state, { toggle }] = useToggle('left', 'right');
  const listRef = useRef<HTMLDivElement>(null);
  const [expandStatus, setExpandStatus] = useState(true);

  /** 是否启用百度地图 */
  const [isBmap, setIsBmap] = useState(false);
  const [areaIndexList, setAreaIndexList] = useState<
    PhysicalsignApi.AreaShapeAndIndexDto[]
  >([]); //区域和道路指标数据
  const MapRef = useRef<any>();
  const roadName = useRef<string>(''); //道路名称
  const objGroup = useRef<string>(''); //道路层级
  useEffect(() => {
    initAreaIndexList();
  }, [state, data?.data]);
  //查询区域指标列表
  const initAreaIndexList = async () => {
    let resPonse;
    let parmas = {
      physicalSignType: '1',
      indexType: '1',
      indexId: '',
      objectId: data?.data?.objectId,
      indexHierarchy: '1',
    };
    if (state === 'left') {
      //区域街道列表
      resPonse = await services.Physicalsign.getAreaShapeAndIndexInstance({
        ...parmas,
        objectHierarchy: '2',
      });
    } else {
      //道路数据列表
      resPonse = await services.Physicalsign.getAreaShapeAndIndex({
        ...parmas,
        objectHierarchy: '4',
        roadName: roadName.current, //道路名称
        objGroup: objGroup.current, //道路层级
      });
    }
    if (resPonse.code === 200) {
      setAreaIndexList(resPonse?.data);
    }
  };
  //查询道路层级接口
  const { data: roadType } = useRequest(services.Physicalsign.getRoadGroups);
  const expandSlider = () => {
    if (expandStatus === true) {
      setExpandStatus(false);
      gsap.to(listRef.current, {
        x: -352,
      });
    } else {
      setExpandStatus(true);
      gsap.to(listRef.current, {
        x: 0,
      });
    }
  };

  const renderStreetItem = (
    index: number,
    name: string,
    val: number | string,
    item: any,
  ) => {
    return (
      <Popover
        key={index}
        placement="right"
        arrow={false}
        overlayInnerStyle={{
          padding: 0,
          borderRadius: '0px 30px 30px 0px',
        }}
        // mouseEnterDelay={1}
        color="transparent"
        content={<PopoverCard data={item}></PopoverCard>}
      >
        <Flex
          className={styles.streetItem}
          align="center"
          justify="space-between"
        >
          <Space>
            <div className={styles.streetIndex}>
              {index < 9 ? '0' + (index + 1) : index + 1}
            </div>
            <div className={styles.streetName}>{name}</div>
          </Space>
          <div className={styles.streetVal}>{cqiDisplay(val)}</div>
        </Flex>
      </Popover>
    );
  };

  /**
   * @description 设置地图视野
   */
  const setViewport = () => {
    const points = areaIndexList
      .map((item) => {
        return BMapService.buildPoints(item.points);
      })
      .flat(1);
    const map = MapRef.current?.map as BMapGL.Map;
    if (map) {
      map.setViewport(points);
    }
  };
  /** @description 移动视角到能显示全部覆盖物 */
  // useEffect(() => {
  //   setTimeout(() => {
  //     setViewport();
  //   }, 500);
  // }, [MapRef.current, areaIndexList]);

  //查询道路
  const handleSearch = () => {};
  return (
    <div className={styles.container}>
      {/* {isBmap ? (
        <BMapView
          zoom={13}
          ref={MapRef}
          style={{ width: '100%', height: '110%' }}
          center={new BMapGL.Point(104.066349, 30.658842)}
        >
          {areaIndexList?.map((it) => (
            <Fragment key={it.objectId}>
              {state === 'left' ? ( //区域画面
                <Polygon
                  map={MapRef.current}
                  fillColor={getColorByIndex(Number(it?.qualitySign))}
                  strokeColor="#fff"
                  fillOpacity={0.3}
                  strokeWeight={2}
                  path={BMapService.buildPoints(it?.points)}
                />
              ) : (
                //道路画线
                <Polyline
                  path={BMapService.buildPoints(it?.points)}
                  strokeColor={getColorByIndex(Number(it?.qualitySign))}
                  strokeWeight={4}
                  map={MapRef.current}
                />
              )}

              {/* @ts-ignore */}
      {/* <CustomOverlay
                map={MapRef.current}
                position={BMapService.buildPoint(
                  Number(it?.centerX),
                  Number(it?.centerY),
                )}
              >
                <div
                  className={styles.indexMarker}
                  style={
                    BMapService.getMakerCSS(
                      Number(it?.qualitySign),
                    ) as CSSProperties
                  }
                >
                  {Number(it?.qualitySign)}
                </div>
              </CustomOverlay>
            </Fragment>
          ))}
        </BMapView>
      ) : ( */}
      <CooglMap.MapView
        zoom={13}
        ref={MapRef}
        center={{ x: 104.066349, y: 30.658842 }}
      >
        {areaIndexList?.map((it) => (
          <Fragment key={it.objectId}>
            <CooglMap.Polygon
              fillColor={getColorByIndex(Number(it?.qualitySign))}
              strokeColor="#fff"
              fillOpacity={0.3}
              strokeWidth={2}
              points={it?.points}
            />
            <CooglMap.CustomOverlay
              position={[Number(it?.centerX), Number(it?.centerY)]}
            >
              <div
                className={styles.indexMarker}
                style={
                  BMapService.getMakerCSS(
                    Number(it?.qualitySign),
                  ) as CSSProperties
                }
              >
                {Number(it?.qualitySign)}
              </div>
            </CooglMap.CustomOverlay>
          </Fragment>
        ))}
      </CooglMap.MapView>
      {/* )} */}
      {/* <div className={styles.btnGroup}>
        <div
          onClick={toggle}
          className={classNames(
            styles.btn,
            state === 'left' ? styles.btnSelected : undefined,
          )}
        >
          区域
        </div>
        <div
          onClick={toggle}
          className={classNames(
            styles.btn,
            state === 'right' ? styles.btnSelected : undefined,
          )}
        >
          道路
        </div>
      </div> */}
      <div className={styles.listContainer} ref={listRef}>
        <div className={styles.actionBtn} onClick={expandSlider}>
          {expandStatus ? (
            <div
              style={{
                textOrientation: 'upright',
                writingMode: 'vertical-rl',
              }}
            >
              收起
              <DoubleLeftOutlined></DoubleLeftOutlined>
            </div>
          ) : (
            <div
              style={{
                textOrientation: 'upright',
                writingMode: 'vertical-rl',
              }}
            >
              展开
              <DoubleRightOutlined></DoubleRightOutlined>
            </div>
          )}
        </div>
        <div className={styles.listTitle}>
          {state === 'left' ? '街道列表' : '监管道路列表'}
        </div>
        {state === 'left' && (
          <div className={styles.listContent}>
            {areaIndexList.length < 1 && <EmptySpace />}
            {areaIndexList?.map((item, index) => {
              return renderStreetItem(
                index,
                item.objectName,
                item.qualitySign,
                item,
              );
            })}
          </div>
        )}
        {state === 'right' && (
          <div>
            <Flex gap={12}>
              <ConfigProvider
                theme={{
                  components: {
                    Input: {
                      colorBgContainer: '#326FA7',
                      borderRadius: 25,
                    },
                  },
                }}
              >
                <Input
                  style={{ border: 'unset' }}
                  placeholder="输入道路名称"
                  onChange={(e) => {
                    roadName.current = e.target.value;
                  }}
                ></Input>
              </ConfigProvider>

              <div
                className={styles.searchBtn}
                onClick={() => initAreaIndexList()}
              >
                查询
              </div>
            </Flex>
            <div className={styles.subTitle}>道路类型</div>
            <Flex gap={10}>
              {roadType?.data?.map((item) => {
                return (
                  <div
                    key={item}
                    className={styles.tabItem}
                    onClick={() => {
                      objGroup.current = item;
                      initAreaIndexList();
                    }}
                  >
                    {item}
                  </div>
                );
              })}
            </Flex>
            <div className={styles.roadList}>
              {areaIndexList.length < 1 && <EmptySpace />}
              {areaIndexList?.map((item, index) => {
                return renderStreetItem(
                  index,
                  item.objectName,
                  item.qualitySign,
                  item,
                );
              })}
            </div>
          </div>
        )}
      </div>
      <div className={styles.statusBar}>
        {/* <Space>
          <Switch onChange={setIsBmap}></Switch>
          <div>启用百度地图</div>
        </Space> */}
        <Space>
          <div className={styles.mark} style={{ backgroundColor: '#F24F4F' }} />
          <div>应急态</div>
        </Space>
        <Space>
          <div className={styles.mark} style={{ backgroundColor: '#FFA81A' }} />
          <div>预警态 &lt;85</div>
        </Space>
        <Space>
          <div className={styles.mark} style={{ backgroundColor: '#00B9FF' }} />
          <div>正常态 85-95</div>
        </Space>
        <Space>
          <div className={styles.mark} style={{ backgroundColor: '#57EF58' }} />
          <div>良好态 &gt;95</div>
        </Space>
      </div>
    </div>
  );
};

export default StreetMap;
