<template>
    <el-container class="flex-column">
        <div class="table-search" style="border-bottom: 0;">
            <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</div>
                        <div class="card-tips">会员数量(个) 
                            <el-tooltip effect="dark" content="扫描店铺二维码领取会员卡的人数">
                                <el-icon><el-icon-question-filled /></el-icon>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="card-item">
                        <div class="card-num">0</div>
                        <div class="card-tips">充值人数(个)
                            <el-tooltip effect="dark" content="充值会员卡的人数">
                                <el-icon><el-icon-question-filled /></el-icon>
                            </el-tooltip>
                        </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 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 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 class="card-item">
                        <div class="card-num">0.00</div>
                        <div class="card-tips">剩余额度(元)
                            <el-tooltip effect="dark">
                                <template #content> 店铺会员卡剩余可充值余额=会员卡额度-会员总余额。<br />剩余余额为0时，会员卡将不能充值，<br />需提升额度或会员卡金额消费后才能充值</template>
                                <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>