import myVideo1 from '@/assets/media/movie.mp4';

// import BMapView from '@/components/BMapView';
import CooglMap from '@/components/CooglMap';
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
import { Flex, Space } from 'antd';
import gsap from 'gsap';
import React, { useEffect, useRef, useState } from 'react';
import { Marker } from 'react-bmapgl';
import FilterTree from '../FilterTree';
import LiveSlideshow from '../LiveSlideshow';
import InfoWindow from './components/InfoWindow';
import styles from './index.less';
import services from '@/services';
import EmptySpace from '@/components/EmptySpace';

interface MapProps {
  objectId: string;
}

const Map: React.FC<MapProps> = (props) => {
  const { objectId } = props;

  const [currentObjectData, setCurrentObjectData] = useState<any>({})

  const [expandStatus, setExpandStatus] = useState(true);
  const listRef = useRef<HTMLDivElement>(null);
  const MapRef = useRef<any>();
  const [selected, setSelected] = useState<any>();
  /** 是否启用百度地图 */
  const [isBmap, setIsBmap] = useState(false);
  const expandSlider = () => {
    if (expandStatus === true) {
      setExpandStatus(false);
      gsap.to(listRef.current, {
        x: 275,
      });
    } else {
      setExpandStatus(true);
      gsap.to(listRef.current, {
        x: 0,
      });
    }
  };
  const pList = [
    {
      l: [103.87453593938976, 30.746739203687397],
      type: 1,
    },
    {
      l: [103.9541617397942, 30.735316951515046],
      type: 2,
    },
    {
      l: [103.87424848162657, 30.72240319350852],
      type: 3,
    },
    {
      l: [103.92455359018533, 30.71569728382409],
      type: 4,
    },
    {
      l: [103.87453593938976, 30.71569728382409],
      type: 5,
    },
    {
      l: [104.0033170173002, 30.69681886124258],
      type: 6,
    },
    {
      l: [103.89954476478755, 30.736558566919108],
      type: 7,
    },
  ];

  const iconList = {
    1: require('@/assets/images/keyArea/risk1.png'),
    2: require('@/assets/images/keyArea/risk2.png'),
    3: require('@/assets/images/keyArea/risk3.png'),
    4: require('@/assets/images/keyArea/q3.png'),
    5: require('@/assets/images/keyArea/q4.png'),
    6: require('@/assets/images/keyArea/phone.png'),
    7: require('@/assets/images/keyArea/car.png'),
    8: require('@/assets/images/keyArea/people.png'),
  };

  const getObjectPolygon = async () => {
    const params = {
      physicalSignType: 1,
      objectHierarchy: 19,
      objectId
    }
    const res = await services.Physicalsign.getObjectPolygon(params)
    if (res.code === 200) {
      if (res.data?.length) {
        console.log(res.data)
        setCurrentObjectData(res.data[0])
      }
    }
  }

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

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

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

  return (
    <div className={styles.container}>
      {/* {isBmap ? (
        <BMapView
          zoom={13}
          ref={MapRef}
          onClick={(e) => console.log(e)}
          style={{ width: '100%', height: '110%' }}
          center={new BMapGL.Point(currentObjectData?.centerX, currentObjectData?.centerY)}
        >
          {pList.map((item, index) => {
            return (
              <Marker
                key={index}
                onClick={() => {
                  setSelected(item);
                }}
                position={BMapService.buildPoint(item.l[0], item.l[1])}
                icon={
                  new BMapGL.Icon(
                    iconList[item.type] as string,
                    new BMapGL.Size(30, 30),
                  )
                }
              ></Marker>
            );
          })}
          {selected && (
            <BMapInfoWindow
              data={selected}
              onClose={() => {
                setSelected(undefined);
              }}
            ></BMapInfoWindow>
          )}
        </BMapView>
      ) : (
        <CooglMap.MapView
          zoom={0.2}
          ref={MapRef}
          center={{ x: currentObjectData?.centerX || 104.066349, y: currentObjectData?.centerY || 30.658842 }}
        >
          {pList.map((item, index) => {
            return (
              <CooglMap.Marker
                key={index}
                onClick={() => {
                  setSelected(item);
                }}
                position={item.l}
                icon={(iconList as any)[index + 1]}
              ></CooglMap.Marker>
            );
          })}
          {selected && (
            <InfoWindow
              data={selected}
              onClose={() => {
                setSelected(undefined);
              }}
            ></InfoWindow>
          )}
          <CooglMap.Polygon
            fillColor="rgba(87, 239, 88, 0.1)"
            strokeColor="#57EF58"
            points={currentObjectData?.points}
            strokeWidth={6}
            fillOpacity={0.2}
          ></CooglMap.Polygon>
        </CooglMap.MapView>
      )}

      <div className={styles.leftController}>
        <FilterTree></FilterTree>
      </div>
      <div className={styles.bottomCard}>
        <LiveSlideshow></LiveSlideshow>
      </div>
      <div className={styles.onDutyWrap}>
        {/* <Space style={{ marginRight: 20 }}>
          <Switch onChange={setIsBmap}></Switch>
          <div>启用百度地图 </div>
        </Space>
        {/* <Space>
          <div>值班元</div>
          <div>张三 15885632365</div>
          <Space className={styles.actionWrap}>
            <img
              src={require('@/assets/images/keyArea/voice.png')}
              alt=""
            ></img>
            <img
              src={require('@/assets/images/keyArea/video.png')}
              alt=""
            ></img>
          </Space>
        </Space> */}
      {/* </div> */}
      <div className={styles.bottomCard}>
        <LiveSlideshow eventList={eventList}></LiveSlideshow>
      </div>
      <CooglMap.MapView
          zoom={0.2}
          ref={MapRef}
          center={{ x: currentObjectData?.centerX || 104.066349, y: currentObjectData?.centerY || 30.658842 }}
        >
          {eventList?.map((item:any, index) => {
            return (
              <CooglMap.Marker
                key={index}
                onClick={() => {
                  setSelected({...item, type: 2});
                }}
                position={[item?.lon, item?.lat]}
                icon={(iconList as any)[5]}
              ></CooglMap.Marker>
            );
          })}
          {selected && (
            <InfoWindow
              data={selected}
              onClose={() => {
                setSelected(undefined);
              }}
            ></InfoWindow>
          )}
          <CooglMap.Polygon
            fillColor="rgba(87, 239, 88, 0.1)"
            strokeColor="#57EF58"
            points={currentObjectData?.points}
            strokeWidth={6}
            fillOpacity={0.2}
          ></CooglMap.Polygon>
        </CooglMap.MapView>
      <div className={styles.listContainer} ref={listRef}>
        <div className={styles.actionBtn} onClick={expandSlider}>
          {expandStatus ? (
            <div style={{ paddingTop: 15 }}>
              <p>收</p>
              <p>起</p>
              {/* <DoubleRightOutlined></DoubleRightOutlined> */}
            </div>
          ) : (
            <div style={{ paddingTop: 15 }}>
              <p>展</p>
              <p>开</p>

              {/* <DoubleLeftOutlined></DoubleLeftOutlined> */}
            </div>
          )}
        </div>
        <div className={styles.listTitle}>实况直播</div>
        <div className={styles.live}>
          <EmptySpace describe="暂无数据" style={{ padding: '10% 0' }} />
          {/* <div>
            <video autoPlay width={230} height={125}>
              <source src={myVideo1} type="video/mp4"></source>
            </video>
          </div>
          <div>川大路152号</div> */}
        </div>
        {/* <div>
          <div className={styles.subTitle}>移动AI感知源</div>
          <div className={styles.listItem}>
            <div>公交车-川A12345</div>
            <Flex className={styles.itemAction} gap={20}>
              <img
                src={require('@/assets/images/keyArea/icon1.png')}
                alt=""
              ></img>
              <img
                src={require('@/assets/images/keyArea/icon2.png')}
                alt=""
              ></img>
              <img
                src={require('@/assets/images/keyArea/icon3.png')}
                alt=""
              ></img>
              <img
                src={require('@/assets/images/keyArea/icon4.png')}
                alt=""
              ></img>
            </Flex>
          </div>
          <div className={styles.listItem}>
            <div>公交车-川A12345</div>
            <Flex className={styles.itemAction} gap={20}>
              <img
                src={require('@/assets/images/keyArea/icon1.png')}
                alt=""
              ></img>
              <img
                src={require('@/assets/images/keyArea/icon2.png')}
                alt=""
              ></img>
              <img
                src={require('@/assets/images/keyArea/icon3.png')}
                alt=""
              ></img>
              <img
                src={require('@/assets/images/keyArea/icon4.png')}
                alt=""
              ></img>
            </Flex>
          </div>
          <div className={styles.subTitle}>固定感知源</div>
          <div className={styles.listItem}>
            <div>川大路129号</div>
            <Flex className={styles.itemAction} gap={20}>
              <img
                src={require('@/assets/images/keyArea/icon1.png')}
                alt=""
              ></img>
              <img
                src={require('@/assets/images/keyArea/icon2.png')}
                alt=""
              ></img>
              <img
                src={require('@/assets/images/keyArea/icon3.png')}
                alt=""
              ></img>
              <img
                src={require('@/assets/images/keyArea/icon4.png')}
                alt=""
              ></img>
            </Flex>
          </div>
        </div> */}
      </div>
    </div>
  );
};

export default Map;
