<template>
  <div class="right-info" @click="show">
    <span class="time-info">{{ currentTime }}</span>
    <span class="date-info">{{ currentDate }}</span>
  </div>

  <a-modal v-model:open="dialogVisible" :title="modalTitle" :footer="null">
    <a-row :gutter="[0, 12]">
      <template v-for="(item, index) in modalItems" :key="index">
        <a-col :span="8" class="modal-label">{{ item.label }}</a-col>
        <a-col :span="16" class="modal-value">{{ item.value }}</a-col>
      </template>
    </a-row>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue';
import { useDialog } from '@/utils/useDialog';
import { useRealTime } from '@/utils/dateUtils';

// 实时时间
const { currentTime } = useRealTime('HH:mm:ss');
const currentDate = ref('');

const now = new Date();
currentDate.value = `${now.getFullYear()}年${String(now.getMonth() + 1).padStart(2, '0')}月${String(now.getDate()).padStart(2, '0')}日`;


const { visible: dialogVisible, show, hide } = useDialog();

const modalTitle = '系统设置';
const modalItems = ref([
  { label: '系统版本', value: 'v1.0.0' },
  { label: '运行环境', value: '生产环境' },
  { label: '数据库状态', value: '正常' },
  { label: '运行时长', value: '24小时30分钟' },
  { label: '内存使用', value: '2.1GB / 8GB' }
]);

defineExpose({
  show,
  hide
});
</script>

<style scoped lang="scss">
@use "@/assets/styles/variables" as *;

.modal-label {
  font-size: $text-size;
  font-weight: bold;
}

.right-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  cursor: pointer;
  padding: 0 $spacing-md;
  @include button-base;
  @include button-hover($bg-overlay, rgba(255, 255, 255, 0.2), $white);

  .time-info {
    font-size: 20px;
    font-weight: bold;
    color: $white;
  }

  .date-info {
    font-size: 12px;
    color: $text-light;
  }
}
</style>