<template>
  <div class="cards-container">
    <!-- 四个卡片 -->
    <div class="card">
      <!-- 数值与文字 -->
      <div class="card-info">
        <!-- 主数值（高亮） -->
        <div class="value-line">
          <span class="number">{{ cards[0].value }}</span>
          <span class="unit">{{ cards[0].unit }}</span>
        </div>
        <!-- 标签说明 -->
        <div class="label">{{ cards[0].label }}</div>
      </div>

      <!-- 图标及其闪动背景 -->
      <div class="icon-wrapper">
        <!-- 背后闪动的竖直矩形 -->
        <div class="icon-bg icon-bg-0"></div>
        <!-- 圆形平台 -->
        <div class="platform-circle"></div>
        <!-- 图标本身（此处用Unicode或自定义图标） -->
        <div class="icon">
          <img src="@/assets/img/left/1.svg" class="images" />
        </div>
      </div>
    </div>
    <div class="card">
      <!-- 数值与文字 -->
      <div class="card-info">
        <!-- 主数值（高亮） -->
        <div class="value-line">
          <span class="number">{{ cards[1].value }}</span>
          <span class="unit">{{ cards[1].unit }}</span>
        </div>
        <!-- 标签说明 -->
        <div class="label">{{ cards[1].label }}</div>
      </div>

      <!-- 图标及其闪动背景 -->
      <div class="icon-wrapper">
        <!-- 背后闪动的竖直矩形 -->
        <div class="icon-bg icon-bg-1"></div>
        <!-- 圆形平台 -->
        <div class="platform-circle"></div>
        <!-- 图标本身（此处用Unicode或自定义图标） -->
        <div class="icon">
          <img src="@/assets/img/left/2.svg" class="images" />
        </div>
      </div>
    </div>
    <div class="card">
      <!-- 数值与文字 -->
      <div class="card-info">
        <!-- 主数值（高亮） -->
        <div class="value-line">
          <span class="number">{{ cards[2].value }}</span>
          <span class="unit">{{ cards[2].unit }}</span>
        </div>
        <!-- 标签说明 -->
        <div class="label">{{ cards[2].label }}</div>
      </div>

      <!-- 图标及其闪动背景 -->
      <div class="icon-wrapper">
        <!-- 背后闪动的竖直矩形 -->
        <div class="icon-bg icon-bg-2"></div>
        <!-- 圆形平台 -->
        <div class="platform-circle"></div>
        <!-- 图标本身（此处用Unicode或自定义图标） -->
        <div class="icon">
          <img src="@/assets/img/left/3.svg" class="images" />
        </div>
      </div>
    </div>
    <div class="card">
      <!-- 数值与文字 -->
      <div class="card-info">
        <!-- 主数值（高亮） -->
        <div class="value-line">
          <span class="number">{{ cards[3].value }}</span>
          <span class="unit">{{ cards[3].unit }}</span>
        </div>
        <!-- 标签说明 -->
        <div class="label">{{ cards[3].label }}</div>
      </div>

      <!-- 图标及其闪动背景 -->
      <div class="icon-wrapper">
        <!-- 背后闪动的竖直矩形 -->
        <div class="icon-bg icon-bg-3"></div>
        <!-- 圆形平台 -->
        <div class="platform-circle"></div>
        <!-- 图标本身（此处用Unicode或自定义图标） -->
        <div class="icon">
          <img src="@/assets/img/left/4.svg" class="images" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { currentGET } from "api/modules";

export default {
  name: "BlinkingIcons",
  data() {
    return {
      cards: [
        {
          id: 1,
          value: "452/807",
          unit: "辆",
          label: "在线车数",
          srcValue: "@/assets/img/left_top_lv.png",
        },
        {
          id: 2,
          value: "561",
          unit: "kg",
          label: "当日减碳",
          srcValue: "@/assets/img/left/1.svg",
        },
        {
          id: 3,
          value: "534",
          unit: "kg",
          label: "当日用氢量",
          srcValue: "@/assets/img/left/1.svg",
        },
        {
          id: 4,
          value: "3300",
          unit: "km",
          label: "当日里程",
          srcValue: "@/assets/img/left/1.svg",
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      currentGET("big1").then((res) => {
        console.log("当日实况");
        console.log(res);

        let onLineCount = 0;
        let vehicleCount = 0;
        let dayCarbon = 0;
        let dayHydrogen = 0;
        let dayMileage = 0;

        if (res !== null && res.data !== null) {
          if (res.data.onLineCount !== null) onLineCount = res.data.onLineCount;
          if (res.data.vehicleCount !== null)
            vehicleCount = res.data.vehicleCount;
          if (res.data.dayCarbon !== null) dayCarbon = res.data.dayCarbon;
          if (res.data.dayHydrogen !== null) dayHydrogen = res.data.dayHydrogen;
          if (res.data.dayMileage !== null) dayMileage = res.data.dayMileage;
        }

        let change = this.cards[0];
        change.value = onLineCount + "/" + vehicleCount;
        this.$set(this.cards, 0, change);

        change = this.cards[1];
        change.value = dayCarbon;
        this.$set(this.cards, 1, change);
        change = this.cards[2];
        change.value = dayHydrogen;
        this.$set(this.cards, 2, change);
        change = this.cards[3];
        change.value = dayMileage;
        this.$set(this.cards, 3, change);
      });
    },
  },
};
</script>

<style scoped>
/* 整体背景 */
.cards-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding-left: 0px;
  padding-top: 30px;
  padding-bottom: 30px;
  background-image: url("../../assets/img/left/u665.svg");
  background-repeat: no-repeat;
  background-position: 0% 100%;
}
.images {
  width: 65px;
  height: 70px;
  margin-left: 10px;
  margin-top: -5px;
}
/* 单个卡片 */
.card {
  position: relative;
  width: 180px;
  text-align: center;
  color: #000000;
}

/* 卡片信息区域 */
.card-info {
  margin-bottom: 120px; /* 给下方图标区域留出空间 */
  margin-left: 10px;
}

.value-line {
  font-size: 20px;
  margin-bottom: 8px;
  width: 120px;
}

.number {
  color: #1890ff;
  font-weight: 700;
  margin-right: 6px;
}

.unit {
  font-size: 14px;
  opacity: 0.8;
}

.label {
  font-size: 16px;
  color: #262626;
}

/* 图标容器 */
.icon-wrapper {
  position: absolute;
  bottom: 0;
  left: 54%;
  transform: translateX(-50%);
  width: 100%;
  height: 100px;
  overflow: visible;
}

/* 背后闪动的竖直矩形 */
.icon-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 100%;
  border-radius: 6px;
  background-image: url("../../assets/img/left/u676.svg");
  background-repeat: no-repeat;
  animation: blink 1s infinite alternate;
  top: -15%;
}
.icon-bg-0 {
  animation-delay: 0s;
}
.icon-bg-1 {
  animation-delay: 0.2s;
}
.icon-bg-2 {
  animation-delay: 0.4s;
}
.icon-bg-3 {
  animation-delay: 0.6s;
}

/* 圆形平台 */
.platform-circle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 20px;
  background: radial-gradient(rgba(69, 243, 255, 0.4), transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 8px #0ad, 0 0 12px #0ad;
}

/* 图标 */
.icon {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  color: #00e4ff;
}

/* 关键帧动画：闪动 */
@keyframes blink {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* 图标模拟，可用 Font Awesome 等替换 */
.icon-phone::before {
  content: "☎";
}
.icon-shield::before {
  content: "⛨";
}
.icon-star::before {
  content: "★";
}
.icon-protect::before {
  content: "🛡";
}
</style>
