import MapLayout from "@/components/map/Layout";
import CustomToolbar from "@/components/common/CustomToolbar";
import CustomClock from "@/components/common/CustomClock";
import TextInfoPanel from "@/components/common/TextInfoPanel";
import ChartPanel from "./ChartPanel";
import LandImageLayer from "./LandImageLayer";
import OceanImageLayer from "./OceanImageLayer";
import WavePoint from "@/components/common/WavePoint";
import { CameraFlyTo } from "resium";
import { Cartesian3 } from "cesium";

export default function DomainOne() {
  return (
    <div
      style={{
        display: "flex",
        height: "100%",
      }}
    >
      <div style={{ flex: 1, position: "relative" }}>
        <MapLayout>
          <div className="title" style={{ zIndex: 999 }}>
            两极协同—连接南极和北极的热带大西洋经向模的媒介作用
          </div>
          <CustomToolbar />
          <CustomClock />
          <CameraFlyTo
            duration={5}
            destination={Cartesian3.fromDegrees(0, -85, 16000000)}
          />
          <div className="left-panel one">
            <TextInfoPanel content="利用GISTEMP资料，通过EEMD分解方法提取两极温度多年代际变化序列，发现南北极温度变化的跷跷板现象与大西洋多年代际振荡AMO紧密相关。而AMO与热带大西洋经向模AMM在年代际尺度上显著相关。ERA5再分析资料显示AMM可以通过Rossby波影响西南极的气温与海冰偶极子。因此，AMM可能在联系南北极气候变化的中起到了重要的媒介作用。" />
          </div>
          <WavePoint stationLon={88} stationLat={-85} />
          {/* <LandImageLayer /> */}
          {/* <OceanImageLayer /> */}
        </MapLayout>
      </div>
      <div style={{ flex: 1, position: "relative" }}>
        <MapLayout>
          <CameraFlyTo
            duration={5}
            destination={Cartesian3.fromDegrees(0, 88, 16000000)}
          />
          <WavePoint stationLon={0} stationLat={87} />
        </MapLayout>
      </div>
      <div style={{ flex: 1, position: "relative" }}>
        <MapLayout>
          <CameraFlyTo
            duration={5}
            destination={Cartesian3.fromDegrees(100, 33, 16000000)}
          />
          <div className="right-panel one">
            <ChartPanel />
          </div>
          <WavePoint stationLon={88} stationLat={33} />
        </MapLayout>
      </div>
    </div>
  );
}
