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, { useRef, useState } from 'react';
import FilterTree from '../FilterTree';
import LiveSlideshow from '../LiveSlideshow';
import InfoWindow from './components/InfoWindow';
import styles from './index.less';

const Map: React.FC = () => {
  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'),
  };

  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(104.066349, 30.658842)}
        >
          {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={13}
        ref={MapRef}
        center={{ x: 104.066349, y: 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.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.listContainer} ref={listRef}>
        <div className={styles.actionBtn} onClick={expandSlider}>
          {expandStatus ? (
            <div>
              <p>收</p>
              <p>起</p>
              <DoubleRightOutlined></DoubleRightOutlined>
            </div>
          ) : (
            <div>
              <p>展</p>
              <p>开</p>

              <DoubleLeftOutlined></DoubleLeftOutlined>
            </div>
          )}
        </div>
        <div className={styles.listTitle}>实况直播</div>
        <div className={styles.live}>
          <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;
