<template>
    <div v-if="pageLoading">
        <el-main>
            <el-card shadow="never">
                <el-skeleton :rows="5" :animated="true"></el-skeleton>
            </el-card>
            <el-card shadow="never" style="margin-top: 15px;">
                <el-skeleton :animated="true"></el-skeleton>
            </el-card>
        </el-main>
    </div>
    <el-main v-else>
        <el-card shadow="never" header="实时概况（今日）" class="no-boder">
            <el-row :gutter="10">
                <el-col :span="6">
                    <div class="total-panel">
                        <div class="icon"><el-icon size="22" color="#4799ff"><el-icon-money /></el-icon></div>
                        <div class="right">
                            <div class="title">销售额 (元)</div>
                            <div class="number">0.00</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-panel">
                        <div class="right">
                            <div class="title">退款金额</div>
                            <div class="number">0.00</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-panel">
                        <div class="icon"><el-icon size="22" color="#4799ff"><el-icon-pie-chart /></el-icon></div>
                        <div class="right">
                            <div class="title">核销数</div>
                            <div class="number">0</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-panel">
                        <div class="right">
                            <div class="title">付款订单数</div>
                            <div class="number">0</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <div class="total-panel-list">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="total-panel padding15">
                        <div class="icon"><el-icon size="22" color="#4799ff"><el-icon-money /></el-icon></div>
                        <div class="right">
                            <div class="title">累计营业额</div>
                            <div class="number">0.00</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-panel padding15">
                        <div class="icon"><el-icon size="22" color="#4799ff"><el-icon-coin /></el-icon></div>
                        <div class="right">
                            <div class="title">累计退款</div>
                            <div class="number">0.00</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-panel padding15">
                        <div class="icon"><el-icon size="22" color="#4799ff"><el-icon-coin /></el-icon></div>
                        <div class="right">
                            <div class="title">累计付款总量</div>
                            <div class="number">0</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-panel padding15">
                        <div class="icon"><el-icon size="22" color="#4799ff"><el-icon-coin /></el-icon></div>
                        <div class="right">
                            <div class="title">消费总人数</div>
                            <div class="number">0.00</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="total-order-status">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="total-panel center no-flex">
                        <div class="title">待发货订单(笔)</div>
                        <div class="number">0</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-panel center no-flex">
                        <div class="title">售后单(笔)</div>
                        <div class="number">0</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-panel center no-flex">
                        <div class="title">待核销订单(笔)</div>
                        <div class="number">0</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="total-panel center no-flex">
                        <div class="title">待付款订单(笔)</div>
                        <div class="number">0</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="total-order-status mt10">
            <scEcharts height="500px" :option="option"></scEcharts>
        </div>
    </el-main>
</template>

<script>
import scEcharts from '@/components/scEcharts';
export default {
    components: {
        scEcharts
    },
    data(){
        return {
            pageLoading:false,
            option2: {},
            option: {
                title: {
                    left: 'left', 
                    text: '订单数据',
                },
                grid: {
                    top: '80px'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    x: 'center',
                    data: ['订单金额', '订单数']
                },
                calculable: true,
                xAxis: {
                    type: 'category',
                    data: ['06-25', '06-26', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03', '07-04']
                },
                yAxis: [{
                    type: 'value'
                }],
                // yAxis: [{type: 'value', splitLine: {show: true}, gridIndex: 0, axisLabel: {formatter: '{value} 单'}}],
                series: [{
                    name: '订单金额',
                    data: [120, 200, 50, 80, 170, 210, 130,450,244,168],
                    smooth: true, showBackground: false,
                    areaStyle: {color: 'rgba(64, 158, 254, 0.6)'},
                    type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
                    emphasis:{focus: 'series'},
                    label: {position: 'top', formatter: '{c}', show: true},
                },{
                    name: '订单数',
                    data: [20, 210, 10, 180, 110, 100, 130,450,244,168],
                    smooth: true, showBackground: false,
                    areaStyle: {color: 'rgba(54, 206, 159, 0.6)'},
                    type: 'line', showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
                    emphasis:{focus: 'series'},
                    label: {position: 'top', formatter: '{c}', show: true},
                }]
            },
        }
    }
}
</script>

<style>
.no-boder{border: 0;}
.total-panel{display: flex;align-items: center;gap: 20px;background-color: #fff;border-radius: 5px;flex: 1;}
.total-panel.padding15{padding: 15px;}
.total-panel.no-flex{flex-direction: column;justify-content: center;gap: 5px;}
.total-panel.no-flex .title{font-weight: bold;}
.total-panel.center .right{text-align: center;}
.total-panel .icon{width: 58px;height: 58px;border-radius: 50%;background-color: #eff6ff;display: flex;align-items: center;justify-content: center;}
.total-panel .title{font-size: 13px;color: #666;}
.total-panel .number{font-size: 24px;color: #000;line-height: 38px;}
.total-panel-list{margin: 20px 0;}
.total-order-status{background-color: #fff;padding: 20px;margin-top: 20px;}
.mt10{margin-top: 20px;}
</style>