<template>
  <el-table :data="list" :header-cell-style="{ background: '#f8f9fa', color: '#333', fontWeight: 'bold', borderBottom: 'none' }" style="width: 100%" class="custom-table">
    <el-table-column type="index" label="序号" width="60" align="center" />
    <el-table-column prop="customerName" label="名称" min-width="180" align="center" />
    <el-table-column label="同比" width="120" align="center">
      <template slot-scope="{ row }">
        <span class="trend-cell" :class="row.yoy >= 0 ? 'text-green' : 'text-red'">
          <i :class="row.yoy >= 0 ? 'el-icon-top' : 'el-icon-bottom'" />
          {{ Math.abs(row.yoy * 100).toFixed(0) }}%
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="orderQty" label="订单量" width="100" align="center" />
  </el-table>
</template>

<script>
export default {
  name: 'ShipOrderData',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-table {
  &::before {
    display: none;
  }
  ::v-deep .el-table__row > td {
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 0;
  }
}

.trend-cell {
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  
  &.text-green {
    color: #52c41a;
  }
  
  &.text-red {
    color: #f5222d;
  }
}
</style>
