<template>
    <div class="refund-table-header">
        <div class="col-product">
            <el-checkbox
                :model-value="checkAll"
                :indeterminate="isIndeterminate"
                @change="handleChange"
            >
                全选
            </el-checkbox>
            <span class="ml-4">商品信息</span>
        </div>
        <div class="col-amount">实收金额/退款金额</div>
        <div class="col-buyer">买家</div>
        <div class="col-reason">售后原因</div>
        <div class="col-logistics">物流状态</div>
        <div class="col-status">售后状态</div>
        <div class="col-action">操作</div>
    </div>
</template>

<script setup>
    defineProps({
        checkAll: {
            type: Boolean,
            default: false
        },
        isIndeterminate: {
            type: Boolean,
            default: false
        }
    });

    const emit = defineEmits(['update:checkAll', 'change']);

    const handleChange = (val) => {
        emit('update:checkAll', val);
        emit('change', val);
    };
</script>

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

        div {
            text-align: center;
            padding: 0 10px;
        }

        .col-product {
            flex: 3;
            text-align: left;
            padding-left: 16px;
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        .col-amount {
            flex: 1;
        }

        .col-buyer {
            flex: 1;
        }

        .col-reason {
            flex: 1;
        }

        .col-logistics {
            flex: 1.5;
        }

        .col-status {
            flex: 1;
        }

        .col-action {
            flex: 1;
        }
    }
</style>
