<template>
    <div class="activeProgram">
        <van-cell-group :border="false" v-if="dataShow">
            <van-cell v-for="(item, index) in dataList" :key="index"
                :title="item.activityName"
                title-class="titleStyle"
                :value="item.studentNum+'人'"
                value-class="valueStyle"
                class="activeItem" is-link
                @click="onDetail(item)" />
        </van-cell-group>
        <m-empty class="empty" msg="暂无活动方案" v-else key="data" />
    </div>
</template>

<script>
import MEmpty from "@/components/MEmpty";
import { queryWaitCourseActivity } from './api'
export default {
    name: 'activeProgram',
    components: {
        MEmpty
    },
    data() {
        return {
            dataShow: true, // 是否有数据
            dataList: [],
        }
    },
    mounted() {
        let params = this.$route.query;
        console.log(params.Authorization)
        if (params.Authorization) {
            localStorage.setItem("Authorization", decodeURI(params.Authorization));
            localStorage.setItem("userInfo", decodeURI(params.Authorization));
        }
        document.title = '活动方案'
        this.getActiveList()
    },
    methods: {
        async getActiveList() {
            try {
                const res = await queryWaitCourseActivity()
                this.dataList = [...res.data]
                if(this.dataList.length <= 0) {
                    this.dataShow = false
                }
            } catch {
                //
            }
        },
        onDetail(item) {
            this.$router.push({
                path: '/activeDetail',
                query: {
                    activityId: item.activityId
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.activeProgram {
    background-color: #F5F5F5;
    min-height: 100vh;
    overflow: hidden;
}
.activeItem {
    padding: .14rem 16px;
    font-size: .16rem;
    line-height: .24rem;
    .titleStyle {
        color: #1A1A1A;
        flex: 0 auto;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .valueStyle {
        color: #01C1B5;
        font-weight: 500;
        flex-basis: 20%;
    }
}
</style>