<template>
    <el-row :gutter="50" class="situation">
        <el-col :span="6" v-for="(item, i) in list[type]" :key="i">
            <el-card>
                <p class="text">{{ item.text }}</p>
                <p class="sum"><count-to :start-val="0" :end-val="item.sum" :duration="2000" /></p>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import CountTo from 'vue-count-to'
export default {
    name: "situation",
    components: {
        CountTo
    },
    props: {
        type: {
            type: String,
            default: 'deposit'
        }
    },
    data() {
        return {
            list: {
                deposit: [
                    { text: '昨日新增押金(元)', sum: 1212 },
                    { text: '昨日退还押金(元)', sum: 212 },
                    { text: '本月累计押金(元)', sum: 54156 },
                    { text: '总押金(元)', sum: 421354 },
                ],
                gains: [
                    { text: '昨日新增收益(元)', sum: 3212 },
                    { text: '总收益(元)', sum: 145612212 },
                    { text: '昨日新增利润(元)', sum: 541 },
                    { text: '总利润(元)', sum: 421354 },
                ],
            }
        }
    },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.situation {
    text-align: center;
    .text {
        font-size: 20px;
    }
    .sum {
        font-size: 2rem;
        letter-spacing: 3px;
        margin: 20px 0 10px;
    }
}
</style>