<template>
    <widget-card :bodyStyle="bodyStyle">
        <template #header>
            <div class="header">
                <span>Top50</span>
                <el-select
                    style="width: 120px;"
                    size="mini"
                    v-model="value"
                    @change="changeSelect"
                    placeholder="请选择"
                >
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </template>
        <div class="list">
            <div class="empty" v-if="list.length === 0">
                暂无记录
            </div>
            <router-link
                :to="{
                    path: '/minterEdit',
                    query: {
                        id: item.to_user_id
                    }
                }"
                class="card"
                v-for="(item, index) in list"
                :key="index"
            >
                <div class="no">NO.{{ index + 1 }}</div>
                <div class="content">
                    <div class="text1">{{ item.to_user }}</div>
                    <div class="text2">{{ item.total }}元</div>
                </div>
            </router-link>
        </div>
    </widget-card>
</template>
<script>
import { format, parse, addMonths } from 'date-fns';
import WidgetCard from './WidgetCard';

export default {
    data() {
        return {
            bodyStyle: {
                overflow: 'auto'
            },
            value: '',
            options: [],
            list: []
        };
    },
    components: {
        WidgetCard
    },
    mounted() {
        let options = [];
        this.value = format(new Date(), 'yyyy-MM');
        for (let i = 0; i < 7; i++) {
            options.push({
                label: format(addMonths(new Date(), 0 - i), 'yyyy-MM'),
                value: format(addMonths(new Date(), 0 - i), 'yyyy-MM')
            });
        }
        this.options = options;

        this.changeSelect();
    },
    methods: {
        changeSelect() {
            this.$nextTick(() => {
                this.$http
                    .get('/statistic/top', {
                        year: format(parse(this.value, 'yyyy-MM', new Date()), 'yyyy'),
                        month: format(parse(this.value, 'yyyy-MM', new Date()), 'M')
                    })
                    .then(res => {
                        this.list = res;
                    });
            });
        }
    }
};
</script>
<style lang="less" scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/deep/.el-card {
    overflow: hidden;
}

.list {
    display: flex;
    flex-wrap: wrap;
    .card {
        display: flex;
        align-items: center;
        padding: 25px 25px;
        border-radius: 4px;
        cursor: pointer;
        background-color: #f5f7fa;
        margin: 20px 30px 0 0;
        border: 1px solid #f2f4f5;
        box-shadow: 0 2px 10px 0px #f2f4f5;
        .no {
            color: #4dcc6f;
            font-size: 18px;
            font-weight: bold;
        }
        .content {
            margin-left: 10px;
            .text1 {
                font-size: 14px;
                color: #666666;
                font-weight: bold;
                text-align: center;
            }
            .text2 {
                font-size: 16px;
                color: #000;
                text-align: center;
                margin-top: 3px;
            }
        }

        &:nth-child(n + 4) {
            .no {
                color: #000;
            }
        }

        &:hover {
            box-shadow: 0 2px 10px 0px #feb30e70;
            .text2 {
                color: #feb30e;
                font-weight: bold;
            }
        }
    }
}

.empty {
    font-size: 14px;
    text-align: center;
    flex-grow: 1;
    padding: 30px;
}
</style>
