import request from '@/helpers/request';
import { state } from '@/state';
import { Tab, Tabs } from 'vant';
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  Transition
} from 'vue';
import styles from './index.module.less';
// import iconLook from './image/look.svg';
import { useRouter } from 'vue-router';
import OEmpty from '@/components/o-empty';
// import OSticky from '@/components/o-sticky';
import OHeader from '@/components/o-header';
import CourseItem from './component/CourseItem';
// import { courseEmnu } from '@/constant';
// import { browser } from '@/helpers/utils';
import OLoading from '@/components/o-loading';
import OSticky from '@/components/o-sticky';
export default defineComponent({
  name: 'lessonCourseware',
  setup() {
    // const route = useRoute();
    const router = useRouter();
    const data = reactive({
      loading: true,
      list: [] as any,
      subjectList: [] as any,
      actionShow: false,
      actionKey: 0
    });
    const getList = async () => {
      data.loading = true;
      try {
        const res: any = await request.post(
          state.platformApi + `/lessonCourseware/queryLessonCourseware`,
          {
            data: {
              subjectId: data.actionKey ? data.actionKey : null,
              page: 1,
              rows: 999
            }
          }
        );
        const _data = res.data.rows.map((n: any) => {
          return {
            ...n,
            coverImg: n.cover,
            name: n.name,
            id: n.id,
            courseNum: n.courseNum
          };
        });
        data.list = _data;
      } catch (error) {
        //
      }
      data.loading = false;
    };

    const getSubjectList = async () => {
      try {
        const res = await request.get(
          state.platformApi + '/lessonCourseware/getLessonCoursewareSubjectList'
        );

        data.subjectList = res.data || [];
      } catch {
        //
      }
    };
    onMounted(async () => {
      try {
        await getSubjectList();
        const studentSubjectIds =
          state.platformType === 'TEACHER'
            ? state.user.data.subjectId
            : state.user.data.student.subjectIdList;
        const id = studentSubjectIds ? studentSubjectIds.split(',')[0] : 0;
        data.subjectList.forEach((subject: any) => {
          if (Number(id) === subject.id) {
            data.actionKey = Number(id);
          }
        });

        await getList();
      } catch (e) {
        //
        console.log(e, 'e');
      }
      data.loading = false;
    });
    const handleClick = (item: any) => {
      router.push({
        path: '/courseList',
        query: {
          id: item.lessonCoursewareId
        }
      });
    };

    const actions = computed(() => {
      const _list = data.subjectList.map((item: any) => {
        return {
          id: item.id,
          name: item.name,
          text: item.name,
          value: item.id
        };
      });
      _list.unshift({
        id: '',
        name: '课程类型',
        text: '全部',
        value: 0
      });
      return _list;
    });

    return () => (
      <div class={[styles.lessonCourseware]}>
        <OSticky position="top">
          <OHeader
            border={false}
            background="transparent"
            color="#131415"></OHeader>

          <Tabs
            v-model:active={data.actionKey}
            shrink
            onClickTab={(val: any) => {
              data.actionKey = val.name;
              getList();
            }}>
            {actions.value.map((item: any) => (
              <Tab title={item.text} name={item.value}></Tab>
            ))}
          </Tabs>
        </OSticky>

        <Transition name="van-fade">
          {!data.loading && Object.values(data.list).length > 0 && (
            <CourseItem
              // term={key}
              list={data.list}
              onItemClick={row => handleClick(row)}
            />
          )}
        </Transition>
        {data.loading && <OLoading />}

        {!data.loading && !Object.values(data.list).length && (
          <div
            style={{
              minHeight: `calc(100vh - var(--header-height))`,
              display: 'flex',
              alignItems: 'center'
            }}>
            <OEmpty tips="暂无课件" />
          </div>
        )}
      </div>
    );
  }
});
