<!--
 * @Author: szy
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
  <div class="page-container">
    <!-- 三列内容区域 -->
    <div class="contents">
      <!-- 左侧列 -->
      <div class="contetn_left">
        <div style="display: flex; justify-content: space-between; gap: 20px">
          <!-- 左侧数据卡片1 -->
          <div class="data-card">
            <div class="card-icon">
              <img src="@/assets/img/new/yezi.png" alt="" />
            </div>
            <div class="card-content">
              <div class="card-label">{{ leftCards[0].label }}</div>
              <div class="card-value">
                <span class="number">{{ leftCards[0].value }}</span>
                <span class="unit">{{ leftCards[0].unit }}</span>
              </div>
            </div>
          </div>

          <!-- 左侧数据卡片2 -->
          <div class="data-card">
            <div class="card-icon">
              <img src="@/assets/img/new/dot.png" alt="" />
            </div>
            <div class="card-content">
              <div class="card-label">{{ leftCards[1].label }}</div>
              <div class="card-value">
                <span class="number">{{ leftCards[1].value }}</span>
                <span class="unit">{{ leftCards[1].unit }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 今年累计碳排 - 大数字卡片 -->
        <div class="big-number-card">
          <div class="card-title">今年累计碳排</div>
          <div class="card-value">
            <span class="number">{{ yearCarbonTon }}</span>
            <span class="unit">吨</span>
          </div>
          <div class="card-desc">
            <span class="line"></span>
            相当于种植了约{{ treeCount }}棵树
          </div>
        </div>
        <!-- 月度碳减排 -->
        <ItemWrap class="contetn_lr-item" title="月度碳减排">
          <MonthCarbon />
        </ItemWrap>
        <!-- 月度行驶里程&用氢量 -->
        <!-- <ItemWrap class="contetn_lr-item" title="月度行驶里程&用氢量">
          <base-chart />
        </ItemWrap> -->
        <!-- 月月度行驶里程&用氢量 -->
        <ItemWrap
          class="contetn_lr-item"
          style="flex: 1; min-height: 300px"
          title="月度行驶里程&用氢量"
        >
          <LeftBottom />
        </ItemWrap>
      </div>

      <!-- 中间列 -->
      <div class="contetn_center">
        <CenterMap class="contetn_center_top" />
        <ItemWrap class="contetn_center-bottom" title="">
          <RightBottom />
        </ItemWrap>
      </div>

      <!-- 右侧列 -->
      <div class="contetn_right">
        <div style="display: flex; justify-content: space-between; gap: 20px">
          <!-- 右侧数据卡片1 -->
          <div class="data-card">
            <div class="card-icon">
              <img src="@/assets/img/new/car.png" alt="" />
            </div>
            <div class="card-content">
              <div class="card-label">{{ rightCards[0].label }}</div>
              <div class="card-value">
                <span class="number">{{ rightCards[0].value }}</span>
                <span class="unit">{{ rightCards[0].unit }}</span>
              </div>
            </div>
          </div>

          <!-- 右侧数据卡片2 -->
          <div class="data-card">
            <div class="card-icon">
              <img src="@/assets/img/new/chat.png" alt="" />
            </div>
            <div class="card-content">
              <div class="card-label">{{ rightCards[1].label }}</div>
              <div class="card-value">
                <span class="number">{{ rightCards[1].value }}</span>
                <span class="unit">{{ rightCards[1].unit }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 车辆实时监控 -->
        <ItemWrap class="contetn_right_day_top" title="车辆实时监控">
          <RightTopDay />
        </ItemWrap>

        <!-- 车型结构分析 -->
        <ItemWrap
          class="contetn_lr-item"
          title="车型结构分析"
          style="flex: 0; min-height: 260px"
        >
          <CenterBottom />
        </ItemWrap>
      </div>
    </div>
  </div>
</template>

<script>
import LeftCenter from "./left-center.vue";
import LeftBottom from "./left-bottom.vue";
import CenterMap from "./center-map.vue";
import CenterBottom from "./center-bottom.vue";
import RightTop from "./right-top.vue";
import RightCenter from "./right-center.vue";
import RightBottom from "./right-bottom.vue";
import BaseChart from "./chart/baseChart.vue";
import MonthCarbon from "./chart/month-carbon.vue";
import RightTopDay from "./right-top-day.vue";
import { currentGET } from "api/modules";

export default {
  components: {
    LeftCenter,
    LeftBottom,
    CenterMap,
    RightTop,
    RightCenter,
    RightBottom,
    CenterBottom,
    BaseChart,
    MonthCarbon,
    RightTopDay,
  },
  data() {
    return {
      refreshInterval: null,
      refreshTime: 1800000, // 30分钟刷新一次，可根据需要调整
      yearCarbonTon: 0,
      // 左侧卡片数据
      leftCards: [
        {
          id: 1,
          value: "8463.91",
          unit: "kg",
          label: "当日减碳量",
        },
        {
          id: 2,
          value: "1027.98",
          unit: "kg",
          label: "当日用氢量",
        },
      ],
      // 右侧卡片数据
      rightCards: [
        {
          id: 3,
          value: "",
          unit: "辆",
          label: "总车辆数",
        },
        {
          id: 4,
          value: "",
          unit: "km",
          label: "当日行驶里程",
        },
      ],
    };
  },
  computed: {
    // 计算相当于种植的树数量
    treeCount() {
      // 1吨碳减排 = 5.464棵树
      return Math.floor(this.yearCarbonTon * 5.464);
    },
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {},

  mounted() {
    this.getYearData();
    this.getDayData();
    this.startRefreshTimer();
  },
  beforeDestroy() {
    this.clearRefreshTimer();
  },
  methods: {
    getYearData() {
      currentGET("big3").then((res) => {
        console.log("年度碳减排量");
        console.log(res);
        if (res && res.data) {
          this.yearCarbonTon = res.data.yearCarbonTon || 0;
        }
      });
    },
    getDayData() {
      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;
        }

        // 更新左侧卡片 - 当日减碳量
        this.$set(this.leftCards[0], "value", dayCarbon);

        // 更新左侧卡片 - 当日用氢量
        this.$set(this.leftCards[1], "value", dayHydrogen);

        // 更新右侧卡片 - 在线数量
        this.$set(this.rightCards[0], "value", vehicleCount);

        // 更新右侧卡片 - 当日行驶里程
        this.$set(this.rightCards[1], "value", dayMileage);
      });
    },
    // 启动定时器
    startRefreshTimer() {
      this.refreshInterval = setInterval(() => {
        this.refreshAllData();
      }, this.refreshTime);
    },
    // 清除定时器
    clearRefreshTimer() {
      if (this.refreshInterval) {
        clearInterval(this.refreshInterval);
        this.refreshInterval = null;
      }
    },
    // 统一刷新所有数据
    refreshAllData() {
      console.log("开始刷新数据...");
      // 刷新主页面数据
      this.getYearData();
      this.getDayData();

      // 通过事件总线通知子组件刷新数据
      this.$eventBus.$emit("refresh-all-data");
    },
  },
};
</script>
<style lang="scss" scoped>
// 页面容器
.page-container {
  display: flex;
  flex-direction: column;
  height: calc(100% - 129px);
  overflow: hidden;
}

// 三列内容区域 - 1:2:1 布局
.contents {
  flex: 1;
  display: flex;
  gap: 12px;
  min-height: 0;

  .contetn_left {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .contetn_center {
    flex: 2;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .contetn_right {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  // 左右两侧卡片高度
  .contetn_lr-item {
    flex: 1;
    min-height: 230px;
  }

  .contetn_center_top {
    flex: 1;
    min-height: 0;
  }

  .contetn_center-bottom {
    height: 260px;
    flex-shrink: 0;
  }

  // 右侧车辆监控表格
  .contetn_right_day_top {
    flex: 1;
    min-height: 200px;
  }
}

// 数据卡片样式
.data-card {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  height: 82px;
  box-sizing: border-box;
  flex-shrink: 0;

  //   &:hover {
  //     transform: translateY(-2px);
  //     box-shadow: 0 4px 12px rgba(0, 212, 170, 0.15);
  //   }

  .card-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    // background: linear-gradient(
    //   135deg,
    //   rgba(0, 212, 170, 0.1),
    //   rgba(0, 212, 170, 0.05)
    // );
    // border-radius: 8px;

    img {
      width: 50px;
      height: 50px;
    }
  }

  .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;

    .card-label {
      display: flex;
      align-items: center;
      color: #64748b;
      font-family: "PingFang TC";
      font-weight: 500;
      font-size: 14px;
      line-height: 17px;
    }

    .card-value {
      display: flex;
      align-items: baseline;
      gap: 4px;

      .number {
        display: flex;
        align-items: center;
        color: #1e293b;
        font-family: "PingFang SC";
        font-weight: 600;
        font-size: 19px;
        line-height: 26px;
      }

      .unit {
        font-size: 13px;
        color: #999999;
      }
    }
  }
}

// 大数字卡片样式
.big-number-card {
  background-image: url("../../assets/img/new/banner.png");
  background-size: cover;
  border-radius: 20px;
  padding: 15px 20px;
  color: #ffffff;
  height: 120px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;

  .card-title {
    color: #d1fae5;
    font-family: "PingFang TC";
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
  }

  .card-value {
    display: flex;
    align-items: baseline;

    .number {
      color: #ffffff;
      font-family: Outfit;
      font-weight: 700;
      font-size: 30px;
      line-height: 36px;
    }

    .unit {
      font-size: 15px;
      margin-left: 6px;
      opacity: 0.9;
    }
  }

  .card-desc {
    font-size: 12px;
    opacity: 0.85;
    padding-top: 4px;
    display: flex;

    align-items: center;
    .line {
      margin-right: 8px;
      width: 30px;
      height: 3px;
      border-radius: 9999px;
      background: #34d399;
    }
  }
}

@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>
