import MHeader from '@/components/m-header';
import MSticky from '@/components/m-sticky';
import { defineComponent, markRaw, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import { useRouter } from 'vue-router';
import { Grid, GridItem, Image, Progress } from 'vant';
import statTop from './images/stat-top.png';
import stat1 from './images/stat-1.png';
import stat2 from './images/stat-2.png';
import stat3 from './images/stat-3.png';
import icon1 from './images/icon-1.png';
import icon2 from './images/icon-2.png';
import icon3 from './images/icon-3.png';
import icon4 from './images/icon-4.png';
import icon5 from './images/icon-5.png';
import { useEventListener, useWindowScroll } from '@vueuse/core';
import { browser } from '@/helpers/utils';
import { postMessage } from '@/helpers/native-message';

import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  TooltipComponent,
  GridComponent,
  // 数据集组件
  DatasetComponent,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent,
  LegendComponent,
  ToolboxComponent,
  DataZoomComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  PieChart,
  ToolboxComponent,
  LegendComponent,
  DataZoomComponent,
  LineChart
]);

import { lineChartOption } from './echarts';
import request from '@/helpers/request';

const pointColor = [
  {
    textColor: '#5BD6A0',
    backgroundColor: 'linear-gradient(270deg, #76E5BB 0%, #41C685 100%)'
  },
  {
    textColor: '#92CD3A',
    backgroundColor: 'linear-gradient(270deg, #B2E051 0%, #7ABE28 100%)'
  },
  {
    textColor: '#81B3E9',
    backgroundColor: 'linear-gradient(270deg, #8DBEEE 0%, #548AD8 100%)'
  },
  {
    textColor: '#F29C71',
    backgroundColor: 'linear-gradient(270deg, #F7B58A 0%, #EB7E52 100%)'
  }
];

export default defineComponent({
  name: 'wroing-book',
  setup() {
    const router = useRouter();
    const forms = reactive({
      myChart: null as any,
      background: 'transparent',
      color: '#fff',
      PRACTICE_MODE: {} as any, // 练习数据统计
      MOCK_TEST: {} as any, // 模拟测试数据统计
      OFTEN_ERROR_QUESTION: [] as any,
      OFTEN_ERROR_POINT: [] as any
    });

    // this.myChart.clear();
    // this.myChart.setOption(lineChartOption);
    const getDetails = async () => {
      try {
        const { data } = await request.get(
          '/edu-app/studentExaminationErrorEdition/stat'
        );

        const tempResult = data || [];
        tempResult.forEach((item: any) => {
          if (item.errorEditionStatEnum === 'PRACTICE_MODE') {
            forms.PRACTICE_MODE = item.data;
          } else if (item.errorEditionStatEnum === 'MOCK_TEST') {
            forms.MOCK_TEST = item.data;
          } else if (item.errorEditionStatEnum === 'OFTEN_ERROR_QUESTION') {
            forms.OFTEN_ERROR_QUESTION = item.data || [];
          } else if (item.errorEditionStatEnum === 'OFTEN_ERROR_POINT') {
            forms.OFTEN_ERROR_POINT = item.data || [];
          }
        });

        // RADIO('单选题'),
        // CHECKBOX('多选题'),
        // PLAY('演奏题'),
        // SORT('排序题'),
        // LINK('连连看');
        forms.OFTEN_ERROR_QUESTION.forEach((item: any) => {
          if (item.questionType === 'LINK') {
            lineChartOption.series[0].data[0] = item.num;
          } else if (item.questionType === 'RADIO') {
            lineChartOption.series[0].data[1] = item.num;
          } else if (item.questionType === 'SORT') {
            lineChartOption.series[0].data[2] = item.num;
          } else if (item.questionType === 'CHECKBOX') {
            lineChartOption.series[0].data[3] = item.num;
          }
        });

        forms.myChart.clear();
        forms.myChart.setOption(lineChartOption);
      } catch (e: any) {
        //
        console.log(e);
      }
    };

    onMounted(() => {
      useEventListener(document, 'scroll', () => {
        const { y } = useWindowScroll();
        if (y.value > 52) {
          forms.background = '#fff';
          forms.color = '#323333';
        } else {
          forms.background = 'transparent';
          forms.color = '#fff';
        }
      });
      forms.myChart = markRaw(
        echarts.init(document.getElementById('incomeClass') as HTMLDivElement)
      );

      getDetails();
    });
    return () => (
      <div class={styles.woringStat}>
        <MSticky position="top">
          <MHeader
            border={false}
            background={forms.background}
            color={forms.color}>
            {{
              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.sectionImitate}>
          <img class={styles.imitateTop} src={statTop} />
          <div class={styles.imitateContainer}>
            <div class={[styles.imitateTitle, styles.preFix]}>
              <i></i>
              练习模式数据统计
            </div>
            <Grid columnNum={3} class={styles.imitateGrid} border={false}>
              <GridItem>
                <Image src={stat1} class={styles.statImg} />
                <p class={styles.tip}>已做题数</p>
                <p class={styles.result}>{forms.PRACTICE_MODE.totalNum || 0}</p>
              </GridItem>
              <GridItem>
                <Image src={stat2} class={styles.statImg} />
                <p class={styles.tip}>总错题数</p>
                <p class={styles.result}>{forms.PRACTICE_MODE.errorNum || 0}</p>
              </GridItem>
              <GridItem>
                <Image src={stat3} class={styles.statImg} />
                <p class={styles.tip}>正确率</p>
                <p class={styles.result}>
                  {forms.PRACTICE_MODE.rightRate || 0}%
                </p>
              </GridItem>
            </Grid>
          </div>
        </div>

        <div class={styles.sectionImitateData}>
          <div class={styles.dataImitate}>
            <div class={[styles.dataTitle, styles.preFix]}>
              <i></i>
              模拟测试数据统计
            </div>
            <div class={styles.dataList}>
              <div class={styles.dataItem}>
                <div class={styles.memo}>
                  <img src={icon1} class={styles.iconMemo} />
                  <span>答卷次数</span>
                </div>
                <div class={styles.memoResult}>
                  {forms.MOCK_TEST.totalNum || 0}
                </div>
              </div>
              <div class={styles.dataItem}>
                <div class={styles.memo}>
                  <img src={icon2} class={styles.iconMemo} />
                  <span>及格次数</span>
                </div>
                <div class={styles.memoResult}>
                  {forms.MOCK_TEST.passNum || 0}
                </div>
              </div>
              <div class={styles.dataItem}>
                <div class={styles.memo}>
                  <img src={icon3} class={styles.iconMemo} />
                  <span>及格率</span>
                </div>
                <div class={styles.memoResult}>
                  {forms.MOCK_TEST.passRate || 0}
                </div>
              </div>
              <div class={styles.dataItem}>
                <div class={styles.memo}>
                  <img src={icon4} class={styles.iconMemo} />
                  <span>总错题数</span>
                </div>
                <div class={styles.memoResult}>
                  {forms.MOCK_TEST.errorNum || 0}
                </div>
              </div>
              <div class={styles.dataItem}>
                <div class={styles.memo}>
                  <img src={icon5} class={styles.iconMemo} />
                  <span>正确率</span>
                </div>
                <div class={styles.memoResult}>
                  {forms.MOCK_TEST.rightRate || 0}%
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class={styles.sectionConstQestion}>
          <div class={styles.constQestion}>
            <div class={[styles.constTitle, styles.preFix]}>
              <i></i>
              常错题型统计
            </div>

            <div id="incomeClass" class={styles.constSection}></div>
          </div>
        </div>

        {forms.OFTEN_ERROR_POINT.length > 0 && (
          <div class={styles.sectionImitateData}>
            <div class={styles.dataImitate}>
              <div class={[styles.dataTitle, styles.preFix]}>
                <i></i>
                常错知识点分析
              </div>

              <div class={styles.knowledgeList}>
                {forms.OFTEN_ERROR_POINT.map((item: any, index: number) => (
                  <div class={styles.knowledgeItem}>
                    <div class={styles.memo}>
                      {item.pointName}
                      <span style={{ color: pointColor[index % 4].textColor }}>
                        {item.num}
                      </span>
                    </div>
                    <Progress
                      color={pointColor[index % 4].backgroundColor}
                      trackColor="#ECECEC"
                      showPivot={false}
                      style={{
                        borderRadius: '10px'
                      }}
                      percentage={(item.num / item.totalNum) * 100}
                      strokeWidth={8}
                    />
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }
});
