classroom-instruments/src/views/classList/modals/TrainingDetails.tsx

import {
  NButton,
  NSpace,
  useMessage,
  NForm,
  NFormItem,
  NSelect,
  NImage,
  NScrollbar
} from 'naive-ui';
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { getTrainingStudentDetail } from '../api';
import styles from '../index.module.less';
import TrainType from '@/views/attend-class/model/train-type';
import defultHeade from '@/components/layout/images/teacherIcon.png';
import noSub from '../images/nosub.png';
import qualified from '../images/qualified.png';
import unqualified from '../images/unqualified.png';
import { evaluateDifficult } from '/src/utils/contants';
import dayjs from 'dayjs';
export default defineComponent({
  props: {
    activeRow: {
      type: Object,
      default: () => ({ studentLessonTrainingId: '' })
    },
    total: {
      type: Number,
      default: 0
    },
    current: {
      type: Number,
      default: 0
    }
  },
  name: 'TrainingDetails',
  emits: ['close', 'next', 'pre'],

  setup(props, { emit, expose }) {
    const data = reactive({
      uploading: false
    });
    const studnetInfo = ref({
      studentName: '',
      submitTime: '',
      trainingStatus: '',
      studentAvatar: '',
      studentLessonTrainingDetails: [] as any
    } as any);
    const message = useMessage();
    const foemsRef = ref();
    const typeFormat = (trainingType: string, configJson: any) => {
      let tList: string[] = [];

      if (trainingType === 'EVALUATION') {
        tList = [
          `${evaluateDifficult[configJson.evaluateDifficult]}`,
          configJson.practiceChapterBegin || configJson.practiceChapterEnd
            ? `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`
            : '全部小节',
          // `速度${configJson.evaluateSpeed}`,
          `${configJson.trainingTimes}分合格`
        ];
        console.log('configJson.evaluateDifficult--', tList);
      } else {
        tList = [
          `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
          `速度${configJson.practiceSpeed}`,
          `${configJson.trainingTimes}分钟`
        ];
        console.log('configJson.evaluateDifficult', tList);
      }
      return tList;
    };
    const getTrainingDetail = async (id: any) => {
      try {
        const res = await getTrainingStudentDetail({
          studentLessonTrainingId: id
        });
        const arr = res.data.studentLessonTrainingDetails.map((item: any) => {
          const tList = typeFormat(
            item.trainingType,
            JSON.parse(item.trainingContent)
          );
          return {
            ...item,
            coverImg: item.titleImg,
            allTimes: JSON.parse(item.trainingContent).trainingTimes,
            typeList: tList || []
          };
        });
        studnetInfo.value = {
          ...res.data,

          studentLessonTrainingDetails: arr
        };
      } catch (e) {
        console.log(e);
      }
    };
    expose({ getTrainingDetail });
    onMounted(() => {
      getTrainingDetail(props.activeRow.studentLessonTrainingId);
    });

    return () => (
      <div class={[styles.trainingDetails]}>
        <div class={styles.studentList}>
          <div class={styles.studentHeaderWrap}>
            <div class={styles.studentHeader}>
              <div class={styles.studentHeaderBorder}>
                <NImage
                  class={styles.studentHeaderImg}
                  src={
                    studnetInfo.value.studentAvatar
                      ? studnetInfo.value.studentAvatar
                      : defultHeade
                  }
                  previewDisabled></NImage>
              </div>
            </div>

            <div class={styles.workafterInfo}>
              <h4>
                {studnetInfo.value.studentName}{' '}
                <div class={styles.workafterInfoDot}>学生</div>
              </h4>
              <p>
                提交时间：
                {studnetInfo.value.submitTime
                  ? dayjs(new Date(studnetInfo.value.submitTime)).format(
                      'YYYY-MM-DD'
                    )
                  : '--'}
              </p>
            </div>
          </div>
          {studnetInfo.value.trainingStatus == 'UNSUBMITTED' ? (
            <NImage
              previewDisabled
              class={styles.workStatus}
              src={noSub}></NImage>
          ) : null}
          {studnetInfo.value.trainingStatus == 'SUBMITTED' ? (
            <NImage
              previewDisabled
              class={styles.workStatus}
              src={unqualified}></NImage>
          ) : null}
          {studnetInfo.value.trainingStatus == 'TARGET' ? (
            <NImage
              previewDisabled
              class={styles.workStatus}
              src={qualified}></NImage>
          ) : null}
        </div>
        <NScrollbar style="max-height:400px" trigger="none">
          <div class={styles.workList}>
            {studnetInfo.value.studentLessonTrainingDetails.map((item: any) => (
              <TrainType
                style={{ marginBottom: '20px' }}
                isDisabled={true}
                isDelete={false}
                item={item}></TrainType>
            ))}
          </div>
        </NScrollbar>
        <NSpace
          class={[styles.btnGroups, styles.nextWrap]}
          justify="space-between">
          <div class={styles.allTotal}>
            {props.current}/{props.total}名学生
          </div>
          <div>
            <NSpace>
              <NButton
                disabled={props.current <= 1}
                round
                type="primary"
                onClick={() => {
                  emit('pre');
                }}>
                上一名
              </NButton>
              <NButton
                disabled={props.current >= props.total}
                round
                type="primary"
                onClick={() => {
                  emit('next');
                }}>
                下一名
              </NButton>
            </NSpace>
          </div>
        </NSpace>
      </div>
    );
  }
});