<template>
  <header>
    <div class="header-inner">
      <div class="title-wrap">
        <div class="title-mark">
          <Icon icon="fa-solid:microchip" class="title-mark-icon" />
        </div>
        <div>
          <div class="title">智能制造产线任务总览</div>
          <div class="sub-title">INTELLIGENT MANUFACTURING REAL-TIME DASHBOARD</div>
        </div>
      </div>
      <div class="header-right">
        <!-- <el-button class="back-btn" type="primary" size="small" plain @click="goBack">
          <Icon icon="fa-solid:arrow-left" class="back-icon" />
          <span>返回</span>
        </el-button> -->
        <span class="chip">
          <Icon icon="fa-regular:clock" class="chip-icon" />
          <span>{{ timeStr }}</span>
        </span>
        <!-- <span class="chip chip-strong">
          <Icon icon="fa-solid:circle-nodes" class="chip-icon" />
          <span>当前在线产线 <strong>10</strong> 条</span>
        </span> -->
      </div>
    </div>
  </header>
</template>

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

const router = useRouter()

const timeStr = ref('')
let timer: number | undefined

const updateTime = () => {
  const d = new Date()
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const h = String(d.getHours()).padStart(2, '0')
  const mi = String(d.getMinutes()).padStart(2, '0')
  const s = String(d.getSeconds()).padStart(2, '0')
  timeStr.value = `${y}-${m}-${day} ${h}:${mi}:${s}`
}

const goBack = () => {
  router.back()
}

onMounted(() => {
  updateTime()
  timer = window.setInterval(updateTime, 1000)
})

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

<style scoped>
header {
  position: relative;
  z-index: 2;
  display: flex;
  height: var(--header-h);
  padding: 0 24px;
  background:
    linear-gradient(to bottom, rgb(15 23 42 / 95%), rgb(15 23 42 / 85%)),
    radial-gradient(circle at 50% 0, rgb(56 189 248 / 22%), transparent 60%);
  border-bottom: 1px solid rgb(148 163 184 / 35%);
  box-shadow: 0 10px 35px rgb(15 23 42 / 90%);
  align-items: center;
  justify-content: center;
}

.header-inner {
  display: flex;
  width: 100%;
  max-width: 1920px;
  align-items: center;
  justify-content: space-between;
}

.title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-mark {
  display: flex;
  width: 42px;
  height: 42px;
  background: radial-gradient(circle at 30% 30%, rgb(56 189 248 / 35%), transparent 70%);
  border: 1px solid rgb(56 189 248 / 75%);
  border-radius: 50%;
  box-shadow: 0 0 24px rgb(56 189 248 / 55%);
  align-items: center;
  justify-content: center;
}

.title-mark-icon {
  font-size: 20px;
  color: var(--accent);
}

.title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgb(56 189 248 / 65%);
  background: linear-gradient(to bottom, #e0f2fe, #60a5fa);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sub-title {
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  color: var(--muted);
}

.back-btn {
  display: inline-flex;
  padding: 4px 12px;
  color: #e0f2fe;
  background: radial-gradient(circle at 0 0, rgb(56 189 248 / 22%), transparent 70%);
  border-color: rgb(56 189 248 / 85%);
  border-radius: 999px;
  box-shadow: 0 0 18px rgb(56 189 248 / 45%);
  align-items: center;
  gap: 4px;
}

.back-btn:hover {
  background: radial-gradient(circle at 0 0, rgb(59 130 246 / 35%), transparent 70%);
  border-color: rgb(96 165 250 / 95%);
}

.back-icon {
  font-size: 14px;
  color: var(--accent);
}

.chip {
  display: inline-flex;
  padding: 4px 10px;
  background: rgb(15 23 42 / 75%);
  border: 1px solid rgb(148 163 184 / 50%);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
}

.chip-icon {
  color: var(--accent);
}

.chip-strong {
  color: #e0f2fe;
  background: radial-gradient(circle at 0 0, rgb(56 189 248 / 35%), transparent 70%);
  border-color: rgb(56 189 248 / 80%);
}

@media (width <= 1600px) {
  .title {
    font-size: 26px;
  }
}

@media (width <= 1366px) {
  .title {
    font-size: 22px;
    letter-spacing: 3px;
  }
}
</style>
