import MHeader from '@/components/m-header';
import MSticky from '@/components/m-sticky';
import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import { useRoute, useRouter } from 'vue-router';
import request from '@/helpers/request';
import { useEventListener, useWindowScroll } from '@vueuse/core';
import iconExamQuestion from './images/icon-exam-question.png';
import MEmpty from '@/components/m-empty';
import { showToast } from 'vant';

export default defineComponent({
  name: 'unit-detail',
  setup() {
    const router = useRouter();
    const route = useRoute();

    const forms = reactive({
      detailId: route.query.detailId,
      loading: false,
      background: 'transparent',
      color: '#fff',
      dataInfo: {} as any
    });

    const getList = async () => {
      forms.loading = true;
      try {
        const { data } = await request.get(
          '/edu-app/lessonCoursewareKnowledgeDetail/detail/' + forms.detailId
        );
        forms.dataInfo = data;
      } catch {
        //
      }
      forms.loading = false;
    };

    const onGotoModel = async () => {
      try {
        const { data } = await request.get(
          '/edu-app/studentUnitExamination/checkKnowledgePointIds',
          {
            params: {
              knowledgePointIds: forms.dataInfo.knowledgePointIds
            }
          }
        );
        if (data) {
          router.push({
            path: '/practice-mode',
            query: { knowledgePointIds: forms.dataInfo.knowledgePointIds }
          });
        } else {
          setTimeout(() => {
            showToast('暂无题目');
          }, 100);
          return;
        }
      } catch {
        //
      }
    };

    onMounted(() => {
      useEventListener(document, 'scroll', () => {
        const { y } = useWindowScroll();
        if (y.value > 52) {
          forms.background = '#fff';
          forms.color = '#323333';
        } else {
          forms.background = 'transparent';
          forms.color = '#fff';
        }
      });

      getList();
    });
    return () => (
      <div class={styles.knowledgeLibrary}>
        <MSticky position="top">
          <MHeader
            border={false}
            background={forms.background}
            color={forms.color}>
            {{
              right: () => (
                <div
                  class={styles.wroingBtn}
                  onClick={() => router.push('/wroing-book')}>
                  <i class={styles.iconWroing}></i>错题本
                </div>
              )
            }}
          </MHeader>
        </MSticky>

        <div class={[styles.containerSection, styles.woringSection]}>
          {forms.dataInfo.desc && (
            <div
              class={styles.woringContent}
              v-html={forms.dataInfo.desc}></div>
          )}
          {!forms.dataInfo.desc && !forms.loading && (
            <div class={styles.woringContent}>
              <MEmpty description="暂无内容" style={{ paddingTop: '40px' }} />
            </div>
          )}
        </div>

        <img
          src={iconExamQuestion}
          class={styles.iconExamQuestion}
          onClick={onGotoModel}
        />
      </div>
    );
  }
});