<template>
    <el-container class="flex-column" v-loading="loading">
        <div class="table-search" style="border-bottom: 0;">
            <el-form class="lv-form-inline" ref="searchForm" :model="searchKey" label-position="right" label-width="100px">
                <el-row :gutter="10">
                    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
                        <el-input v-model="searchKey.shop" placeholder="请选择店铺" clearbale readonly :style="{width:'100%'}" @click="selectStore">
                            <template #append>
                                <el-tooltip effect="dark" content="点这里，清除选择" placement="top-start">
                                    <div class="remove-a" @click="clearStore">清除</div>
                                </el-tooltip>
                            </template>
                            <template #prepend>选择店铺</template>
                        </el-input>
                    </el-col>
                </el-row>
            </el-form>
            <el-card shadow="never" class="borderNone mt10">
                <template #header>
                    <div class="news-title">今日营业额</div>
                </template>
                <div class="user-card-body">
                    <div class="card-item">
                        <div class="card-num">{{todayData?$TOOL.money(todayData.money):'0.00'}}</div>
                        <div class="card-tips">线上收款(元)
                        </div>
                    </div>
                    <div class="card-item">
                        <div class="card-num">{{todayData?$TOOL.money(todayData.user):'0.00'}}</div>
                        <div class="card-tips">会员卡支付(元)
                        </div>
                    </div>
                    <div class="card-item">
                        <div class="card-num">{{todayData?$TOOL.money(todayData.qrcode):'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>
            <div class="news-title mt10">线上支付总计（不涵盖会员卡支付和其他支付）</div>
        </div>
        <el-main class="nopadding">
            <div class="table-container">
                <el-table :data="tableData" style="width: 100%" border class="mt10">
                    <el-table-column label="类型" prop="name"></el-table-column>
                    <el-table-column label="支付类型" prop="type"></el-table-column>
                    <el-table-column label="订单数" prop="order">
                        <template #default="scope">
                            {{ scope.row.order }}单
                        </template>
                    </el-table-column>
                    <el-table-column label="订单金额" prop="money">
                        <template #default="scope">
                            {{ $TOOL.money(scope.row.money) }}
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <tablePage ref="tablePage" @success="tableHandle" @successFull="tableHandleFull"></tablePage> -->
            </div>
        </el-main>
    </el-container>
    <storeData ref="storeData" :multiple="false" @success="handleStore"></storeData>
</template>

<script>
import tablePage from './components/table';
import storeData from '@/views/manage/components/store';
export default {
    components: {
        tablePage,storeData
    },
    data() {
        return {
            tableData:[],
            todayData:null,
            loading:true,
            searchKey:{},
            searchData:{}
        }
    },
    mounted(){
        this.getData()
    },
    methods:{
        selectStore(){
            this.$nextTick(()=>{
                this.$refs.storeData.open()
            })
        },
        handleStore(data){
            this.searchKey.shop = data.shop_name;
            this.searchData.shop = data.shop_id;
            this.getData()
        },
        clearStore(){
            this.searchKey.shop = "";
            this.searchData.shop = "";
        },
        async getData() {
            this.loading = true;
            var resp = await this.$API.mQrcode.today.get(this.searchData);
            this.loading = false;
            if (resp.code == 0) {
                return this.$message.error(resp.msg)
            }
            this.tableData = resp.data.total;
            this.todayData = resp.data.today;
        }
    }
}
</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;
}
.remove-a{cursor: pointer;}
</style>