<template>
    <div class="rank">
        <div class="date-tabs">
            <div :class="active==i ? 'tab active' : 'tab'" v-for="(item,i) in tabs" @click="clickTab(item, i)">{{ item.label }}</div>
        </div>
        <div class="rank-title">骑行排行榜</div>
        <el-table size="small" :data="rankData">
            <el-table-column label="排名" align="center" width="80">
                <template slot-scope="scope">
                    <span>{{ scope.$index+1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="用户昵称" align="center"></el-table-column>
            <el-table-column prop="mobile" label="手机号码" align="center"></el-table-column>
            <el-table-column prop="count" label="骑行次数" align="center"></el-table-column>
        </el-table>
    </div>
</template>

<script>
    import api from '@/api/home'
    export default {
        name: "rank-list",
        data() {
            return {
                dataQuery: {
                    num: 0,
                    type: 0
                },
                active: 0,
                tabs: [
                    { value: 0, label: '今天' },
                    { value: 7, label: '7天' },
                    { value: 30, label: '30天' },
                    { value: 180, label: '180天' }
                ],
                rankData: []
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            getData() {
                api.getRankData(this.dataQuery).then(res => {
                    console.log(res)
                    this.rankData = res.results.top10
                }).catch(err => {
                    console.log(err)
                })
            },
            clickTab(item, i) {
                this.active = i
                this.dataQuery.num = item.value
                this.getData()
            }
        },
    }
</script>

<style scoped lang="scss">
    .rank {
        margin-top: 20px;
        background-color: #fff;
        padding: 5px 20px 20px;
        width: 80%;
        position: relative;
        &-title {
            background-color: #fff;
            color: #36a3f7;
            font-size: 1.2rem;
            padding-top: 15px;
            padding-left: 15px;
        }
        .el-table {
            margin-top: 20px;
            width: 100%;
        }
        .date-tabs {
            display: flex;
            position: absolute;
            top: 16px;
            right: 20px;
            z-index: 1;
            .tab {
                font-size: .9rem;
                color: #36a3f7;
                border: 1px solid #36a3f7;
                border-right: none;
                padding: 5px 12px;
                cursor: pointer;
                &:last-child {
                    border-right: 1px solid #36a3f7;
                }
            }
            .active {
                color: #fff;
                background: #36a3f7;
            }
        }
    }
</style>
