<template>
  <div
    class="min-h-screen bg-gradient-to-br from-slate-950 via-blue-950 to-slate-900 text-cyan-100 p-6 relative overflow-hidden"
  >
    <!-- Animated background grid -->
    <div class="absolute inset-0 opacity-20">
      <div class="absolute inset-0 grid-pattern"></div>
    </div>

    <!-- Scanning line effect -->
    <div class="absolute inset-0 pointer-events-none">
      <div class="scan-line"></div>
    </div>

    <!-- Header -->
    <div class="relative z-10 mb-6">
      <div class="flex items-center justify-between border-b-2 border-cyan-500/30 pb-4">
        <div class="flex items-center gap-8 text-sm">
          <div
            style="border: 0.5px solid #085b77"
            v-for="(item, i) in leftNavItems"
            :key="i"
            class="px-4 py-2 bg-cyan-500/10 border border-[#085b77] skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
          >
            <span class="inline-block skew-x-[12deg]">{{ item }}</span>
          </div>
        </div>
        <h1 class="text-2xl font-bold text-center flex-1 text-cyan-300 tracking-wider">
          PSA3000万70MPa制氮装置监控系统
        </h1>

        <div class="flex items-center gap-8 text-sm">
          <div
            v-for="(item, i) in rightNavItems"
            :key="i"
            style="border: 0.5px solid #085b77"
            class="px-4 py-2 bg-cyan-500/10 border border-cyan-500/30 skew-x-[-12deg] hover:bg-cyan-500/20 transition-all cursor-pointer"
          >
            <span class="inline-block skew-x-[12deg]">{{ item }}</span>
          </div>
        </div>
      </div>
    </div>

    <dv-border-box1 class="relative z-10">
      <div class="relative z-10 grid grid-cols-12 gap-4 mt-5 p-6">
        <!-- Left panels -->
        <div class="col-span-3 space-y-4">
          <!-- PSA核心参数 -->
          <div class="panel">
            <div class="flex justify-between items-center panel-title">
              <h4>PSA核心参数</h4>
              <dv-decoration3 style="width: 120px; height: 30px" />
            </div>

            <div class="space-y-3">
              <!-- <DataRow label="氧气纯度" value="99.66 %" button="启停按钮" button-color="green" /> -->
              <DataRow label="氧气压力" value="0.54 MPa" />
              <DataRow label="氧气瞬时流量" value="3002.10 Nm³" />
              <DataRow label="氧气累计流量" value="219.6217 万Nm³" />
              <div class="flex items-center justify-between mt-4">
                <span class="text-cyan-200">运行状态</span>
                <div class="status-indicator status-active"></div>
              </div>
            </div>
          </div>

          <!-- 空气处理参数 -->
          <div class="panel">
            <div class="flex justify-between items-center panel-title">
              <h4>空气处理参数</h4>
              <dv-decoration3 style="width: 120px; height: 30px" />
            </div>
            <div class="space-y-3">
              <!-- <DataRow label="出口温度" value="6.7 ℃" button="启停按钮" button-color="green" /> -->
              <DataRow label="出口压力" value="0.6 MPa" />
              <div class="flex items-center justify-between mt-4">
                <span class="text-cyan-200">冷干机运行状态</span>
                <div class="status-indicator status-inactive"></div>
              </div>

              <div class="flex items-center justify-between mt-4">
                <span class="text-cyan-200">风机运行状态</span>
                <div class="status-indicator status-active"></div>
              </div>
            </div>
          </div>

          <!-- 1800中压机参数 -->
          <div class="panel">
            <div class="flex justify-between items-center panel-title">
              <h4>1800中压机参数</h4>
              <dv-decoration3 style="width: 120px; height: 30px" />
            </div>

            <div class="space-y-3">
              <!-- <DataRow label="排气压力" value="3.47 MPa" button="启停按钮" button-color="green" /> -->
              <DataRow label="排气温度" value="107.0 ℃" />
              <DataRow label="总用电能" value="247406.4 kWh" />
              <div class="flex items-center justify-between mt-4">
                <span class="text-cyan-200">运行状态</span>
                <div class="status-indicator status-active"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-span-6 space-y-4">
          <div class="panel relative overflow-hidden">
            <div class="relative h-[450px] flex items-center justify-center">
              <ModelViewer />
              <!-- <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent"></div> -->
            </div>
          </div>

          <!-- 1050空压机参数 -->
          <div class="panel">
            <div class="mb-2">
              <dv-decoration7>
                <h3 class="text-cyan-300 text-lg font-bold px-1"> 1050空压机参数 </h3>
              </dv-decoration7>
            </div>
            <!-- <h3 class="panel-title">1050空压机参数</h3> -->
            <div class="grid grid-cols-5 gap-4">
              <div v-for="(unit, i) in compressorUnits" :key="i" class="space-y-2 text-center">
                <div class="text-cyan-300 font-bold mb-2">{{ unit.name }}</div>
                <div class="text-sm">
                  <div class="text-cyan-200">排气压力</div>
                  <div class="text-white font-mono">{{ unit.pressure }}</div>
                </div>
                <div class="text-sm">
                  <div class="text-cyan-200">排气温度</div>
                  <div class="text-white font-mono">{{ unit.temp }}</div>
                </div>
                <div class="text-sm">
                  <div class="text-cyan-200">总用电能</div>
                  <div class="text-white font-mono text-xs">{{ unit.energy }}</div>
                </div>
                <div
                  :class="[
                    'w-8 h-8 mx-auto rounded-full animate-pulse',
                    unit.status === 'active' ? 'status-active' : 'status-inactive'
                  ]"
                ></div>
              </div>
            </div>
          </div>
        </div>

        <!-- Right panel -->
        <div class="col-span-3">
          <div class="panel h-full">
            <div class="flex items-center justify-between mb-4 border-b border-cyan-500/30 pb-2">
              <h3 class="text-cyan-300 text-lg font-bold">液驱压缩机参数</h3>
              <dv-decoration8 :reverse="true" style="width: 110px; height: 20px" />
            </div>
            <div class="space-y-2 text-sm overflow-y-auto overflow-x-hidden">
              <DataRow label="入口压力" value="3.30 MPa" :compact="true" />
              <DataRow label="一级入口压力" value="3.32 MPa" :compact="true" />
              <DataRow label="A级一级出口温度" value="104.5 ℃" :compact="true" />
              <DataRow label="A级一级冷却后温度" value="16.6 ℃" :compact="true" />
              <DataRow label="A级二级入口压力" value="8.40 MPa" :compact="true" />
              <DataRow label="A级二级出口温度" value="134.3 ℃" :compact="true" />
              <DataRow label="A级二级冷却后温度" value="27.6 ℃" :compact="true" />
              <DataRow label="A级三级入口压力" value="22.57 MPa" :compact="true" />
              <DataRow label="B级一级出口温度" value="109.6 ℃" :compact="true" />
              <DataRow label="B级一级冷却后温度" value="16.5 ℃" :compact="true" />
              <DataRow label="B级二级入口压力" value="8.23 MPa" :compact="true" />
              <DataRow label="B级二级出口温度" value="130.0 ℃" :compact="true" />
              <DataRow label="B级二级冷却后温度" value="21.5 ℃" :compact="true" />
              <DataRow label="B级三级入口压力" value="22.46 MPa" :compact="true" />
              <DataRow label="三级出口温度" value="83.6 ℃" :compact="true" />
              <DataRow label="总出口温度" value="26.1 ℃" :compact="true" />
              <DataRow label="总出口压力" value="40.82 MPa" :compact="true" />
            </div>
          </div>
        </div>
      </div>
    </dv-border-box1>

    <!-- Main content -->
  </div>
</template>

<script setup lang="ts">
import DataRow from './data-row.vue'
import ModelViewer from '@/components/ModelViewer.vue'
const leftNavItems = ['箱变', '1050空压机', 'PSA数据', '空气处理镜']
const rightNavItems = ['主界面', '液驱及中压', '报警监控']

const compressorUnits = [
  {
    name: '空压机1',
    pressure: '0.68 MPa',
    temp: '77.0 ℃',
    energy: '124361.6 kWh',
    status: 'active'
  },
  {
    name: '空压机2',
    pressure: '0.69 MPa',
    temp: '78.0 ℃',
    energy: '136750.4 kWh',
    status: 'active'
  },
  {
    name: '空压机3',
    pressure: '0.69 MPa',
    temp: '77.0 ℃',
    energy: '134804.8 kWh',
    status: 'active'
  },
  {
    name: '空压机4',
    pressure: '0.67 MPa',
    temp: '84.0 ℃',
    energy: '133656.0 kWh',
    status: 'active'
  },
  {
    name: '空压机5',
    pressure: '0.00 MPa',
    temp: '0.0 ℃',
    energy: '12456.0 kWh',
    status: 'inactive'
  }
]
</script>

<style scoped>
/* @keyframes scan {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
} */

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

.grid-pattern {
  background-image: linear-gradient(rgba(6, 182, 212, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.3) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
}

.scan-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, rgb(6, 182, 212), transparent);
  opacity: 0.3;
  animation: scan 4s linear infinite;
}

.scan-line-fast {
  position: absolute;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, transparent, rgba(6, 182, 212, 0.6), transparent);
  animation: scan 3s linear infinite;
}

.panel {
  background: linear-gradient(to bottom right, rgba(15, 23, 42, 0.8), rgba(30, 58, 138, 0.5));
  backdrop-filter: blur(4px);
  border: 2px solid rgba(6, 182, 212, 0.4);
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
  transition: all 0.3s;
}

.panel:hover {
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.5);
}

.panel-title {
  color: rgb(103, 232, 249);
  font-size: 1.125rem;
  margin-bottom: 1rem;
  font-weight: bold;
  border-bottom: 1px solid rgba(6, 182, 212, 0.3);
  padding-bottom: 0.5rem;
}

.status-indicator {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

.status-active {
  background: rgb(34, 197, 94);
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.8);
}

.status-inactive {
  background: rgb(239, 68, 68);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.8);
}

.btn {
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  color: white;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.btn-green {
  background: rgb(22, 163, 74);
  box-shadow: 0 0 10px rgba(22, 163, 74, 0.5);
}

.btn-green:hover {
  background: rgb(34, 197, 94);
  box-shadow: 0 0 20px rgba(22, 163, 74, 0.8);
  transform: translateY(-1px);
}

.btn-red {
  background: rgb(220, 38, 38);
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

.btn-red:hover {
  background: rgb(239, 68, 68);
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.8);
  transform: translateY(-1px);
}
</style>
