<template>
  <div style="opacity: 0; pointer-events: none">
    <div
      class="w-784px h-303px absolute bottom-591px left-1/2 translate-x--1/2 bg-[url(@/assets/images/Park-title.svg)] flex flex-col justify-center items-center"
    >
      <div class="text-56px leading-78px mb-17px">Business Hours</div>
      <div class="text-88px leading-107px time-info">
        {{ dataSource.data?.[0]?.businessHoursText }}
      </div>
    </div>

    <div
      class="w-784px h-465px absolute bottom-84px left-1/2 translate-x--1/2 bottom-board flex flex-col"
    >
      <div class="text-44px leading-62px">Show Rides Closures</div>
      <div class="flex-1 overflow-y-auto" ref="containerRef">
        <div ref="contentRef">
          <div
            class="text-32px leading-45px flex justify-between items-center"
            v-for="(item, index) in rides"
            :key="item.name"
            :class="index === rides.length - 1 ? 'mb-0px' : 'mb-34px'"
          >
            <span class="text-#A7B7CA">{{ item.name }}</span>
            <span :style="{ color: item.status === 'OPEN' ? '#01b80b' : '#F60000'}">{{ item.status }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, watch, type Ref } from 'vue';
import { useAutoScroll } from '@/hooks/useAutoScroll';
import { Receiver } from '@/utils/sseReceiver';
import { getIDBData } from '@/utils/database';
import { useInterval } from 'vue-hooks-plus';
import dayjs from 'dayjs';
import isBetween from 'dayjs/plugin/isBetween';

dayjs.extend(isBetween);

interface MapCenterData {
  analysisDate: string;
  businessEndTime: string;
  businessHours: boolean;
  businessHoursText: string;
  businessStartTime: string;
  displayOrder: number;
  facilityName: string;
  facilityStatus: 'OPEN' | 'CLOSED';
  id: number;
  parkCode: string;
  statusDescription: 'OPEN' | 'CLOSED';
  syncTraceId: string;
  synchTime: string;
}

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

useAutoScroll(containerRef, contentRef, {
  speed: 50,
  loop: true,
  direction: 'down',
});

const parkCode = inject('parkCode') as Ref<string | null>;
const dataSource = ref<{
  data: MapCenterData[] | null;
}>({
  data: null,
});
// 设施列表
const rides = ref<
  {
    name: string;
    status: string;
  }[]
>([]);

// 定时设置数据
useInterval(() => {
  const list = (dataSource.value.data || []).sort((a, b) => a.displayOrder - b.displayOrder);

  rides.value = list.map((item) => {
    const startTime = dayjs()
      .set('hour', Number(item.businessStartTime.split(':')[0]))
      .set('minute', Number(item.businessStartTime.split(':')[1]));
    const endTime = dayjs()
      .set('hour', Number(item.businessEndTime.split(':')[0]))
      .set('minute', Number(item.businessEndTime.split(':')[1]));

    const isOpen = dayjs().isBetween(startTime, endTime, null, '[]');
    return {
      name: item.facilityName,
      status: isOpen ? 'OPEN' : 'CLOSED',
    };
  });
}, 1000);

// 获取数据
const setData = () => {
  if (parkCode?.value) {
    getIDBData('Map_Center' + parkCode.value).then((res) => {
      dataSource.value.data = res?.value;
    });
  }
};

watch(
  () => parkCode?.value,
  () => {
    setData();
  },
);

setData();
// 获取websoket
const ws = Receiver.getInstance(import.meta.env.VITE_APP_SOCKET_SERVER + '/kpi/ws/data');
ws.onMessage(async () => {
  setData();
});
</script>

<style lang="less" scoped>
.time-info {
  font-family: D-DINExp, sans-serif;
  background: linear-gradient(90deg, #ffffff 0%, #bde1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bottom-board {
  background: linear-gradient(180deg, rgba(9, 41, 76, 0) 0%, #09294c 100%);
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
  padding: 20px 40px;
}
</style>
