<template>
  <div class="header absolute w-4730px h-261px top-0 left-50%">
    <!-- logo -->
    <img class="title" src="@/assets/images/title.svg" alt="" />
    <!-- 天气 -->
    <img
      class="absolute"
      :src="weatherIconMap[weatherType]"
      alt="weather"
      style="transform: translateX(-2784px); pointer-events: none"
    />
    <!-- 通知 -->
    <div class="notice-box relative">
      <div class="content px-38px leading-100px flex overflow-hidden">
        <div class="text-44px text-#f6bd52 mr-12px">Notice:</div>
        <div
          class="text-42px text-#fff flex-1 overflow-x-auto whitespace-nowrap"
          ref="containerRef"
        >
          <div ref="contentRef">
            Yas Island summer service enhancements Yas Island summer service enhancements Cooling:
            mist fans in queues Hours: 8am-12pm & 4pm-11pm Shuttles: free every 15 mins
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue';
import { useAutoScroll } from '@/hooks/useAutoScroll';
import type { WeatherType } from './hooks/useWeather';

import clear from '@/assets/images/sun-day.png';
import rainy from '@/assets/images/rainy-day.png';
import cloudy from '@/assets/images/cloudy-day.png';

defineProps<{
  weatherType: WeatherType;
}>();

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

const containerRef = ref<HTMLElement | null>(null);
const contentRef = ref<HTMLElement | null>(null);

// 自动滚动播报
useAutoScroll(containerRef, contentRef, {
  loop: true,
  speed: 50,
  delay: 1000,
  direction: 'right',
  pauseOnHover: true,
});
</script>

<style scoped>
.header {
  width: 4730px;
  height: 261px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url(@/assets/images/header-bg.svg);
  background-size: contain;
  .title {
    position: absolute;
    top: 63px;
    left: 50%;
    transform: translateX(-50%);
  }
  .notice-box {
    position: absolute;
    top: 260px;
    left: 50%;
    transform: translateX(-50%);
    width: 2794px;
    height: 100px;
    background: linear-gradient(90deg, rgba(16, 44, 88, 0.6) 0%, rgba(16, 44, 88, 0.6) 100%);
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent);
    mask-image: linear-gradient(to right, black 80%, transparent);
  }
}
</style>
