<template>
  <div class="statistics-panel">
    <div class="stat-item" v-for="(item, index) in statisticsData" :key="index">
      <div class="icon-wrapper">
        <svg-icon :icon-class="item.icon" class="icon" />
      </div>
      <div class="stat-info">
        <count-to
          :start-val="0"
          :end-val="item.value"
          :duration="2000"
          class="num"
        />
        <div class="text">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
import { GetDataByNames } from "@/api/common";

export default {
  name: "StatisticsPanel",
  components: {
    CountTo,
  },
  data() {
    return {
      statisticsData: [
        { icon: "order-total-count", text: "未开始", value: 0 },
        { icon: "order-produced", text: "进行中", value: 0 },

        { icon: "order-total", text: "已完成", value: 0 },
        { icon: "order-uncompleted", text: "已超期", value: 0 },
        { icon: "order-producing", text: "未发货", value: 0 },
        { icon: "order-completed", text: "部分发货", value: 0 },
        { icon: "order-unproduced", text: "已发货待服务", value: 0 },
      ],
    };
  },
  created() {
    // 初始化时获取数据
    this.initData();
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer);
    }
  },
  methods: {
    async initData() {
      const send_select_list = [
        {
          name: "getStatisticsPanelNumsOfProduction", // 注意：这里需要根据实际的后端接口名称调整
          offset: 0,
          pagecount: 0,
          parammaps: {},
        },
      ];
      try {
        const response = await GetDataByNames(send_select_list);
        const backendData =
          response.data.getStatisticsPanelNumsOfProduction.list || [];

        // 更新固定面板的数值
        backendData.forEach((item) => {
          const target = this.statisticsData.find(
            (stat) => stat.icon === item.icon
          );
          if (target) {
            target.value = item.value;
          }
        });
      } catch (error) {
        console.error("获取数据失败:", error);
        throw error;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.statistics-panel {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  gap: 24px;

  .stat-item {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 120px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0 8px;

    &:hover {
      transform: translateY(-2px);
      .icon-wrapper {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        .icon {
          color: #409eff;
        }
      }
      .stat-info {
        .num {
          color: #409eff;
        }
      }
    }

    &:active {
      transform: translateY(0);
    }

    .icon-wrapper {
      width: 48px;
      height: 48px;
      min-width: 48px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 12px;
      transition: all 0.3s ease;
      background: #f5f7fa;

      .icon {
        width: 100%;
        height: 100%;
        color: #333;
        transition: all 0.3s ease;
      }
    }

    .stat-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;

      .num {
        font-size: 20px;
        font-weight: 600;
        color: #1f2d3d;
        line-height: 1;
        margin-bottom: 8px;
      }

      .text {
        font-size: 13px;
        color: #606266;
        white-space: nowrap;
      }
    }
  }
}
</style>
