import { Cell, CellGroup, Image, Tag } from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import styles from './index.module.less'
import iconTag from '../images/icon-tag.png'
import request from '@/helpers/request'

export default defineComponent({
  name: 'unit-detail',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      id: route.query.id,
      name: '',
      courseTypeCode: '',
      visiableNotice: false,
      list: [] as any
    })

    const getDetails = async () => {
      try {
        const { data } = await request.post('/api-student/unitExamination/queryKnowledgePoint', {
          requestType: 'form',
          data: {
            unitExaminationId: state.id
          }
        })
        state.list = data.lists || []
        state.name = data.unitExaminationName
        state.courseTypeCode = data.courseTypeCode
        console.log(data)
      } catch {
        //
      }
    }

    const onDetail = (item: any) => {
      router.push({
        path: '/practice-mode',
        query: {
          examId: state.id, // 单元测试编号
          id: item.id,
          courseTypeCode: state.courseTypeCode,
          name: state.name
        }
      })
    }

    onMounted(() => {
      getDetails()
    })
    return () => (
      <div class={styles.unitDetail}>
        <Cell center class={styles.unitSection}>
          {{
            title: () => (
              <div class={styles.unitTitle}>
                {state.name}
                {/* <Tag type="primary">长笛单技课</Tag> */}
              </div>
            ),
            label: () => (
              <div class={styles.examSite}>
                <p>1、在练习模式中可以对本次测验相关考点进行反复练习;</p>
                <p>2、为了测验达到理想成绩，充分练习后再进行正式测验吧！</p>
              </div>
            )
          }}
        </Cell>

        <div class={styles.cellGroup}>
          <div class={styles.cellTitle}>
            <i></i>考点
          </div>
          {state.list.map((item: any) => (
            <Cell center isLink titleClass={['van-ellipsis']} onClick={() => onDetail(item)}>
              {{
                icon: () => <Image src={iconTag} class={styles.img} />,
                title: () => <>{item.name}</>,
                value: () => <span>去练习</span>
              }}
            </Cell>
          ))}
        </div>
      </div>
    )
  }
})