import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from '../index.module.less';
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NImage,
  NSelect,
  NSpace,
  NTabPane,
  NTabs
} from 'naive-ui';
import { getStudentDetail, getTrainingStudentList } from '../api';
import { useRoute } from 'vue-router';
import CBreadcrumb from '/src/components/CBreadcrumb';
import defultHeade from '@/components/layout/images/teacherIcon.png';
import femaleIcon from '@/views/setting/images/femaleIcon.png';
import maleIcon from '@/views/setting/images/maleIcon.png';
import PracticeData from '@/views/studentList/components/practiceData';
import EvaluationRecords from '@/views/studentList/components/evaluationRecords';

import dayjs from 'dayjs';
export default defineComponent({
  name: 'classStudentRecode',
  setup(props, { emit }) {
    const state = reactive({
      studentInfo: { avatar: '', nickname: '', gender: null, subjectNames: '' }
    });
    const activeStudentTab = ref('textRcode');
    const route = useRoute();
    const routerList = ref([
      { name: '班级管理', path: '/classList' },
      { name: route.query.name, path: '/classDetail' },
      { name: route.query.studentName, path: '/classStudentRecode' }
    ] as any);

    const getWorkInfo = async () => {
      console.log(route.query.studentId);
      try {
        const res = await getStudentDetail({
          id: route.query.studentId
        });
        state.studentInfo = { ...res.data };
      } catch (e) {
        console.log(e);
      }
    };
    onMounted(() => {
      getWorkInfo();
    });

    return () => (
      <div>
        <CBreadcrumb list={routerList.value}></CBreadcrumb>
        <div class={styles.listWrap}>
          <div class={styles.teacherList}>
            <div class={styles.teacherHeader}>
              <div class={styles.teacherHeaderBorder}>
                <NImage
                  class={styles.teacherHeaderImg}
                  src={
                    state.studentInfo.avatar
                      ? state.studentInfo.avatar
                      : defultHeade
                  }
                  previewDisabled></NImage>
              </div>
            </div>
            <div class={styles.workafterInfo}>
              <h4 class={styles.studentGender}>
                {state.studentInfo.nickname}{' '}
                <NImage
                  src={
                    state.studentInfo.gender ? maleIcon : femaleIcon
                  }></NImage>
              </h4>
              <p>
                {route.query.name}{' '}
                {state.studentInfo.subjectNames
                  ? '|' + state.studentInfo.subjectNames
                  : ''}
              </p>
            </div>
          </div>
          <NTabs
            class={styles.customTabs}
            v-model:value={activeStudentTab.value}
            size="large"
            animated={false}
            pane-wrapper-style="margin: 0 -4px"
            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
            <NTabPane name="textRcode" tab="练习记录">
              <PracticeData
              classGroupId={route.query.id as string}
                studentId={route.query.studentId as string}></PracticeData>
            </NTabPane>
            <NTabPane name="evaluatingRcode" tab="评测记录">
              <EvaluationRecords
               classGroupId={route.query.id as string}
                studentId={route.query.studentId as string}></EvaluationRecords>
            </NTabPane>
          </NTabs>
        </div>
      </div>
    );
  }
});