<template>
  <div class="activeCourseArrangIndex">
    <div>
      <van-cell
        :title="n.name"
        is-link
        center
        v-for="n in list"
        :key="n.id"
        @click="onTo(n)"
      >
        <span slot="label"
          >未排课学生<span style="color: red"> {{ n.num }} </span>名</span
        >
      </van-cell>
      <m-empty v-if="!loading && !list.length"></m-empty>
    </div>
  </div>
</template>

<script>
import { getActivityUserMapper } from "./api";
import MEmpty from "../../components/MEmpty.vue";
export default {
  components: { MEmpty },
  name: "activeCourseArrangIndex",
  data() {
    return {
      loading: true,
      list: [],
    };
  },
  mounted() {
    let params = this.$route.query;
    if (params.Authorization) {
        localStorage.setItem("Authorization", decodeURI(params.Authorization));
        localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
    this.init();
    this.$store.commit("commit_set_active_course", {});
    this.$store.commit("commit_set_active_students", []);
  },
  methods: {
    async init() {
      this.loading = true
      const result = await getActivityUserMapper();
      if (result && result.data) {
        this.list = result.data;
      }
      this.loading = false
    },
    onTo(n) {
      const category = {
        ...this.$store.state.activeCourse,
        ...n,
      };
      this.$store.commit("commit_set_active_course", category);
      this.$router.push(
        `/selectStudent?categoryId=${n.id}&studentNum=${n.studentNum || 2}`
      );
    },
  },
};
</script>

<style lang="less">
body{
  background: #f3f4f8;
}
</style>
