<template>
    <van-grid class="statistic-grid" :column-num="columnNum" :border="false">
        <van-grid-item class="statistic-item" v-for="(item, index) in statisticData" :key="index">
            <template #default>
                <section class="flx-col">
                    <header class="title">
                        {{ item.label | titleFilter }}
                    </header>
                    <main class="value">
                        {{ item.value | numberFilter }}
                    </main>
                </section>
            </template>
        </van-grid-item>
    </van-grid>
</template>

<script>
export default {
    name: 'LjStatistic',
    props: {
        // 列数
        columnNum: {
            type: Number,
            default: 4
        },
        data: {
            type: Array,
            default: () => ([]),
        },
        statistic: {
            type: Array,
            default: () => ([]),
        },
    },
    data() {
        return {
            statisticData: [],
        }
    },
    watch: {
        data: {
            handler(val, oldVal) {
                this.statisticData = this.statistic.filter(o => {
                    let tg = val.find(item => item.label === o.label);
                    o.value = tg ? tg.value : 0;
                    if (o.power) {
                        return o.power();
                    } else {
                        return true;
                    }
                });
            },
            deep: true
        }
    },
    filters: {
        titleFilter(val) {
            return val.replace(/【/g, "").replace(/】/g, "");
        },
        numberFilter(num) {
            let sum = Math.floor((num) * Math.pow(10, 1)) / Math.pow(10, 1);
            sum = parseFloat(sum).toFixed(1);
            return sum;
        }
    }
}
</script>

<style lang="less">
.statistic-grid {
    margin: 0 12px;
    margin-bottom: 12px;
    border-radius: 8px;
    background-color: @light-barkground-secondary;
    overflow: hidden;
}
.statistic-item {
    text-align: center;
    .title {
        font-size: 12px;
        color: @light-label-secondary;
    }

    .value {
        font-size: 18px;
        font-weight: bold;
        color: @light-label-primary;
    }
}
</style>