<template>
    <el-container class="flex-column">
        <div class="table-search" style="border-bottom: 0;">
            <el-alert class="mb10" title="温馨提示" type="error" :closable="false" description="当天数据统计非实时，如查看觉得数据不对，请过0点后刷新看前一天数据为准"></el-alert>
            <el-card shadow="never" class="borderNone mb10">
                <template #header>
                    <div class="news-title">累计营业额</div>
                </template>
                <div class="user-card-body">
                    <div class="card-item">
                        <div class="card-num">0.00</div>
                        <div class="card-tips">线上收款(元)
                        </div>
                    </div>
                    <div class="card-item">
                        <div class="card-num">0.00</div>
                        <div class="card-tips">会员卡支付(元)
                        </div>
                    </div>
                    <div class="card-item">
                        <div class="card-num">0.00</div>
                        <div class="card-tips">其他支付(元)
                            <el-tooltip effect="dark" content="收款码付款金额">
                                <el-icon><el-icon-question-filled /></el-icon>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </el-card>
            <search @success="handleSuccess"></search>
        </div>
        <el-main class="nopadding">
            <div class="table-container">
                <tablePage ref="tablePage" @success="tableHandle" @successFull="tableHandleFull"></tablePage>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import tablePage from './components/table';
import search from './components/search';
export default {
    components: {
        tablePage,search
    },
    data() {
        return {
            
        }
    },
}
</script>

<style>
.user-card-body{display: flex;align-items: center;justify-content: space-around;padding: 10px 0;}
.user-card-body .card-item{text-align: center;}
.user-card-body .card-tips{font-size: 12px;color: #666;display: flex;align-items: center;}
.user-card-body .card-tips i{font-style: normal;margin-left: 5px;}
.user-card-body .card-num{font-size: 20px;font-weight: bold;}
.mb10{margin-bottom: 15px;}
.news-title{
    font-size: 16px;
    color: #000;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.news-title::before{
    content: "";
    width: 4px;
    height: 16px;
    display: block;
    background-color: var(--el-color-primary);;
    margin-right: 8px;
}
</style>