<template>
  <a-layout-header class="ks-layout-header">
    <a-flex>
      <div class="ks-layout-header-logo">
        <router-link :to="{path: '/app/decision/designer'}">行为决策树管理</router-link>
      </div>
      <div class="ks-layout-header-right">
        <a-space size="large">
          <span>{{ currentDateTime }}</span>
        </a-space>
      </div>
    </a-flex>
  </a-layout-header>
</template>

<script lang="ts" setup>
import { onUnmounted, ref } from 'vue';
import { formatDatetime } from '@/utils/datetime';

const currentDateTime = ref('');

const updateCurrentDateTime = () => {
  currentDateTime.value = formatDatetime(new Date());
};

updateCurrentDateTime();
const timer = setInterval(updateCurrentDateTime, 1000);

onUnmounted(() => {
  clearInterval(timer);
});
</script>