<!-- src/components/OrderSummaryTable.vue -->
<template>
  <div class="table-container">
    <h3 class="table-title">{{ title }}</h3>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%; margin-top: 20px;"
      :row-class-name="tableRowClassName"
      :span-method="objectSpanMethod"
      show-summary
      :summary-method="getSummaries"
      >
      <el-table-column prop="name" :label="nameLable" width="150" class-name="sticky-column" align="center">
        <template slot-scope="scope">
          <span :class="{'group-name': scope.row.isGroup}">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalCalls" label="总单数" width="80" align="center"></el-table-column>
      <el-table-column prop="totalAmount" label="总金额" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.totalAmount ? scope.row.totalAmount.toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
      <el-table-column prop="validAmount" label="成单金额" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.validAmount ? scope.row.validAmount.toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
      <el-table-column prop="waitingOrders" label="待审数" width="80" align="center"></el-table-column>
      <el-table-column prop="waitingAmount" label="待审金额" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.waitingAmount ? scope.row.waitingAmount.toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
      <el-table-column prop="unPassedOrders" label="未过数" width="80" align="center"></el-table-column>
      <el-table-column prop="unPassedAmount" label="未过金额" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.unpassedAmount ? scope.row.unpassedAmount.toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
      <el-table-column prop="cancelOrders" label="取消数" width="80" align="center"></el-table-column>
      <el-table-column prop="cancelAmount" label="取消金额" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.cancelAmount ? scope.row.cancelAmount.toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
      <el-table-column prop="completeOrders" label="成交数" width="120" align="center"></el-table-column>
      <el-table-column prop="completeAmount" label="成交金额" width="130" align="center">
        <template slot-scope="scope">
          {{ scope.row.completeAmount ? scope.row.completeAmount.toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
      <el-table-column prop="unshippedOrders" label="成交未发货数" width="120" align="center"></el-table-column>
      <el-table-column prop="unshippedAmount" label="成交未发货金额" width="130" align="center">
        <template slot-scope="scope">
          {{ scope.row.unshippedAmount ? scope.row.unshippedAmount.toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
      <el-table-column prop="shippedOrders" label="发货数" width="80" align="center"></el-table-column>
      <el-table-column prop="shippedAmount" label="发货金额" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.shippedAmount ? scope.row.shippedAmount.toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
      <el-table-column prop="transitOrders" label="在途数" width="80" align="center"></el-table-column>
      <el-table-column prop="transitAmount" label="在途金额" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.transitAmount ? scope.row.transitAmount.toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
      <el-table-column prop="receivedOrders" label="签收数" width="80" align="center"></el-table-column>
      <el-table-column prop="receivedAmount" label="签收金额" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.receivedAmount ? scope.row.receivedAmount.toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
      <el-table-column prop="returnOrders" label="退货数" width="80" align="center"></el-table-column>
      <el-table-column prop="returnAmount" label="退货金额" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.returnAmount ? scope.row.returnAmount.toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
      <el-table-column prop="paybackOrders" label="回款数" width="80" align="center"></el-table-column>
      <el-table-column prop="paybackAmount" label="回款金额" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.paybackAmount ? scope.row.paybackAmount.toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'OrderSummaryTable',
  props: {
    title: {
      type: String,
      required: true
    },
    tableData: {
      type: Array,
      default: () => []
    },
    nameLable: {  // 新增 prop
      type: String,
      default: '姓名/工号'
    }
  },
  watch: {
    tableData: {
      handler(newVal) {
        console.log('接收到的tableData:', newVal);
        console.log('tableData长度:', newVal ? newVal.length : 0);
      },
      immediate: true
    }
  },
  mounted() {
    console.log('组件挂载时的tableData:', this.tableData);
    console.log('tableData长度:', this.tableData ? this.tableData.length : 0);
  },
  methods: {
    // 表格行样式
    tableRowClassName({ row, rowIndex }) {
      if (row.isGroup) {
        return 'group-row';
      }
      return '';
    },
    // 表格合并方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      return {
        rowspan: 1,
        colspan: 1
      };
    },
    // 合计方法
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      const sumFields = ['totalCalls', 'totalAmount', 'validAmount', 'waitingOrders', 'waitingAmount',
        'unPassedOrders', 'unPassedAmount', 'cancelOrders', 'cancelAmount', 'completeOrders',
        'completeAmount', 'unshippedOrders', 'unshippedAmount', 'shippedOrders', 'shippedAmount',
        'transitOrders', 'transitAmount', 'receivedOrders', 'receivedAmount', 'returnOrders',
        'returnAmount', 'paybackOrders', 'paybackAmount'];
      
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        
        if (sumFields.includes(column.property)) {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => Number.isNaN(value))) {
            const sum = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!Number.isNaN(value)) {
                return prev + value;
              } else {
                return prev;
              }
            }, 0);
            
            // 对于金额字段保留两位小数
            if (column.property && column.property.includes('Amount')) {
              sums[index] = sum.toFixed(2);
            } else {
              sums[index] = sum;
            }
          } else {
            sums[index] = '0';
          }
        } else {
          sums[index] = '';
        }
      });

      return sums;
    }
  } 
}
</script>

<style scoped>
.table-container {
  margin-top: 30px;
}

.table-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
</style>