import { Cell, Icon, Image } 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 iconStandard from '../images/icon-standard.png';
import iconNotStandard from '../images/icon-not-standard.png';
import iconNoStatus from '../images/icon-no-status.png';
import request from '@/helpers/request';
import { useRoute } from 'vue-router';
import { clockingIn } from '@/helpers/constant';
import MEmpty from '@/components/m-empty';
import SkeletonComponentModal from './skeleton-component-modal';

export default defineComponent({
  name: 'student-list',
  setup() {
    const route = useRoute();
    const forms = reactive({
      courseId: route.query.courseId,
      dataShow: true,
      loading: true,
      list: [] as any[]
    });

    const getList = async () => {
      try {
        const { data } = await request.get(
          '/api-web/schoolCourseSchedule/queryCourseStudentList',
          {
            params: {
              courseId: forms.courseId
            }
          }
        );
        forms.list = data || [];
      } catch {
        //
      } finally {
        forms.dataShow = forms.list.length ? true : false;
        forms.loading = false;
      }
    };

    onMounted(() => {
      getList();
    });

    return () => (
      <div class={styles['student-list']}>
        <SkeletonComponentModal v-model:show={forms.loading}>
          {forms.dataShow ? (
            forms.list.map((item: any) => (
              <Cell center>
                {{
                  icon: () => (
                    <div class={styles.iconGroup}>
                      <Image
                        src={item.studentAvatar || 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.studentName}</p>
                      {item.courseStatus === 'NOT_START' ? (
                        <span>未点名</span>
                      ) : (
                        <span class={styles[item.attendanceStatus]}>
                          {clockingIn[item.attendanceStatus]}
                        </span>
                      )}
                    </div>
                  ),
                  value: () => (
                    <div class={styles.after}>
                      {item.courseStatus === 'NOT_START' ? (
                        <img src={iconNoStatus} class={styles.noStatus} />
                      ) : item.qualifiedFlag ? (
                        <img src={iconStandard} class={styles.standard} />
                      ) : (
                        <img src={iconNotStandard} class={styles.notStandard} />
                      )}

                      <p class={styles.txt}>课后评价</p>
                    </div>
                  )
                }}
              </Cell>
            ))
          ) : (
            <div class={styles.emptyContainer}>
              <MEmpty description="暂无数据" />
            </div>
          )}
        </SkeletonComponentModal>
      </div>
    );
  }
});
