import TheTitle from "@/components/TheTitle";
import TheVideoGrid from "@/components/TheVideoGrid";
import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
import Banner from "../components/banner";
import styles from "./index.module.less";
import { VideoItem } from "@/views/home/type";
import request from "@/helpers/request";
import TheFooterApp from "@/components/TheFooterApp";
import { List } from "vant";
import { useToggle } from "@vant/use";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "indexVideo",
  setup() {
    //视频课
    const router = useRouter();
    const [loading, toggle] = useToggle(false);
    const finish = ref(false);
    const parmas = reactive({
      albumStatus: "PASS",
      page: 1,
      rows: 10,
    });
    const videoList = ref<VideoItem[]>([]);
    const getVideoList = async () => {
      if (loading.value) return;
      toggle(true);
      try {
        const res = await request.post(
          "/api-website/open/videoLessonGroup/page",
          {
            data: parmas,
          }
        );
        if (res.data && Array.isArray(res.data.rows)) {
          videoList.value = [].concat(videoList.value as any, res.data.rows);
          if (res.data.rows.length) {
            parmas.page = res.data.pageNo + 1;
          } else {
            finish.value = true;
          }
        }
      } catch (error) {}
      nextTick(() => {
        toggle(false);
      });
    };
    return () => (
      <div class={styles.indexVideo}>
        <Banner />
        <TheTitle title="精品视频课" isMore={false} />
        <List
          loading={loading.value}
          finished={finish.value}
          finishedText="没有更多了"
          onLoad={() => getVideoList()}
        >
          <TheVideoGrid
            list={videoList.value}
            onGoto={(item) =>
              router.push({
                path: "/videoDetail",
                query: { id: item.teacherId, groupId: item.id },
              })
            }
          />
        </List>
        {/* <TheFooterApp /> */}
      </div>
    );
  },
});
