import { defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import MHeader from '@/components/m-header';
import { Cell, CellGroup, Col, Icon, Image, Row, Tab, Tabs } 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 Student from './components/student';
import Teacher from './components/teacher';
import Practice from './components/practice';
import Evaluating from './components/evaluating';
import { coursesStatus } from '@/helpers/constant';
import request from '@/helpers/request';
import { useRoute } from 'vue-router';

export default defineComponent({
  name: 'lesson-list-detail',
  setup() {
    const route = useRoute();
    const tabsValue = sessionStorage.getItem('lesson-detail-tab-value');
    const forms = reactive({
      courseId: route.query.courseId,
      tabs:
        tabsValue ||
        ('student' as 'student' | 'teacher' | 'practice' | 'evaluating'),
      loading: true,
      headerDetail: {} as any
    });

    const getClassDetail = async () => {
      try {
        const { data } = await request.get(
          '/api-web/schoolCourseSchedule/getCourseDetail',
          {
            params: {
              courseId: forms.courseId
            }
          }
        );
        forms.headerDetail = data || {};
      } catch {
        //
      } finally {
        forms.loading = false;
      }
    };

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

    return () => (
      <>
        <MHeader />

        <SkeletonIndexModal v-model:show={forms.loading} showCount={[1]}>
          <CellGroup inset class={styles.lessonCellGroup}>
            <Cell center class={styles.timeCell}>
              {{
                title: () => <span>{forms.headerDetail.classDate}</span>,
                value: () => (
                  <span>{coursesStatus[forms.headerDetail.courseStatus]}</span>
                )
              }}
            </Cell>
            <Cell center border={false}>
              {{
                icon: () => (
                  <Image
                    src={forms.headerDetail.teacherAvatar || iconTeacher}
                    fit="cover"
                    class={styles.iconStudent}
                  />
                ),
                title: () => (
                  <div class={styles.userInfo}>
                    <p class={styles.name}>{forms.headerDetail.teacherName}</p>
                    <p class={styles.subject}>
                      {forms.headerDetail.courseName}
                    </p>
                  </div>
                ),
                value: () => (
                  <div class={styles.people}>
                    <img src={iconPeople} class={styles.iconPeople} />
                    {forms.headerDetail.studentNum}人
                  </div>
                )
              }}
            </Cell>
            <Cell center class={styles.musicCell}>
              {{
                title: () => (
                  <div class={styles.musicInfo}>
                    <Icon name={iconMusic} class={styles.iconMusic} />
                    <span class="van-ellipsis">
                      {forms.headerDetail.musicGroupName}
                    </span>
                  </div>
                ),
                label: () => (
                  <Row class={styles.rowGroup}>
                    <Col>
                      正常出勤{' '}
                      <span>{forms.headerDetail.attendanceNormalNum}</span>
                    </Col>
                    <Col>
                      迟到
                      <span class={styles.c}>
                        {forms.headerDetail.attendanceLateNum}
                      </span>
                    </Col>
                    <Col>
                      请假
                      <span class={styles.q}>
                        {forms.headerDetail.attendanceLeaveNum}
                      </span>
                    </Col>
                    <Col>
                      旷课
                      <span class={styles.k}>
                        {forms.headerDetail.attendanceTruantNum}
                      </span>
                    </Col>
                  </Row>
                )
              }}
            </Cell>
          </CellGroup>
        </SkeletonIndexModal>

        {forms.headerDetail.courseId && (
          <div class={styles.tabs}>
            <Tabs
              v-model:active={forms.tabs}
              lazyRender
              onChange={() => {
                sessionStorage.setItem('lesson-detail-tab-value', forms.tabs);
              }}>
              <Tab title="学员考勤" name="student">
                <Student />
              </Tab>
              <Tab title="老师考勤" name="teacher">
                <Teacher />
              </Tab>
              {forms.headerDetail.homeworkType === 'HOMEWORK' && (
                <Tab title="练习内容" name="practice">
                  <Practice courseId={forms.courseId} />
                </Tab>
              )}

              {forms.headerDetail.homeworkType === 'LESSON' && (
                <Tab title="评测内容" name="evaluating">
                  <Evaluating
                    lessonExaminationId={forms.headerDetail.homeworkId}
                  />
                </Tab>
              )}
            </Tabs>
          </div>
        )}
      </>
    );
  }
});
