import Tabs from '@/components/Tabs';
import { useState } from 'react';
import DistrictMap from './DistrictMap';
import EmphasisAreaMap from './EmphasisAreaMap';
import styles from './index.less';
const MapContainer = () => {
  const [topKey, setTopKey] = useState('1');
  const botItems = [
    // {
    //   key: '1',
    //   img: require('@/assets/images/cssktab.png'),
    //   onclick: () => {},
    // },
    {
      key: '2',
      img: require('@/assets/images/aqyztTab.png'),
      onclick: () => {
        // history.push('/securityServiceOverview');
        window.open(
          `${window.location.origin}/cd-comprehensive/securityServiceOverview`,
          '_blank',
        );
      },
    },
    {
      key: '3',
      img: require('@/assets/images/zhddTab.png'),
      onclick: () => {
        window.open('https://10.1.174.34:13000');
      },
    },
  ];
  const Map: Record<string, JSX.Element> = {
    '1': <DistrictMap />,
    '2': <EmphasisAreaMap />,
  };
  return (
    <div className={styles.container}>
      <div className={styles.topTabsWarp}>
        <Tabs
          // size="large"
          // centered
          defaultValue="1"
          items={[
            { key: '1', label: '区（市）县' },
            { key: '2', label: '重点区域' },
          ]}
          onChange={(e) => {
            setTopKey(e);
          }}
        />
      </div>
      <div className={styles.mapContent}>{Map[topKey]}</div>
      <div className={styles.botTabWarp}>
        <div>
          {botItems?.map((item) => {
            return (
              <img
                src={item.img}
                alt=""
                key={item.key}
                onClick={() => {
                  item?.onclick();
                }}
                style={{ marginRight: 10 }}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
};
export default MapContainer;
