<template>
  <div class="app-container">
    <div class="box">
      <Filter
        v-model="filterData"
        :config="filterConfig"
        :actions="[]"
        @change="init"
      />
      <div class="nav">
        <el-radio-group v-model="active" size="large" @change="handleChange">
          <el-radio-button label="整体" :value="0" />
          <el-radio-button label="学员" :value="1" />
        </el-radio-group>
      </div>
      <template v-if="filterData.classId">
        <Whole v-if="active === 0" ref="wholeRef" :filter="filterData" />
        <Student v-if="active === 1" ref="studentRef" :filter="filterData" />
      </template>
    </div>
  </div>
</template>

<script setup>
import Filter from "@/components/Filter/index.vue";
import Table from "@/components/Table/index.vue";
import Whole from "./Whole.vue";
import Student from "./Student.vue";
import { useRoute } from "vue-router";
import { nextTick, onMounted } from "vue";
import { getCurrentStaffClassList } from "@/api";

const route = useRoute();
const active = ref(0);

const filterData = ref({}); //过滤
const filterConfig = computed(() => [
  {
    comName: "el-select",
    label: "班级",
    prop: "classId",
    clearable: false,
    showAll: false,
    options: classList.value,
    selectConfig: {
      label: "className",
      value: "id",
    },
  },
]);

// 查询班级
const classList = ref([]);
function initClassList() {
  getCurrentStaffClassList().then((res) => {
    classList.value = res.data;
    filterData.value.classId = res.data[0]?.id || "";
  });
}

const wholeRef = ref();
const studentRef = ref();
async function init() {
  if (active.value === 0) {
    wholeRef.value?.init();
  }
  if (active.value === 1) {
    studentRef.value?.init();
  }
}

onMounted(() => {
  initClassList();
});
</script>
<style scoped lang="scss">
.app-container {
  position: relative;
  form {
    margin: 0 auto;
  }
  .box {
    background: #fff;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    .nav {
      text-align: center;
    }
  }
}

.select-type {
  text-align: center;
}
.select-btns {
  display: inline-flex;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #0079fe;
  .select-btn {
    width: 200px;
    height: 30px;
    text-align: center;
    line-height: 28px;
    color: #0079fe;
    cursor: pointer;
    font-weight: bold;
    &.active {
      background-color: #0079fe;
      color: #fff;
    }
  }
}
</style>
