<template>
    <ele-card>
        <el-row :gutter="24">
            <el-col :span="8">
                <div class="flex justify-center items-center">
                    <el-icon size="40" color="#E6A23C"><SoldOut /></el-icon>
                    <div class="flex flex-col ml-6">
                        <div class="text-lg text-theme">待发货订单</div>
                        <div class="text-3xl text-theme">{{
                            detail?.waitSendOrderNum || 0
                        }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="flex justify-center items-center border-l">
                    <el-icon size="40" color="#F56C6C"><Wallet /></el-icon>
                    <div class="flex flex-col ml-6">
                        <div class="text-lg text-theme">退款待审核</div>
                        <div class="text-3xl text-theme">{{
                            detail?.waitRefundOrderNum || 0
                        }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="flex justify-center items-center border-l">
                    <el-icon size="40" color="#409EFF"
                        ><ChatDotSquare
                    /></el-icon>
                    <div class="flex flex-col ml-6">
                        <div class="text-lg text-theme">待处理工单</div>
                        <div class="text-3xl text-theme">{{
                            detail?.waitHandleWorkOrderNum || 0
                        }}</div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </ele-card>
</template>

<script setup>
    import { SoldOut, Wallet, ChatDotSquare } from '@element-plus/icons-vue';

    defineProps({
        detail: {
            type: Object,
            default: () => ({})
        }
    });
</script>
