<template>
  <div class="dash-page">
    <div class="dash-bar">
      <a @click="router.push('/home')">← 返回工作台</a>
      <span class="dash-bar-tt">专业看板 · 工程污染概览</span>
      <span class="dash-bar-note">演示数据(静态),接入后端聚合后实时</span>
    </div>
    <div class="dash-host"><div ref="host" style="width:100%;height:100%"></div></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const host = ref<HTMLElement>();

function loadScript(src: string): Promise<void> {
  return new Promise((resolve, reject) => {
    if (document.querySelector(`script[src="${src}"]`)) return resolve();
    const s = document.createElement('script');
    s.src = src;
    s.onload = () => resolve();
    s.onerror = () => reject(new Error('load fail ' + src));
    document.head.appendChild(s);
  });
}

onMounted(async () => {
  const w = window as any;
  if (!w.renderDashboard) {
    await loadScript('/dashboard/data.js');
    await loadScript('/dashboard/charts.js');
    await loadScript('/dashboard/dashboard.js');
  }
  if (host.value) host.value.innerHTML = w.renderDashboard('warm', { compliance: 'donut', pollutant: 'ring' });
});
</script>

<style src="../styles/dashboard.css"></style>
<style scoped>
.dash-page { height: 100vh; display: flex; flex-direction: column; background: #f4f0e7; }
.dash-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: #fffdf8; border-bottom: 1px solid #e8e0d0; }
.dash-bar a { color: #1f7a5a; cursor: pointer; font-weight: 600; }
.dash-bar-tt { font-weight: 700; }
.dash-bar-note { color: #a89c86; font-size: 12px; margin-left: auto; }
.dash-host { flex: 1; min-height: 0; overflow: auto; }
.dash-host :deep(.dash) { min-width: 1280px; }
</style>
