<template>
  <view class="h-full box-border px-30 flex flex-col">
    <view class="flex items-center justify-between py-30">
      <text class="text-30 text-fore-title font-bold">我的班级</text>
      <view>
        <ie-picker ref="pickerRef" v-model="classId" :list="classList" placeholder="选择班级" title="选择班级" icon="arrow-down"
          key-label="name" key-value="classId" @change="handleClassChange"></ie-picker>
      </view>
    </view>
    <view class="flex-1 min-h-1 relative">
      <view class="absolute inset-0">
        <scroll-view class="h-full" scroll-y>
          <slot :teachClass="selectedClass"></slot>
        </scroll-view>
      </view>
    </view>
  </view>

</template>
<script lang="ts" setup>
import { TeachClass } from '@/types/study';
import { getTeachClassList } from '@/api/modules/study';
const classId = ref<number | null>(null);
const classList = ref<TeachClass[]>([]);
const selectedClass = ref<TeachClass>();
const pickerRef = ref();
const loadData = async () => {
  try {
    const { data } = await getTeachClassList({});
    classList.value = data;
    classId.value = classList.value[0].classId;
    selectedClass.value = classList.value[0];
  } catch (error) {
    console.log(error);
  }
}
onMounted(() => {
  loadData();
});
const handleClassChange = (value: number, selectedItem: TeachClass) => {
  classId.value = value;
  selectedClass.value = selectedItem;
}
</script>
<style lang="scss" scoped></style>