import TheTitle from "@/components/TheTitle";
import TheVideoGrid from "@/components/TheVideoGrid";
import request from "@/helpers/request";
import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { VideoItem } from "../../home/type";

export default defineComponent({
  name: "BoutiqueClass",
  setup() {
    //视频课
    const router = useRouter();
    const videoList = ref<VideoItem[]>([]);
    const getVideoList = async () => {
      try {
        const res = await request.post(
          "/api-website/open/videoLessonGroup/page",
          {
            data: { albumStatus: "PASS", page: 1, rows: 4 },
          }
        );
        if (res.data && Array.isArray(res.data.rows)) {
          videoList.value = res.data.rows;
        }
      } catch (error) {}
    };
    onMounted(() => {
      getVideoList();
    });
    return () => (
      <>
        <TheTitle title="精品视频课" onMore={() => router.push('/video')} />
        <TheVideoGrid
          list={videoList.value}
          onGoto={(item: any) =>
            router.push({
              path: "/videoDetail",
              query: { id: item.teacherId, groupId: item.id },
            })
          }
        />
      </>
    );
  },
});
