import MHeader from '@/components/m-header';
import MSticky from '@/components/m-sticky';
import { defineComponent } from 'vue';
import styles from './index.module.less';
import { useRouter } from 'vue-router';
import { Image, showToast } from 'vant';
import AiExam from './images/ai-exam.png';
import WoringPractice from './images/woring-practice.png';
import WoringStat from './images/woring-stat.png';
import request from '@/helpers/request';
import { browser } from '@/helpers/utils';
import { postMessage } from '@/helpers/native-message';
import WoringGuide from '@/custom-plugins/guide-page/woring-guide';
export default defineComponent({
  name: 'wroing-book',
  setup() {
    const router = useRouter();

    /** 错题练习 */
    const onErrorPractice = async () => {
      try {
        const { data } = await request.post(
          '/edu-app/studentUnitExamination/errorEdition',
          {
            hideLoading: false,
            data: {
              page: 1,
              rows: 50
            }
          }
        );
        const temp = data || {};
        if (temp.total > 0) {
          router.push({
            path: '/error-question-mode'
          });
        } else {
          setTimeout(() => {
            showToast('暂无错题');
          }, 100);
        }
      } catch {
        //
      }
    };
    return () => (
      <div class={styles.woringBook}>
        <MSticky position="top">
          <MHeader border={false} background="transparent">
            {{
              content: () => (
                <div class={styles.woringHeader}>
                  <i
                    onClick={() => {
                      if (browser().isApp) {
                        postMessage({
                          api: 'goBack'
                        });
                      } else {
                        router.back();
                      }
                    }}
                    class={[
                      'van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow',
                      styles.leftArrow
                    ]}></i>
                  <span class={styles.title}>
                    <i></i>
                  </span>
                </div>
              )
            }}
          </MHeader>
        </MSticky>

        <div class={styles.woringSecgtion}>
          <Image
            {...{ id: 'woring-0' }}
            lazyLoad
            src={WoringStat}
            class={styles.woringImg}
            onClick={() => router.push('wroing-stat')}
          />
          {/* 错题练习 */}
          <Image
            {...{ id: 'woring-1' }}
            lazyLoad
            src={WoringPractice}
            class={styles.woringImg}
            onClick={onErrorPractice}
          />
          <Image
            {...{ id: 'woring-2' }}
            lazyLoad
            src={AiExam}
            class={styles.woringImg}
            onClick={() => router.push('ai-exam')}
          />
        </div>
        <WoringGuide></WoringGuide>
      </div>
    );
  }
});