import { defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import MSticky from '@/components/m-sticky';
import MHeader from '@/components/m-header';
import { Cell, CellGroup, Col, Icon, Image, Row } from 'vant';
import iconTeacher from '@/common/images/icon-teacher-default.png';
import iconMusic from '@/common/images/icon-music.png';
import iconPeople from '../lesson-list/images/icon-pople.png';
import SkeletonIndexModal from './skeleton-index-modal';
import { useRoute, useRouter } from 'vue-router';
import request from '@/helpers/request';
import { coursesStatus } from '@/helpers/constant';
import MEmpty from '@/components/m-empty';

export default defineComponent({
  name: 'lesson-list',
  setup() {
    // 删除子页面的缓存
    sessionStorage.removeItem('lesson-detail-tab-value');
    const router = useRouter();
    const route = useRoute();
    const forms = reactive({
      classDate: route.query.classDate,
      loading: true,
      dataShow: true,
      list: [] as any[]
    });

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

    onMounted(() => {
      getList();
    });
    return () => (
      <div>
        <MSticky position="top">
          <MHeader />
        </MSticky>

        <SkeletonIndexModal v-model:show={forms.loading}>
          {forms.dataShow ? (
            forms.list.map((item: any) => (
              <CellGroup
                inset
                class={styles.lessonCellGroup}
                onClick={() => {
                  router.push({
                    path: '/lesson-detail',
                    query: {
                      courseId: item.courseId,
                      teacherId: item.teacherId
                    }
                  });
                }}>
                <Cell center class={styles.timeCell}>
                  {{
                    title: () => <span>{item.classDate}</span>,
                    value: () => <span>{coursesStatus[item.courseStatus]}</span>
                  }}
                </Cell>
                <Cell center border={false}>
                  {{
                    icon: () => (
                      <Image
                        src={item.teacherAvatar || iconTeacher}
                        fit="cover"
                        class={styles.iconStudent}
                      />
                    ),
                    title: () => (
                      <div class={styles.userInfo}>
                        <p class={styles.name}>{item.teacherName}</p>
                        <p class={styles.subject}>{item.courseName}</p>
                      </div>
                    ),
                    value: () => (
                      <div class={styles.people}>
                        <img src={iconPeople} class={styles.iconPeople} />
                        {item.studentNum}人
                      </div>
                    )
                  }}
                </Cell>
                <Cell center class={styles.musicCell}>
                  {{
                    title: () => (
                      <div class={styles.musicInfo}>
                        <Icon name={iconMusic} class={styles.iconMusic} />
                        <span class="van-ellipsis">{item.musicGroupName}</span>
                      </div>
                    ),
                    label: () => (
                      <Row class={styles.rowGroup}>
                        <Col>
                          正常出勤 <span>{item.attendanceNormalNum}</span>
                        </Col>
                        <Col>
                          迟到
                          <span class={styles.c}>{item.attendanceLateNum}</span>
                        </Col>
                        <Col>
                          请假
                          <span class={styles.q}>
                            {item.attendanceLeaveNum}
                          </span>
                        </Col>
                        <Col>
                          旷课
                          <span class={styles.k}>
                            {item.attendanceTruantNum}
                          </span>
                        </Col>
                      </Row>
                    )
                  }}
                </Cell>
              </CellGroup>
            ))
          ) : (
            <MEmpty
              style={{
                minHeight: `calc(100vh - var(--header-height))`
              }}
              description="暂无数据"
            />
          )}
        </SkeletonIndexModal>
      </div>
    );
  }
});
