<template>
  <div>
    <div class="font-bold text-blue-5 mb-20px text-30px">参数监控信息</div>
    <div class="flex flex-wrap gap-10">
      <el-card title="电压监控" shadow="always" class="w-30% text-20px">
        <div class="flex items-center">
          <el-icon class="custom-icon-size"><i.Lightning /></el-icon>
          <p class="h-50px leading-50px">当前电压: 221V</p>
        </div>
      </el-card>
      <el-card title="电流监控" shadow="always" class="w-30% text-20px">
        <div class="flex items-center">
          <el-icon class="custom-icon-size"><i.Ticket /></el-icon>
          <p class="h-50px leading-50px">当前电流: 10A</p>
        </div>
      </el-card>
      <el-card title="温度监控" shadow="always" class="w-30% text-20px">
        <div class="flex items-center">
          <el-icon class="custom-icon-size"><i.PartlyCloudy /></el-icon>
          <p class="h-50px leading-50px">当前温度: 160℃</p>
        </div>
      </el-card>
      <el-card title="灯杆实时监控" shadow="always" class="w-30%" extra="<a href='#'>查看更多</a>">
        <div class="flex justify-between border-b-1 border-b-solid border-b-blue-50 pb-10px">
          <div>一号灯杆</div>
          <el-tag type="success" effect="dark">
            <el-icon class="custom-icon-size"><i.CircleCheck /></el-icon> 在线
          </el-tag>
        </div>
        <div class="flex justify-between border-b-1 border-b-solid border-b-blue-50 pb-10px">
          <div>二号灯杆</div>
          <el-tag type="warning" effect="dark">
            <el-icon class="custom-icon-size"><i.WarningFilled /></el-icon> 离线
          </el-tag>
        </div>
        <div class="flex justify-between border-b-1 border-b-solid border-b-blue-50 pb-10px">
          <div>三号灯杆</div>
          <el-tag type="danger" effect="dark">
            <el-icon class="custom-icon-size"><i.WarningFilled /></el-icon> 故障
          </el-tag>
        </div>
      </el-card>
      <el-card title="垃圾桶实时监控" shadow="always" class="w-30%" extra="<a href='#'>查看更多</a>">
        <div class="flex justify-between border-b-1 border-b-solid border-b-blue-50 pb-10px">
          <div>一号垃圾桶</div>
          <el-tag type="success" effect="dark">
            <el-icon class="custom-icon-size"><i.CircleCheckFilled /></el-icon> 空间充足
          </el-tag>
        </div>
        <div class="flex justify-between border-b-1 border-b-solid border-b-blue-50 pb-10px">
          <div>二号垃圾桶</div>
          <el-tag type="warning" effect="dark">
            <el-icon class="custom-icon-size"><i.WarningFilled /></el-icon> 快满
          </el-tag>
        </div>
        <div class="flex justify-between border-b-1 border-b-solid border-b-blue-50 pb-10px">
          <div>三号垃圾桶</div>
          <el-tag type="danger" effect="dark">
            <el-icon class="custom-icon-size"><i.Close /></el-icon> 满
          </el-tag>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import * as i from '@element-plus/icons-vue';
import { ElCard, ElTag, ElIcon } from 'element-plus';
import { CircleCheck, CircleCheckFilled, Close, PartlyCloudy, Ticket, WarningFilled } from '@element-plus/icons-vue'
</script>

<style scoped>
.custom-icon-size {
  width: 25px;
  height: 25px;
}
</style>
