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 { useRouter } from 'vue-router';
import {
  Button,
  Cell,
  CellGroup,
  Checkbox,
  CheckboxGroup,
  Image,
  showToast
} from 'vant';
import iconBook from './images/icon-book.png';
import request from '@/helpers/request';
import MEmpty from '@/components/m-empty';

export default defineComponent({
  name: 'wroing-book',
  setup() {
    const router = useRouter();
    const checkboxRefs = ref([] as any);
    const forms = reactive({
      list: [] as any,
      checked: [] as any
    });

    const getList = async () => {
      try {
        const { data } = await request.post(
          '/edu-app/knowledgePoint/studentPage'
        );
        forms.list = data || [];
      } catch {
        //
      }
    };

    const checkboxToggle = (index: number) => {
      checkboxRefs.value[index].toggle();
    };

    const onSubmit = () => {
      try {
        console.log(forms.checked);
        if (forms.checked.length <= 0) {
          showToast('请选择练习知识点');
          return;
        }
        router.push({
          path: '/examination-mode',
          query: {
            type: 'ai',
            knowledgePointIds: forms.checked.join(',')
          }
        });
      } catch {
        //
      }
    };
    onMounted(() => {
      getList();
    });
    return () => (
      <div class={styles.woringBook}>
        <MSticky position="top">
          <MHeader border={false} background="transparent">
            {{
              content: () => (
                <div class={styles.woringHeader}>
                  <i
                    onClick={() => 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}>
          <div class={styles.title}>请选择练习知识点</div>

          <CellGroup border={false}>
            <CheckboxGroup v-model={forms.checked}>
              {forms.list.map((item: any, index: number) => (
                <Cell
                  center
                  onClick={() => checkboxToggle(index)}
                  class={styles.cell}>
                  {{
                    icon: () => <Image src={iconBook} class={styles.iconImg} />,
                    title: () => (
                      <div class={styles.cellTitle}>{item.name}</div>
                    ),
                    label: () => (
                      <p class={styles.cellContent}>
                        <span>{item.questionNum}</span>道错题
                      </p>
                    ),
                    'right-icon': () => (
                      <Checkbox
                        name={item.pointId}
                        ref={el => (checkboxRefs.value[index] = el)}
                        onClick={(e: MouseEvent) => e.stopPropagation()}
                      />
                    )
                  }}
                </Cell>
              ))}
            </CheckboxGroup>
            {forms.list.length <= 0 && (
              <div class={styles.emptyContainer}>
                <MEmpty />
              </div>
            )}
          </CellGroup>
        </div>
        <MSticky position="bottom" varName="--bottom-height">
          <div class={'btnGroup'}>
            <Button round block type="primary" onClick={onSubmit}>
              确认
            </Button>
          </div>
        </MSticky>
      </div>
    );
  }
});