<template>
  <div class="current-situation-area">
    <el-row :gutter="20" v-if="mode === 'normal'">
      <!-- 订单所需的产品统计 -->
      <el-col :span="8">
        <el-card shadow="hover" class="situation-card">
          <div slot="header" class="card-header">
            <span>订单所需的产品统计</span>
          </div>
          <div class="table-container">
            <KLPTable :data="orderProductStatistics" size="small" height="320"
              v-loading="!orderProductStatistics.length">
              <el-table-column prop="productName" label="产品名称" width="120" />
              <el-table-column prop="orderDemandQuantity" label="需求数量" width="80" />
              <el-table-column prop="currentStockQuantity" label="库存数量" width="80" />
              <el-table-column prop="stockGap" label="库存缺口" width="80">
                <template slot-scope="scope">
                  <span :class="getStockGapClass(scope.row.stockGap)">
                    {{ scope.row.stockGap }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="relatedOrderCount" label="相关订单" width="80" />
            </KLPTable>
            <div v-if="!orderProductStatistics.length" class="empty-data">
              <i class="el-icon-warning-outline"></i>
              <p>暂无数据</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 根据参数计算的原料需求 -->
      <el-col :span="8">
        <el-card shadow="hover" class="situation-card">
          <div slot="header" class="card-header">
            <span>参数原料需求</span>
          </div>
          <div class="table-container">
            <KLPTable :data="productMaterialRequirements" size="small" height="320"
              v-loading="!productMaterialRequirements.length">
              <el-table-column prop="productName" label="产品" width="100" />
              <el-table-column prop="materialName" label="原料" width="100" />
              <el-table-column prop="requiredQuantity" label="需求数量" width="80" />
              <el-table-column prop="currentStockQuantity" label="库存" width="60" />
              <el-table-column prop="inTransitQuantity" label="在途" width="60" />
              <el-table-column prop="stockGap" label="缺口" width="60">
                <template slot-scope="scope">
                  <span :class="getStockGapClass(scope.row.stockGap)">
                    {{ scope.row.stockGap }}
                  </span>
                </template>
              </el-table-column>
            </KLPTable>
            <div v-if="!productMaterialRequirements.length" class="empty-data">
              <i class="el-icon-warning-outline"></i>
              <p>暂无数据</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 原料库存和需求情况 -->
      <el-col :span="8">
        <el-card shadow="hover" class="situation-card">
          <div slot="header" class="card-header">
            <span>原料库存情况</span>
          </div>
          <div class="table-container">
            <KLPTable :data="rawMaterialInventory" size="small" height="320" v-loading="!rawMaterialInventory.length">
              <el-table-column prop="materialName" label="原料名称" width="120" />
              <el-table-column prop="currentStockQuantity" label="库存" width="60" />
              <el-table-column prop="inTransitQuantity" label="在途" width="60" />
              <el-table-column prop="totalRequiredQuantity" label="需求" width="60" />
              <el-table-column prop="stockGap" label="缺口" width="60">
                <template slot-scope="scope">
                  <span :class="getStockGapClass(scope.row.stockGap)">
                    {{ scope.row.stockGap }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="stockStatus" label="状态" width="60">
                <template slot-scope="scope">
                  <el-tag :type="getStockStatusType(scope.row.stockStatus)" size="mini">
                    {{ scope.row.stockStatus }}
                  </el-tag>
                </template>
              </el-table-column>
            </KLPTable>
            <div v-if="!rawMaterialInventory.length" class="empty-data">
              <i class="el-icon-warning-outline"></i>
              <p>暂无数据</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div class="current-situation-area-mini" v-else>
      <el-card shadow="hover" class="situation-card">
        <div slot="header" class="card-header">
          <span>订单所需的产品统计</span>
        </div>
        <div class="table-container">
          <KLPTable :data="orderProductStatistics" size="small" height="320" v-loading="!orderProductStatistics.length">
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="orderDemandQuantity" label="需求数量" />
            <el-table-column prop="currentStockQuantity" label="库存数量" />
            <el-table-column prop="stockGap" label="库存缺口">
              <template slot-scope="scope">
                <span :class="getStockGapClass(scope.row.stockGap)">
                  {{ scope.row.stockGap }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="relatedOrderCount" label="相关订单" />
          </KLPTable>
          <div v-if="!orderProductStatistics.length" class="empty-data">
            <i class="el-icon-warning-outline"></i>
            <p>暂无数据</p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CurrentSituationArea',
  props: {
    currentSituationArea: {
      type: Object,
      required: true,
      default: () => ({})
    },
    mode: {
      type: String,
      default: 'normal'
    }
  },
  computed: {
    orderProductStatistics() {
      return this.currentSituationArea.orderProductStatistics || []
    },
    productMaterialRequirements() {
      return this.currentSituationArea.productMaterialRequirements || []
    },
    rawMaterialInventory() {
      return this.currentSituationArea.rawMaterialInventory || []
    }
  },
  methods: {
    getStockGapClass(stockGap) {
      if (stockGap > 0) {
        return 'text-danger'
      } else if (stockGap === 0) {
        return 'text-success'
      } else {
        return 'text-warning'
      }
    },
    getStockStatusType(status) {
      switch (status) {
        case '充足':
          return 'success'
        case '不足':
          return 'warning'
        case '紧急':
          return 'danger'
        default:
          return 'info'
      }
    }
  }
}
</script>

<style scoped>
.current-situation-area {
  margin-bottom: 20px;
}

.situation-card {
  height: 400px;
}

.card-header {
  font-weight: bold;
  color: #303133;
}

.table-container {
  height: 320px;
  overflow: hidden;
}

.text-danger {
  color: #f56c6c;
  font-weight: bold;
}

.text-success {
  color: #67c23a;
  font-weight: bold;
}

.text-warning {
  color: #e6a23c;
  font-weight: bold;
}

.empty-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #909399;
}

.empty-data i {
  font-size: 48px;
  margin-bottom: 10px;
}

.empty-data p {
  margin: 0;
  font-size: 14px;
}
</style>