<script setup lang="ts">
import { DESIGN_HEIGHT, DESIGN_WIDTH } from '@/utils/kb'
import rdsummary from './rdkb/rdsummary.vue'
import rdInventorySafety from './rdkb/rd-Inventory-safety.vue'
import rdMaintenanceTimes from './rdkb/rd-maintenance-times.vue'
import rdCost from './rdkb/rd-cost.vue'
import rdExceptionPrompt from './rdkb/rd-exception-prompt.vue'
import rdValue from './rdkb/rd-value.vue'
import rdRate from './rdkb/rd-rate.vue'
import rdUseStatus from './rdkb/rd-use-status.vue'
import rdDeviceStatus from './rdkb/rd-device-status.vue'
import rdDeviceCategory from './rdkb/rd-device-category.vue'
import rdProductionBriefs from './rdkb/rdProductionBriefs.vue'

defineOptions({
  name: 'IotRdStatt'
})

const company = ref('瑞都')
const activePage = ref<'home' | 'production'>('home')

const pageTabs = [
  { label: '看板首页', value: 'home' },
  { label: '生产日报', value: 'production' }
] as const

const wrapperRef = ref<HTMLDivElement>()
const scale = ref(1)

let resizeObserver: ResizeObserver | null = null
let resizeRaf = 0

provide('rdKbScale', scale)

const targetWrapperStyle = computed(() => ({
  width: `${DESIGN_WIDTH * scale.value}px`,
  height: `${DESIGN_HEIGHT * scale.value}px`
}))

const targetAreaStyle = computed(() => {
  return {
    '--kb-scale': scale.value,
    width: `${DESIGN_WIDTH * scale.value}px`,
    height: `${DESIGN_HEIGHT * scale.value}px`
  }
})

function dispatchResizeEvent() {
  window.dispatchEvent(new Event('rdkb:resize'))
}

function updateScale() {
  cancelAnimationFrame(resizeRaf)

  resizeRaf = requestAnimationFrame(() => {
    const wrapper = wrapperRef.value
    if (!wrapper) return

    const { clientWidth, clientHeight } = wrapper
    if (!clientWidth || !clientHeight) return

    scale.value = Math.min(clientWidth / DESIGN_WIDTH, clientHeight / DESIGN_HEIGHT)
    nextTick(dispatchResizeEvent)
  })
}

onMounted(() => {
  nextTick(updateScale)
  resizeObserver = new ResizeObserver(updateScale)
  if (wrapperRef.value) {
    resizeObserver.observe(wrapperRef.value)
  }
  window.addEventListener('resize', updateScale)
})

watch(activePage, () => {
  nextTick(dispatchResizeEvent)
})

onUnmounted(() => {
  resizeObserver?.disconnect()
  window.removeEventListener('resize', updateScale)
  cancelAnimationFrame(resizeRaf)
})
</script>

<template>
  <div ref="wrapperRef" class="bg absolute top-0 left-0 size-full z-10">
    <div class="mx-a overflow-hidden" :style="targetWrapperStyle">
      <div class="bg kb-screen" :style="targetAreaStyle">
        <header class="header">{{ company }}</header>
        <div class="kb-content">
          <div class="page-tabs">
            <button
              v-for="tab in pageTabs"
              :key="tab.value"
              type="button"
              class="page-tab"
              :class="{ 'is-active': activePage === tab.value }"
              @click="activePage = tab.value">
              {{ tab.label }}
            </button>
          </div>

          <div v-if="activePage === 'home'" class="kb-home-page">
            <rdsummary class="kb-stage-card kb-stage-card--1" />
            <div class="kb-chart-grid">
              <rd-device-status class="kb-stage-card kb-stage-card--1" />
              <rd-value class="kb-stage-card kb-stage-card--2" />
              <rd-device-category class="kb-stage-card kb-stage-card--3" />
              <rd-rate class="kb-stage-card kb-stage-card--4" />
              <rd-use-status class="kb-stage-card kb-stage-card--5" />
              <rd-exception-prompt class="kb-stage-card kb-stage-card--6" />
              <rd-cost class="kb-stage-card kb-stage-card--7" />
              <rd-maintenance-times class="kb-stage-card kb-stage-card--8" />
              <rd-inventory-safety class="kb-stage-card kb-stage-card--9" />
            </div>
          </div>

          <div v-else class="kb-production-page">
            <rd-production-briefs
              class="kb-stage-card kb-stage-card--8 kb-stage-card--list"
              page-mode="full" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import url('@/styles/kb.scss');

.kb-screen {
  overflow: hidden;
}

.kb-content {
  position: relative;
  height: calc(100% - 52px * var(--kb-scale));
  padding: calc(44px * var(--kb-scale)) calc(20px * var(--kb-scale)) calc(20px * var(--kb-scale));
}

.page-tabs {
  position: absolute;
  top: calc(10px * var(--kb-scale));
  left: calc(20px * var(--kb-scale));
  z-index: 3;
  display: flex;
  width: fit-content;
  gap: calc(12px * var(--kb-scale));
}

.page-tab {
  height: calc(28px * var(--kb-scale));
  min-width: calc(82px * var(--kb-scale));
  padding: 0 calc(14px * var(--kb-scale));
  font-family: YouSheBiaoTiHei, sans-serif;
  font-size: calc(15px * var(--kb-scale));
  line-height: calc(28px * var(--kb-scale));
  color: #f5f9ff;
  cursor: pointer;
  background: linear-gradient(180deg, #83bcff 0%, #2f7ee9 58%, #1762d6 100%);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: calc(5px * var(--kb-scale));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 58%),
    0 calc(4px * var(--kb-scale)) calc(8px * var(--kb-scale)) rgb(30 89 179 / 22%);
  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}

.page-tab:hover,
.page-tab.is-active {
  filter: brightness(1.08);
  transform: translateY(calc(-1px * var(--kb-scale)));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 72%),
    0 calc(5px * var(--kb-scale)) calc(10px * var(--kb-scale)) rgb(30 89 179 / 28%);
}

.page-tab.is-active {
  background: linear-gradient(180deg, #4d9cff 0%, #1f6ee7 56%, #0e4fc4 100%);
}

.kb-home-page {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.kb-summary-placeholder {
  height: calc(112px * var(--kb-scale));
}

.kb-chart-grid {
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1;
  margin-top: calc(12px * var(--kb-scale));
  gap: calc(12px * var(--kb-scale));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kb-production-page {
  height: 100%;
  min-height: 0;
}
</style>
