<script setup lang="ts">
import { computed, ref } from "vue";
import {
  DownloadOutlined,
  EyeOutlined,
  FullscreenOutlined,
  PlayCircleOutlined,
  SaveOutlined,
} from "@ant-design/icons-vue";

const breadcrumbs = ["模板管理", "模板标注"];
const templateInfo = {
  name: "企业经营分析报告模板",
  version: "v1.0.0",
};
const isSaved = ref(true);
const saveStatusText = computed(() => (isSaved.value ? "已保存" : "未保存"));

function markDirty() {
  isSaved.value = false;
}

function saveTemplate() {
  isSaved.value = true;
}
</script>

<template>
  <header class="top-toolbar">
    <div class="toolbar-left">
      <div class="breadcrumb">
        <span v-for="item in breadcrumbs" :key="item">{{ item }}</span>
      </div>
      <div class="template-meta">
        <strong>{{ templateInfo.name }}</strong>
        <a-tag color="blue">{{ templateInfo.version }}</a-tag>
        <span class="save-status" :class="{ dirty: !isSaved }">{{ saveStatusText }}</span>
      </div>
    </div>

    <div class="toolbar-actions">
      <a-button size="small" @click="markDirty">
        <template #icon><EyeOutlined /></template>
        预览
      </a-button>
      <a-button size="small" type="primary" @click="saveTemplate">
        <template #icon><SaveOutlined /></template>
        保存
      </a-button>
      <a-button size="small" @click="markDirty">
        <template #icon><PlayCircleOutlined /></template>
        生成测试
      </a-button>
      <a-button size="small">
        <template #icon><DownloadOutlined /></template>
        导出模板
      </a-button>
      <a-button size="small" shape="circle" aria-label="全屏">
        <template #icon><FullscreenOutlined /></template>
      </a-button>
    </div>
  </header>
</template>

<style scoped>
.top-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}

.toolbar-left {
  min-width: 0;
}

.breadcrumb {
  display: flex;
  gap: 4px;
  color: var(--c-text-muted);
  font-size: 12px;
  line-height: 18px;
}

.breadcrumb span + span::before {
  margin-right: 4px;
  color: var(--c-border);
  content: "/";
}

.template-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  line-height: 20px;
}

.template-meta strong {
  overflow: hidden;
  max-width: 320px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.save-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--c-text-secondary);
  font-size: 12px;
}

.save-status::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-success);
  content: "";
}

.save-status.dirty::before {
  background: var(--c-warn);
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
</style>
