import { Cell, Icon, Image, Popup } from 'vant';
import { defineComponent, onMounted, reactive } from 'vue';
import styles from './component.module.less';
import iconStudent from '@/common/images/icon-student-default.png';
import iconMember from '../images/icon-member.png';
import DetailModal from '../detail-modal';
import request from '@/helpers/request';
import MEmpty from '@/components/m-empty';
import SkeletonComponentModal from './skeleton-component-modal';

export default defineComponent({
  name: 'evaluating-list',
  props: {
    lessonExaminationId: {
      type: Number,
      default: null
    }
  },
  setup(props) {
    const forms = reactive({
      showPopup: false,
      list: [] as any[],
      dataShow: true,
      detail: {} as any,
      loading: false
    });

    const getList = async () => {
      try {
        const { data } = await request.post(
          '/api-web/schoolStudentHomework/queryLessonStudent',
          {
            data: {
              lessonExaminationId: props.lessonExaminationId
            }
          }
        );
        forms.list = data.rows || [];
      } catch {
        //
      } finally {
        forms.dataShow = forms.list.length ? true : false;
        forms.loading = false;
      }
    };

    const onDetail = async (item: any) => {
      try {
        if (forms.detail.userId != item.userId) {
          const { data } = await request.post(
            '/api-web/schoolStudentHomework/queryStudentLessonDetail',
            {
              hideLoading: false,
              data: {
                lessonExaminationId: props.lessonExaminationId,
                userId: item.userId
              }
            }
          );
          forms.detail = {
            userId: item.userId,
            avatar: item.avatar,
            memberFlag: item.memberFlag,
            username: item.username,
            subjectName: item.subjectName,
            trainingScore: item.trainingScore,
            list: data || []
          };
        }
        forms.showPopup = true;
      } catch {
        //
      }
    };

    onMounted(() => {
      getList();
    });
    return () => (
      <div class={styles['practice-list']}>
        <SkeletonComponentModal v-model:show={forms.loading}>
          {forms.dataShow ? (
            forms.list.map((item: any) => (
              <Cell center isLink onClick={() => onDetail(item)}>
                {{
                  icon: () => (
                    <div class={styles.iconGroup}>
                      <Image
                        src={item.avatar || iconStudent}
                        class={styles.iconStudent}
                        fit="cover"
                      />
                      {item.memberFlag && (
                        <Icon name={iconMember} class={styles.iconMember} />
                      )}
                    </div>
                  ),
                  title: () => (
                    <div class={styles.userInfo}>
                      <p class={styles.name}>{item.username}</p>
                      <span>{item.subjectName}</span>
                    </div>
                  ),
                  value: () => (
                    <div
                      class={[
                        styles.after,
                        item.trainingScore >= 60 ? styles.success : styles.error
                      ]}>
                      {item.trainingScore || '--'}分
                    </div>
                  )
                }}
              </Cell>
            ))
          ) : (
            <div class={styles.emptyContainer}>
              <MEmpty description="暂无数据" />
            </div>
          )}
        </SkeletonComponentModal>

        <Popup
          v-model:show={forms.showPopup}
          position="bottom"
          round
          closeable
          class={styles.popup}>
          <DetailModal type="evaluating" detail={forms.detail} />
        </Popup>
      </div>
    );
  }
});
