<template>
  <div class="capacity-analysis-page">
    <div v-if="loading" class="loading-wrapper">
      <el-spinner />
      <span class="loading-text">正在分析预配套数据，请稍候...</span>
    </div>
    <capacity-analysis v-else-if="capacityAnalysisData" :analysis-data="capacityAnalysisData" />
    <el-empty v-else description="暂无产能分析数据" />
  </div>
</template>

<script>
import CapacityAnalysis from "./CapacityAnalysis.vue";
import { getCapacityAnalysisApi } from "@/api/system/operationPlanningMain";

export default {
  name: "CapacityAnalysisPage",
  components: {
    CapacityAnalysis
  },
  data() {
    return {
      loading: true,
      capacityAnalysisData: null
    };
  },
  created() {
    this.fetchCapacityData();
  },
  methods: {
    fetchCapacityData() {
      // 获取通过路由传递过来的参数
      const { productionOrderNo, productCode, productName } = this.$route.query;
      
      if (!productionOrderNo) {
        this.loading = false;
        this.$message.error('未获取到生产订单号');
        return;
      }
      if (!productCode) {
        this.loading = false;
        this.$message.error('未获取到产品编码');
        return;
      }

      this.loading = true;

      // 调用后端真实接口
      getCapacityAnalysisApi({ productionOrderNo, productCode, productName }).then(res => {
        // 如果后端返回的外层包装是 res.data
        if (res.code === 200) {
          this.capacityAnalysisData = res.data || res;
        } else {
          this.$message.error(res.msg || '产能分析查询失败');
        }
      }).catch(() => {
        this.$message.error('产能分析请求异常');
      }).finally(() => {
        this.loading = false;
      });
    }
  }
};
</script>

<style scoped>
.capacity-analysis-page {
  height: calc(100vh - 84px); /* 减去顶部导航栏高度 */
  overflow-y: auto;
  background-color: #f5f7fa;
}

.loading-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #909399;
}

.loading-text {
  margin-top: 15px;
  font-size: 14px;
}
</style>
