import { Cell, Icon, Image, Popup } from 'vant';
import { PropType, 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 SkeletonComponentModal from './skeleton-component-modal';

export default defineComponent({
  name: 'practice-list',
  props: {
    courseId: {
      type: String as PropType<any>,
      default: null
    }
  },
  setup(props) {
    // schoolStudentHomework/findCourseStudentsPublic/v2

    const forms = reactive({
      showPopup: false,
      list: [] as any[],
      dataShow: true,
      detail: {} as any,
      loading: true
    });

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

    const onDetail = async (item: any) => {
      try {
        forms.detail = {
          avatar: item.avatar,
          memberFlag: item.vipFlag,
          username: item.userName,
          subjectName: item.subjectName,
          finishFlag: item.finishFlag,
          list: item.studentLessonTrainingDetail || []
        };
        forms.showPopup = true;
      } catch {
        //
      }
    };

    onMounted(() => {
      getList();
    });
    return () => (
      <div class={styles['practice-list']}>
        <SkeletonComponentModal v-model:loading={forms.loading}>
          {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="contain"
                    />
                    <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.finishFlag ? styles.success : styles.error
                    ]}>
                    {item.finishFlag ? '完成' : '未完成'}
                  </div>
                )
              }}
            </Cell>
          ))}
        </SkeletonComponentModal>

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