import { useParams } from "react-router-dom";
import { useSelector } from "react-redux";
import ChartInfoPanel from "./ChartInfoPanel";
import TextInfoPanel from "./TextInfoPanel";
import styles from "./index.module.less";

const textInfoList = [
  {
    title: "两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温",
    content:
      "基于再分析资料JRA55和线性斜压模式LBM的试验结果，在年代际尺度上，拉布拉多海海温偏暖会引起北大西洋至欧洲地区大气环流异常，导致青藏高原夏季出现年代际增温。    在年代际尺度上，已有研究表明受大气水汽含量增加影响的晴空向下长波辐射是促进夏季青藏高原增温的主要影响因子。通过对夏季高原温度和水汽含量的进一步分析，研究发现二者在年代际变化尺度以及空间分布具有很好的一致性，即均在1997/1998年显著增高（图70）。同时，对1980-1997和1998-2017两个时间段的位势扰动场，并结合T-N波通量诊断发现从西北大西洋沿欧亚大陆至高原北部存在Rossby波列（图71），该波列在高原东北部激发的异常反气旋对高原净水汽含量增加起到关键作用。经过线性斜压模式（LBM）试验验证，证实拉布拉多海海表温度的年代际增加是激发该Rossby波列的主要原因。因此，拉布拉多海海温年代际正异常激发的Rossby波列可以在高原东北部形成异常反气旋，该反气旋具有相当正压结构，一方面可以增加高原水汽净含量，通过增强长波辐射促进高原增温，另一方面，通过正压结构直接加热高原东北部近地气温",
  },
  {
    title: "两极协同—南极涛动有效调节青藏高原降水和加热",
    content:
      "利用ERA5再分析数据诊断和CESM印度洋海温强迫数值实验，发现5月的南极涛动正位相（AAO）激发原子阿蒙森海的纬向波列异常。该异常造成印度洋海温降低进而激发环流异常造成高原上空降水增加、感热通量降低。这一结果有助于提高青藏高原热源的预测技巧，改进亚洲夏季风的预测。",
  },
  {
    title: "两极协同—连接南极和北极的热带大西洋经向模的媒介作用",
    content:
      "利用GISTEMP资料，通过EEMD分解方法提取两极温度多年代际变化序列，发现南北极温度变化的跷跷板现象与大西洋多年代际振荡AMO紧密相关。而AMO与热带大西洋经向模AMM在年代际尺度上显著相关。ERA5再分析资料显示AMM可以通过Rossby波影响西南极的气温与海冰偶极子。因此，AMM可能在联系南北极气候变化的中起到了重要的媒介作用。",
  },
  {
    title: "三极联动影响青藏高原上层温度",
    content:
      "利用ERA5再分析数据，通过XGBoost和LightGBM方法对青藏高原对流层温度异常进行预测，结果表明该温度异常主要受地球三极信号影响，机器学习方法的高预测性对于南亚高压和亚洲夏季降水有重要指示意义。",
  },
  {
    title: "三极联动影响东亚夏季风",
    content:
      "利用39个CMIP6数值模拟数据训练卷积神经网络，利用NOAA20世纪再分析数据进行迁移学习、ERA5再分析数据进行测试，从而预测东亚夏季风。预测结果的热力图可视化表明尽管热带大洋对东亚夏季风的影响是最强的，然而不论是北极、南极还是青藏高原均显示有显著的前期信号（春季），这也表明地球三极可以协同影响东亚夏季风。关于东亚夏季风的预测一直是个难题。近期，我们利用机器学习识别了东亚夏季风的影响因子。地球三极的协同影响在东亚夏季风的归因图中得到了很好的体现：尽管热带大洋对东亚夏季风的影响是最强的，然而不论是北极、南极还是青藏高原均显示有显著的前期信号（春季），这也表明地球三极可以协同影响东亚夏季风。",
  },
];

const chartInfoList = [
  {
    type: "1",
    name: "sst",
  },
  {
    type: "3",
    name: "tripolar",
  },
  {
    type: "4",
    name: "tptt",
  },
];

function InfoLayout() {
  const { type } = useParams();
  const { toolbar } = useSelector((state) => state.data);

  if (!toolbar.showPanel) return <></>;

  const hasText = textInfoList[type - 1];
  const currentChartName = chartInfoList.find(
    (item) => item.type === type
  )?.name;

  return (
    <div className={styles.infoLayout}>
      {!!hasText ? <TextInfoPanel {...hasText} /> : <em></em>}
      <ChartInfoPanel type={currentChartName} />
    </div>
  );
}

export default InfoLayout;
