<template>
    <div class="custom-table-header">
        <div class="th-item col-product">商品信息</div>
        <div class="th-item col-price">单价</div>
        <div class="th-item col-qty">数量</div>
        <div class="th-item col-aftersales">售后</div>
        <div class="th-item col-buyer">买家</div>
        <div class="th-item col-payment">实收款</div>
        <div class="th-item col-logistics">发货物流</div>
        <div class="th-item col-status">交易状态</div>
        <div class="th-item col-action">操作</div>
    </div>
</template>

<script setup></script>

<style lang="scss" scoped>
    .custom-table-header {
        display: flex;
        background-color: #f5f7fa;
        padding: 10px 0;
        font-weight: bold;
        color: #606266;
        margin-top: 10px;
        border: 1px solid #ebeef5;
        border-bottom: none;

        .th-item {
            text-align: center;
            padding: 0 5px;
            font-size: 13px;
        }
    }

    // Column Widths - Keep consistent with OrderItem
    .col-product {
        flex: 1;
        min-width: 200px;
        text-align: left !important;
        padding-left: 15px !important;
    }

    .col-price {
        width: 100px;
        flex: none;
    }

    .col-qty {
        width: 80px;
        flex: none;
    }

    .col-aftersales {
        width: 100px;
        flex: none;
    }

    .col-buyer {
        width: 150px;
        flex: none;
    }

    .col-payment {
        width: 120px;
        flex: none;
    }

    .col-logistics {
        width: 150px;
        flex: none;
    }

    .col-status {
        width: 120px;
        flex: none;
    }

    .col-action {
        width: 120px;
        flex: none;
    }
</style>
