import { Fragment } from "react";
import { Dropdown } from "antd";
import NavBarButton from "./NavBarButton";
import funcLibrary from "@/assets/方法库.png";
// import funcLibrary from "@/assets/方法库2.png";
import threePoles from "@/assets/三极联动.png";
import dataShare from "@/assets/数据共享.jpg";
import onlineDecisionSupport from "@/assets/在线决策支持.png";
// import onlineDecisionSupport from "@/assets/在线决策支持2.png";
import styles from "./index.module.less";

const itemsTwo = [
  {
    key: "1",
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="http://casearthpoles.tpdc.ac.cn/zh-hans/data/analyze/list"
      >
        简介
      </a>
    ),
  },
  {
    key: "2",
    label: (
      <a target="_blank" rel="noopener noreferrer" href="/random_forest">
        随机森林方法在线计算案例
      </a>
    ),
  },
  {
    key: "3",
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="/show/map/climateReconDataAssim"
      >
        过去千年气候重建数据同化
      </a>
    ),
  },
];
const itemsThree = [
  {
    key: "1",
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="http://project.lasg.ac.cn/FGOALS_f2-S2S/index.php?Var=Arctic-sea-ice"
      >
        北极海冰预报
      </a>
    ),
  },
  {
    key: "2",
    label: (
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="http://arcticroute.tpdc.ac.cn/"
      >
        北极航线智能规划
      </a>
    ),
  },
];
const itemsFour = [
  {
    key: "1",
    label: (
      <a target="_blank" rel="noopener noreferrer" href="/show/map/1">
        两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温
      </a>
    ),
  },
  {
    key: "2",
    label: (
      <a target="_blank" rel="noopener noreferrer" href="/show/map/2">
        两极协同—南极涛动有效调节青藏高原降水和加热
      </a>
    ),
  },
  {
    key: "3",
    label: (
      <a target="_blank" rel="noopener noreferrer" href="/show/map/3">
        两极协同—连接南极和北极的热带大西洋经向模的媒介作用
      </a>
    ),
  },
  {
    key: "4",
    label: (
      <a target="_blank" rel="noopener noreferrer" href="/show/map/4">
        三极联动影响青藏高原上层温度
      </a>
    ),
  },
  {
    key: "5",
    label: (
      <a target="_blank" rel="noopener noreferrer" href="/show/map/5">
        三极联动影响东亚夏季风
      </a>
    ),
  },
  {
    key: "6",
    label: (
      <a target="_blank" rel="noopener noreferrer" href="/show/map/6">
        三极冰盖/冰川表面冰雪冻融对比关联与科学认知
      </a>
    ),
  },
];

function NavBar() {
  const navigateHandler = (url) => window.open(url, "_blank");

  return (
    <Fragment>
      <div className="nav-bar-first">
        <NavBarButton
          text={"三极地数据集成与开放共享"}
          onClick={() =>
            navigateHandler("http://casearthpoles.tpdc.ac.cn/zh-hans/")
          }
          imgSrc={dataShare}
        />
        <Dropdown
          menu={{ items: itemsTwo }}
          trigger={["click"]}
          overlayClassName={styles.navDropdown}
        >
          <NavBarButton text={"方法库集成与在线计算"} imgSrc={funcLibrary} />
        </Dropdown>
        <Dropdown
          menu={{ items: itemsThree }}
          trigger={["click"]}
          overlayClassName={styles.navDropdown}
        >
          <NavBarButton
            text={"三极信息服务与决策支持"}
            imgSrc={onlineDecisionSupport}
          />
        </Dropdown>
        <Dropdown
          menu={{ items: itemsFour }}
          trigger={["click"]}
          overlayClassName={styles.navDropdown}
        >
          <NavBarButton text={"三极联动科学发现"} imgSrc={threePoles} />
        </Dropdown>
      </div>
    </Fragment>
  );
}

export default NavBar;