<script setup lang="ts">
import { useRoute } from 'vue-router'
import EventCard from '@/components/NotificationMessageCard/src/components/EventCard.vue'
import { useNotificationMessage } from '@/stores/modules/notificationMessage'

const route = useRoute()
const notificationMsgStore = useNotificationMessage()
const notificationData = ref({
  title: '',
  type: 'delay',
  etdOrdeparturNum: -1,
  etaOrarrivalNum: -1,
  numericRecords: -1,
  notificationList: []
})

const loading = ref(false)
if (route.query.type === 'feature') {
  loading.value = true
}
const getNotificationList = async () => {
  await $api
    .getNotificationDetails({
      rules_type: route.query.rules_type,
      frequency_type: route.query.frequency_type,
      insert_date_format: route.query.insert_date_format
    })
    .then((res) => {
      if (res.code === 200) {
        notificationData.value = res.data
        notificationMsgStore.hasUnreadMessages()
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const iframeUrl = ref()
const init = async () => {
  loading.value = true
  if (route.query.type === 'feature') {
    notificationData.value.title = (route.query.title as string) || ''
    iframeUrl.value = `${import.meta.env.VITE_API_HOST}/main_new_version.php?action=feature_update&id=${route.query.id}`
  } else {
    await getNotificationList()
  }
}
// onMounted(() => {
//   init()
// })
const watchScope = watch(
  () => route.query,
  () => {
    init()
  },
  {
    immediate: true
  }
)
onUnmounted(() => {
  watchScope()
})

const iframeRef = ref(null)
const handleIframeLoaded = () => {
  nextTick(() => {
    loading.value = false
  })
}
</script>

<template>
  <div class="system-message-detail" v-vloading="loading">
    <div class="content" v-if="route.query.type !== 'feature'">
      <div class="header" v-if="notificationData.title">
        <div class="status-icon"></div>
        <div class="title">{{ notificationData.title }}</div>
      </div>
      <div class="total-tips" v-if="notificationData.numericRecords > -1">
        Latest Status Updates ({{ notificationData.numericRecords }})
      </div>
      <div
        class="total-tips"
        v-else-if="notificationData.etdOrdeparturNum > -1 || notificationData.etaOrarrivalNum > -1"
      >
        <div>
          <span v-if="notificationData.etdOrdeparturNum"
            >{{ notificationData.type === 'delay' ? 'Departure Delay' : 'ETD Change' }} ({{
              notificationData.etdOrdeparturNum
            }})</span
          >
          <span v-if="notificationData.etdOrdeparturNum && notificationData.etaOrarrivalNum">
            &nbsp;&nbsp;|&nbsp;&nbsp;</span
          >
          <span v-if="notificationData.etaOrarrivalNum">
            {{ notificationData.type === 'delay' ? 'Arrival Delay' : 'ETA Change' }} ({{
              notificationData.etaOrarrivalNum
            }})
          </span>
        </div>
      </div>
      <EventCard
        v-for="(item, index) in notificationData.notificationList"
        :key="index"
        :data="item"
      />
    </div>
    <div class="content" style="height: 100%" v-else>
      <div class="header" v-if="notificationData.title">
        <div class="status-icon"></div>
        <div class="title">{{ notificationData.title }}</div>
      </div>
      <div class="feature-pdf">
        <iframe
          ref="iframeRef"
          :src="iframeUrl"
          width="100%"
          height="100%"
          @load="handleIframeLoaded"
        ></iframe>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.system-message-detail {
  height: 100%;
  padding: 16px;
  overflow: auto;
  .content {
    margin: auto;
    width: 1000px;
  }
  .notification-card {
    max-width: 800px;
  }
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    .status-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--color-border);
      margin-right: 10px;
    }
    .title {
      font-weight: 700;
      font-size: 24px;
      color: #b5b9bf;
    }
  }
  .total-tips {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
  }
  .feature-pdf {
    height: calc(100% - 28px);
  }
}
</style>
