<template>
  <div class="font-700 text-blue-5 mb-20px text-30px">统一服务中心</div>
  <div class="flex flex-wrap gap-10">
    <el-card class="box-card" shadow="always" style="width: 30%">
      <template #header>
        <span>电压监控</span>
      </template>
      <div class="flex">
        <img class="w-50px" src="/src/assets/svg/闪电.svg"/>
        <p class="h-50px line-height-50px">当前电压:90999999V</p>
      </div>
    </el-card>
    <el-card class="box-card" shadow="always" style="width: 30%">
      <template #header>
        <span>电流监控</span>
      </template>
      <div class="flex">
        <img class="w-50px" src="/src/assets/svg/电流.svg"/>
        <p class="h-50px line-height-50px">当前电流:100000A</p>
      </div>
    </el-card>
    <el-card class="box-card" shadow="always" style="width: 30%">
      <template #header>
        <span>温度监控</span>
      </template>
      <div class="flex">
        <img class="w-50px" src="/src/assets/svg/温度.svg"/>
        <p class="h-50px line-height-50px">当前温度:1000℃</p>
      </div>
    </el-card>
    <el-card class="box-card" shadow="always" style="width: 30%">
      <template #header>
        <span>灯杆实时监控</span>
        <el-link type="primary" :underline="false">查看更多</el-link>
      </template>
      <div v-for="(pole, index) in poles" :key="index" class="flex justify-between border-b-1 border-b-solid border-b-blue-50 pb-10px">
        <div>{{ pole.name }}</div>
        <el-tag :icon="pole.icon" :type="pole.type">{{ pole.status }}</el-tag>
      </div>
    </el-card>
    <el-card class="box-card" shadow="always" style="width: 30%">
      <template #header>
        <span>垃圾桶实时监控</span>
        <el-link type="primary" :underline="false">查看更多</el-link>
      </template>
      <div v-for="(bin, index) in bins" :key="index" class="flex justify-between border-b-1 border-b-solid border-b-blue-50 pb-10px">
        <div>{{ bin.name }}</div>
        <el-tag :icon="bin.icon" :type="bin.type">{{ bin.status }}</el-tag>
      </div>
    </el-card>
  </div>
  <div class="font-700 text-blue-5 mb-20px text-20px mt-20px">电力资源使用问题</div>
  <div class="flex flex-wrap gap-10">
    <el-card class="box-card" shadow="always" style="width: 30%">
      <template #header>
        <span>能源浪费通报</span>
        <el-link type="primary" :underline="false">查看更多</el-link>
      </template>
      <div v-for="(unit, index) in units" :key="index" class="flex justify-between border-b-1 border-b-solid border-b-blue-50 pb-10px">
        <div>{{ unit.name }}</div>
        <el-tag :icon="unit.icon" :type="unit.type">{{ unit.status }}</el-tag>
      </div>
    </el-card>
    <el-card class="box-card" shadow="always" style="width: 30%">
      <template #header>
        <span>安全隐患通报</span>
        <el-link type="primary" :underline="false">查看更多</el-link>
      </template>
      <div v-for="(building, index) in buildings" :key="index" class="flex justify-between border-b-1 border-b-solid border-b-blue-50 pb-10px">
        <div>{{ building.name }}</div>
        <el-tag :icon="building.icon" :type="building.type">{{ building.status }}</el-tag>
      </div>
    </el-card>
    <el-card class="box-card" shadow="always" style="width: 30%">
      <template #header>
        <span>供需紧平衡</span>
        <el-link type="primary" :underline="false">查看更多</el-link>
      </template>
      <div v-for="(balance, index) in balances" :key="index" class="flex justify-between border-b-1 border-b-solid border-b-blue-50 pb-10px">
        <div>{{ balance.name }}</div>
        <el-tag :icon="balance.icon" :type="balance.type">{{ balance.status }}</el-tag>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import * as i from '@element-plus/icons-vue';

const poles = [
  { name: '一号灯杆', icon: i.Aim, type: 'success', status: '在线' },
  { name: '二号灯杆', icon: i.Warning, type: 'warning', status: '离线' },
  { name: '三号灯杆', icon: i.Fold, type: 'danger', status: '故障' }
];

const bins = [
  { name: '一号垃圾桶', icon: i.Aim, type: 'success', status: '空间充足' },
  { name: '二号垃圾桶', icon: i.Warning, type: 'warning', status: '快满' },
  { name: '三号垃圾桶', icon: i.Fold, type: 'danger', status: '满' }
];

const units = [
  { name: '一单元', icon: i.Aim, type: 'success', status: '良好用电习惯' },
  { name: '二单元', icon: i.Warning, type: 'warning', status: '电力浪费警告' },
  { name: '三单元', icon: i.Fold, type: 'danger', status: '严重电力浪费' }
];

const buildings = [
  { name: '三栋', icon: i.Aim, type: 'success', status: '较低风险' },
  { name: '二栋', icon: i.Aim, type: 'success', status: '较低风险' },
  { name: '一栋', icon: i.Fold, type: 'danger', status: '严重安全隐患' }
];

const balances = [
  { name: '三栋', icon: i.Aim, type: 'success', status: '供需平衡' },
  { name: '二栋', icon: i.Aim, type: 'success', status: '供需平衡' },
  { name: '一栋', icon: i.Fold, type: 'danger', status: '供需失衡' }
];
</script>
