import TheDown from "@/components/TheDown";
import TheFooterApp from "@/components/TheFooterApp";
import TheHeader from "@/components/TheHeader";
import TheImage from "@/components/TheImage";
import request from "@/helpers/request";
import { Divider, Tab, Tabs } from "vant";
import { defineComponent, onMounted, reactive, ref, watch } from "vue";
import { useRoute } from "vue-router";
import styles from "./index.module.less";
import Info from "./Info";

export default defineComponent({
  name: "videoDetail",
  setup() {
    const route = useRoute();
    watch(route, () => {
      history.go(0)
    })
    const { groupId, id: teacherId } = route.query;
    const state = reactive({
      detailList: [] as any,
      lessonGroup: {} as any,
      teacher: {} as any,
      otherList: [] as any,
    });
    const getDetail = async () => {
      try {
        const { data } = await request.get(
          `/api-website/open/videoLessonGroup/selectVideoLesson?groupId=${groupId}`
        );
        state.lessonGroup = data.lessonGroup;
        state.detailList = data.detailList;
      } catch (error) {}
    };
    const getTeacher = async () => {
      try {
        const { data } = await request.get(
          `api-website/open/teacher/detail/${teacherId}`
        );
        state.teacher = data;
      } catch (err) {}
    };
    const getOther = async () => {
      try {
        const { data } = await request.post(
          "/api-website/open/videoLessonGroup/otherLesson",
          {
            data: {
              videoLessonGroupId: groupId,
            },
          }
        );
        state.otherList = data;
      } catch (error) {}
    };
    const init = () => {
      getDetail();
      getTeacher();
      getOther();
    }
    onMounted(() => {
      init()
    });
    const donwRef = ref()
    return () => {
      const { lessonGroup, otherList, teacher, detailList } = state;
      return (
        <div class={styles.videoDetail}>
          <div class={styles.sticky}>
            <img class={styles.bgImg} src={lessonGroup.lessonCoverUrl}/>
            <TheHeader theme="dark" />
          </div>
          <div class={styles.pic}>
            <TheImage src={lessonGroup.lessonCoverUrl} />
          </div>
          <div class={styles.content}>
            <div class={styles.wrap}>
              <Tabs lineHeight={0} background="#F7F8F7">
                <Tab title="信息简介">
                  <div class={styles.wrapItem}>
                    <Info
                      lessonGroup={lessonGroup}
                      videoList={otherList}
                      teacher={teacher}
                    />
                  </div>
                </Tab>
                <Tab title="课程列表">
                  <div class={styles.classWrap}>
                    {detailList.map(
                      (n: any) => (
                        <>
                          <div class={styles.classItem} onClick={() => donwRef.value?.toggle()}>
                            <div class={styles.img}>
                              <TheImage src={n.coverUrl} />
                            </div>
                            <div class={styles.classContent}>
                              <div class={[styles.classTitle, "van-ellipsis"]}>
                                {n.videoTitle}
                              </div>
                              <div
                                class={[
                                  styles.classDes,
                                  "van-multi-ellipsis--l2",
                                ]}
                              >
                                {n.videoContent}
                              </div>
                            </div>
                          </div>
                          <Divider />
                        </>
                      )
                    )}
                  </div>
                </Tab>
              </Tabs>
            </div>
          </div>

          <TheFooterApp />
          <TheDown ref={donwRef} />
        </div>
      );
    };
  },
});
