import {
  useMessage,
  NImage,
  NScrollbar,
  NSpin,
  NModal,
  NButton
} from 'naive-ui';
import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from '@/views/classList/index.module.less';
import TrainType from '@/views/attend-class/model/train-type';
import defultHeade from '@/components/layout/images/teacherIcon.png';
import noSub from '@/views/classList/images/nosub.png';
import qualified from '@/views/classList/images/qualified.png';
import unqualified from '@/views/classList/images/unqualified.png';
import { evaluateDifficult } from '/src/utils/contants';
import dayjs from 'dayjs';
import { getTrainingStudentDetail } from '../../classList/api';
import CommentWork from './comment-work';
import WorkItem from '../../classList/work-item';
import { modalClickMask } from '/src/state';

export default defineComponent({
  props: {
    activeRow: {
      type: Object,
      default: () => ({ id: '' })
    },
    total: {
      type: Number,
      default: 0
    },
    current: {
      type: Number,
      default: 0
    }
  },
  name: 'studentTraomomhDetails',
  emits: ['close'],

  setup(props, { emit, expose }) {
    const showModalMask = ref(false);
    const loading = ref(false);
    const teacherInfo = ref({
      teacherName: '',
      createTime: '',
      expireDate: '',
      teacherAvatar: '',
      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 || 0}-${
            configJson.practiceChapterEnd || 0
          }小节`,
          `速度${configJson.evaluateSpeed || 0}`,
          `${configJson.trainingTimes}分达标`
        ];
        // console.log('configJson.evaluateDifficult--', tList);
      } else {
        tList = [
          `${configJson.practiceChapterBegin}-${configJson.practiceChapterEnd}小节`,
          `速度${configJson.practiceSpeed || 0}`,
          `${configJson.trainingTimes}分钟`
        ];
        // console.log('configJson.evaluateDifficult', tList);
      }
      return tList;
    };
    const getTrainingDetail = async (id: any) => {
      loading.value = true;
      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,
            fileList: (item.fileJsonList && item.fileJsonList[0]) || {},
            allTimes: JSON.parse(item.trainingContent).trainingTimes,
            typeList: tList || []
          };
        });

        teacherInfo.value = {
          ...res.data,

          studentLessonTrainingDetails: arr
        };
        console.log(teacherInfo.value, ' teacherInfo.value');
      } catch (e) {
        console.log(e);
      }
      loading.value = false;
    };
    expose({ getTrainingDetail });
    onMounted(() => {
      getTrainingDetail(props.activeRow.id);
    });

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

              <div class={styles.workafterInfo}>
                <h4>
                  {teacherInfo.value.teacherName}{' '}
                  <div
                    class={[
                      styles.workafterInfoDot,
                      styles.workafterTeacherInfoDot
                    ]}>
                    老师
                  </div>
                </h4>
                <p>
                  开始时间：
                  {teacherInfo.value.createTime
                    ? dayjs(new Date(teacherInfo.value.createTime)).format(
                        'YYYY-MM-DD HH:mm'
                      )
                    : '--'}{' '}
                  | 结束时间：
                  {teacherInfo.value.expireDate
                    ? dayjs(new Date(teacherInfo.value.expireDate)).format(
                        'YYYY-MM-DD'
                      )
                    : '--'}
                </p>
              </div>
            </div>

            {teacherInfo.value.trainingStatus == 'UNSUBMITTED' ? (
              <NImage
                previewDisabled
                class={styles.workStatus}
                src={noSub}></NImage>
            ) : null}
            {teacherInfo.value.trainingStatus == 'SUBMITTED' ? (
              <NImage
                previewDisabled
                class={styles.workStatus}
                src={unqualified}></NImage>
            ) : null}
            {teacherInfo.value.trainingStatus == 'TARGET' ? (
              <NImage
                previewDisabled
                class={styles.workStatus}
                src={qualified}></NImage>
            ) : null}

            {/* {teacherInfo.value.expireFlag && (
              <NButton
                onClick={() => (showModalMask.value = true)}
                class={styles.commentBtnGroup}>
                <div class={styles.text}>
                  <i class={teacherInfo.value.comment && styles.look}></i>

                  {teacherInfo.value.comment ? '修改点评' : '点评作业'}
                </div>
              </NButton>
            )} */}
          </div>
          {(teacherInfo.value.fileExpireDay || 0) > 0 && (
            <div class={styles.expireDateTip}>
              <i class={styles.expireDateIcon}></i>
              <span>
                作业截止{teacherInfo.value.fileExpireDay || 0}
                天后，学生上传的文件将过期，请及时查看
              </span>
            </div>
          )}

          <NScrollbar
            style="max-height:400px;min-height: 260px;"
            trigger="none">
            <div class={styles.workList}>
              {/* studentName: studnetInfo.value.studentName */}
              {teacherInfo.value.studentLessonTrainingDetails.map(
                (item: any) => (
                  <WorkItem
                    style={{ marginBottom: '20px' }}
                    item={{
                      ...item,
                      studentName: teacherInfo.value.studentName
                    }}
                  />
                )
              )}
            </div>
            {/* {teacherInfo.value.comment && (
              <div class={styles.commentSection}>
                <h3>
                  <i class={styles.iconComment}></i>
                  <i class={styles.myText}></i>
                </h3>
                <div class={styles.commentContent}>
                  {teacherInfo.value.comment}
                </div>
              </div>
            )} */}

            {teacherInfo.value.expireFlag ? (
              <div class={styles.commentSection}>
                <div class={styles.commentTitle}>
                  <h3>
                    <i class={styles.iconComment}></i>
                    <i class={styles.myText}></i>
                  </h3>
                  <NButton
                    text
                    onClick={() => (showModalMask.value = true)}
                    class={styles.commentBtnGroup}>
                    <div class={styles.text}>
                      <i></i>

                      {teacherInfo.value.comment ? '修改点评' : '点评作业'}
                    </div>
                  </NButton>
                </div>
                {teacherInfo.value.comment ? (
                  <div class={styles.commentContent}>
                    {teacherInfo.value.comment}
                  </div>
                ) : (
                  <div class={[styles.commentContent, styles.commentTip]}>
                    您目前还没有点评该作业喔，快来写评语吧～
                  </div>
                )}
              </div>
            ) : null}
          </NScrollbar>
        </NSpin>

        <NModal
          maskClosable={modalClickMask}
          v-model:show={showModalMask.value}>
          <CommentWork
            comment={teacherInfo.value.comment}
            workInfo={{
              isLook: teacherInfo.value.comment ? true : false,
              studentAvatar: teacherInfo.value.studentAvatar,
              studentName: teacherInfo.value.studentName,
              submitTime: teacherInfo.value.submitTime,
              studentLessonTrainingId: teacherInfo.value.studentLessonTrainingId
            }}
            onClose={() => (showModalMask.value = false)}
            onConfrim={() => {
              getTrainingDetail(props.activeRow.id);
              showModalMask.value = false;
            }}
          />
        </NModal>
      </div>
    );
  }
});
