<template>
  <div
    class="relative w-full h-full overflow-hidden"
    :style="{
      transform: `scale(${initPosition.scale}) translate(${initPosition.x}px, ${initPosition.y}px)`,
    }"
    ref="mapContainerRef"
  >
    <img src="@/assets/map-min_compressed.webp" width="6223" height="2835" alt="map" />
    <img
      class="absolute left-90px top--74px"
      src="@/assets/ext-map.webp"
      width="1149"
      height="1900"
      alt="map"
      ref="extMapRef"
    />
  </div>

  <!-- 蒙层遮罩 -->
  <div class="mask"></div>

  <div
    class="absolute w-full h-full left-0 top-0 overflow-hidden"
    :style="{
      transform: `scale(${initPosition.scale}) translate(${initPosition.x}px, ${initPosition.y}px)`,
    }"
    ref="hotspotContainerRef"
    @click="toggleToPark()"
  >
    <template v-for="item in parkList">
      <Hotspot
        v-if="item.code === activePark || !activePark"
        :key="item.code"
        :type="item.type"
        :x="item.x"
        :y="item.y"
        :code="item.code"
        :ref="(ref) => (item.ref = ref)"
        @click.capture.stop="toggleToPark(item)"
      />
    </template>
    <template v-for="item in hotelList">
      <Hotspot
        v-if="item.code === activePark || !activePark"
        :key="item.code"
        :type="item.type"
        :x="item.x"
        :y="item.y"
        :code="item.code"
        :ref="(ref) => (item.ref = ref)"
      />
    </template>
    <!-- 公交站 -->
    <!-- <div
      v-if="!activePark"
      class="w-263px h-232px absolute top-1000px left-2500px bg-[url(@/assets/images/bus.svg)]"
      v-for="item of 1"
      :key="item"
    >
      <div class="w-263px truncate text-32px text-center leading-45px px-12px py-13px box-border">
        Ridership: 2733
      </div>
    </div> -->
  </div>

  <!-- 顶部标题 -->
  <ParkHeader :weatherType="weather.weatherType" />

  <!-- 天气信息 -->
  <div class="w-full absolute left-0 top-0 flex gap-3270px">
    <div class="flex-1 justify-right flex items-center mt-100px">
      <span class="flex items-center">
        <img src="@/assets/images/locate.png" alt="" />
        <span class="num text-48px">{{ location || 'Abu Dhabi' }}</span>
      </span>
      <span class="flex items-center">
        <img :src="weatherIconMap[weather.weatherType]" alt="" />
        <span class="num text-48px text-#DDF5FF"
          >{{ weather.tempMin ?? 'N/A' }}℃~{{ weather.tempMax ?? 'N/A' }}℃</span
        >
      </span>
    </div>
    <div class="flex-1 flex items-center mt-128px gap-120px">
      <span class="flex items-center">
        <img src="@/assets/images/umbrella.png" alt="" />
        <span class="num text-48px ml-8px">{{ weather.pop ?? 'N/A' }}%</span>
      </span>
      <span class="flex items-center">
        <img src="@/assets/images/humidness.png" alt="" />
        <span class="num text-48px text-#DDF5FF ml-8px">{{ weather.humidity ?? 'N/A' }}%</span>
      </span>
      <span class="flex items-center">
        <img src="@/assets/images/wind.png" alt="" />
        <span class="num text-48px text-#DDF5FF ml-8px">{{ weather.windSpeed ?? 'N/A' }}mph</span>
      </span>
    </div>
  </div>

  <!-- 中间底部面板 -->
  <GuestExperiencePanel ref="guestExpericenceRef" />

  <!-- 左侧面板 -->
  <ParkLeft ref="parkLeftRef" />

  <!-- 右侧面板 -->
  <ParkRight ref="parkRightRef" />

  <!-- 底部内容 -->
  <ParkBottom ref="parkBottomRef" />

  <!-- WIFI -->
  <WIFIGuage :current-signal="-65" ref="wifiGuageRef" />
</template>

<script setup lang="ts">
import { ref, provide } from 'vue';
import gsap from 'gsap';

import GuestExperiencePanel from './GuestExperiencePanel.vue';
import ParkHeader from './ParkHeader.vue';
import ParkLeft from './ParkLeft.vue';
import ParkRight from './ParkRight.vue';
import ParkBottom from './ParkBottom.vue';
import Hotspot from './Hotspot.vue';
import WIFIGuage from './WIFIGuage.vue';
import { useWeather } from './hooks/useWeather';

import clear from '@/assets/images/weather-sun.png';
import rainy from '@/assets/images/weather-rain.png';
import cloudy from '@/assets/images/weather-cloud.png';

const weatherIconMap = {
  clear,
  cloudy,
  rainy,
};

const { weather } = useWeather();
const location = import.meta.env.VITE_APP_WEATHER_CITY;

type HotspotItem = {
  code: string;
  type: 'Park' | 'Hotel';
  // 放大位置
  transform: {
    scale: number;
    x: number;
    y: number;
  };
  // 热点位置
  x: number;
  y: number;
  ref?: InstanceType<any>;
};

// 地图初始位置
const initPosition = {
  scale: 1.1,
  x: 148,
  y: 140,
};

// 活动park
const activePark = ref('');
// 地图容器
const mapContainerRef = ref<HTMLElement>();
const hotspotContainerRef = ref<HTMLElement>();
// guestExpericence
const guestExpericenceRef = ref<InstanceType<typeof GuestExperiencePanel>>();
const parkLeftRef = ref<InstanceType<typeof ParkLeft>>();
const parkRightRef = ref<InstanceType<typeof ParkRight>>();
const parkBottomRef = ref<InstanceType<typeof ParkBottom>>();
const extMapRef = ref<HTMLImageElement>();
const wifiGuageRef = ref<InstanceType<typeof WIFIGuage>>();

// 当前选中park向下透传
provide('parkCode', activePark);
// 公园数据
const parkList = ref<HotspotItem[]>([
  {
    code: 'FWAD',
    x: 3655,
    y: 481,
    transform: {
      scale: 2.14,
      x: -1866,
      y: 1016,
    },
    type: 'Park',
  },
  {
    code: 'SWAD',
    x: 4807,
    y: 918,
    transform: {
      scale: 3,
      x: -6066,
      y: 320,
    },
    type: 'Park',
  },
  {
    code: 'WB',
    x: 3938,
    y: 48,
    transform: {
      scale: 2.14,
      x: -1736,
      y: 1619,
    },
    type: 'Park',
  },
  {
    code: 'YWW',
    x: 3297,
    y: 251,
    transform: {
      scale: 2.14,
      x: -1074,
      y: 1579,
    },
    type: 'Park',
  },
  {
    code: 'CLYMB',
    x: 4379,
    y: 406,
    transform: {
      scale: 2.14,
      x: -3409,
      y: 1269,
    },
    type: 'Park',
  },
  {
    code: 'QAW',
    x: 2734,
    y: 964,
    transform: {
      scale: 2.14,
      x: 0,
      y: 165,
    },
    type: 'Park',
  },
  {
    code: 'YI',
    x: 1944,
    y: 349,
    transform: {
      scale: 2.14,
      x: 1795,
      y: 1455,
    },
    type: 'Park',
  },
  {
    code: 'Yas Bay',
    x: 390,
    y: 1180,
    transform: {
      scale: 2.14,
      x: 1795,
      y: 1455,
    },
    type: 'Park',
  },
  {
    code: 'Etihad Arena',
    x: 182,
    y: 789,
    transform: {
      scale: 2.14,
      x: 3545,
      y: -1381,
    },
    type: 'Park',
  },
]);
// 酒店数据
const hotelList: HotspotItem[] = [
  {
    code: 'WB',
    x: 1400,
    y: 1000,
    transform: {
      scale: 2.14,
      x: 3545,
      y: -1381,
    },
    type: 'Hotel',
  },
];

let timeline: gsap.core.Timeline;
// 执行切换动画
const mapAnimation = (transform?: HotspotItem['transform']) => {
  const mapTo = transform || initPosition;
  timeline?.kill();
  timeline = gsap.timeline();
  // 地图滚动到目标位置
  timeline.to(mapContainerRef.value!, {
    duration: 1,
    ease: 'expo.inOut',
    scale: mapTo.scale,
    x: mapTo.x,
    y: mapTo.y,
  });
  timeline.to(
    hotspotContainerRef.value!,
    {
      duration: 1,
      ease: 'expo.inOut',
      scale: mapTo.scale,
      x: mapTo.x,
      y: mapTo.y,
    },
    0,
  );

  transform ? handleOpen() : handleClose();
};

const handleOpen = () => {
  // 打开park详情
  gsap.to(guestExpericenceRef.value?.$el, {
    duration: 0.3,
    ease: 'power1.out',
    opacity: 0,
  });
  timeline.to(
    parkLeftRef.value?.$el,
    {
      duration: 0.3,
      ease: 'power1.inOut',
      x: 0,
    },
    1,
  );
  timeline.to(
    parkRightRef.value?.$el,
    {
      duration: 0.3,
      ease: 'power1.inOut',
      x: 0,
    },
    1,
  );
  timeline.to(
    parkBottomRef.value?.$el,
    {
      duration: 0.3,
      ease: 'power1.inOut',
      opacity: 1,
    },
    1,
  );
  timeline.to(
    wifiGuageRef.value?.$el,
    {
      duration: 0.3,
      ease: 'power1.inOut',
      opacity: 1,
    },
    1,
  );
  if (guestExpericenceRef.value) {
    guestExpericenceRef.value.$el.style['pointer-events'] = 'none';
  }
  if (parkBottomRef.value) {
    parkBottomRef.value.$el.style['pointer-events'] = 'all';
  }
};

const handleClose = () => {
  // 关闭park详情
  timeline.to(guestExpericenceRef.value?.$el, {
    duration: 1,
    ease: 'power1.out',
    opacity: 1,
  });
  timeline.to(
    parkLeftRef.value?.$el,
    {
      duration: 0.3,
      ease: 'power1.out',
      x: '-110%',
    },
    0.2,
  );
  timeline.to(
    parkRightRef.value?.$el,
    {
      duration: 0.3,
      ease: 'power1.inOut',
      x: '110%',
    },
    0.2,
  );
  timeline.to(
    parkBottomRef.value?.$el,
    {
      duration: 0.3,
      ease: 'power1.inOut',
      opacity: 0,
    },
    0.2,
  );
  timeline.to(
    wifiGuageRef.value?.$el,
    {
      duration: 0.3,
      ease: 'power1.inOut',
      opacity: 0,
    },
    0.2,
  );
  if (guestExpericenceRef.value) {
    guestExpericenceRef.value.$el.style['pointer-events'] = 'all';
  }
  if (parkBottomRef.value) {
    parkBottomRef.value.$el.style['pointer-events'] = 'none';
  }
};

// 处理特殊情况
const handleSpecialHotspotClick = (code: string, type: 'in' | 'out') => {
  let x = 90;
  let y = 74;
  let opacity = 1;
  const parkItem = parkList.value.find((item) => item.code === code);
  let x1 = parkItem?.x || x;
  let y1 = parkItem?.y || y;

  if (code === 'Etihad Arena' && type === 'in') {
    x = 1060;
    y = 782;
    opacity = 0;
    x1 = 1125;
    y1 = 1625;
  }

  // 执行动画
  gsap.to(extMapRef.value!, {
    duration: 1,
    opacity,
    x,
    y,
  });
  gsap.fromTo(
    parkItem?.ref?.$el,
    {
      duration: 1,
      left: parkItem?.ref?.$el.style?.left,
      top: parkItem?.ref?.$el.style?.top,
    },
    {
      left: x1,
      top: y1,
    },
  );
};

// 点击热点切换地图
const toggleToPark = (record?: HotspotItem) => {
  // 点击空白处退出详情
  if (!record) {
    if (activePark.value === 'Etihad Arena') {
      handleSpecialHotspotClick('Etihad Arena', 'out');
    }
    mapAnimation();
    activePark.value = '';
    return;
  }

  if (record.code === activePark.value) {
    // 点击相同热点退出详情
    if (activePark.value === 'Etihad Arena') {
      handleSpecialHotspotClick('Etihad Arena', 'out');
    }
    mapAnimation();
    activePark.value = '';
  } else {
    // 点击热点进入详情
    activePark.value = record.code;
    mapAnimation(record.transform);
    if (record.code === 'Etihad Arena') {
      handleSpecialHotspotClick('Etihad Arena', 'in');
    }
  }
};
</script>

<style lang="less" scoped>
.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('@/assets/images/mask-m.png');
  background-size: cover;
  pointer-events: none;
}
</style>
