import { Cell, Icon, Image, Skeleton, SkeletonParagraph } from 'vant';
import { defineComponent, onMounted, reactive } from 'vue';
import styles from './component.module.less';
import iconTeacher from '@/common/images/icon-teacher-default.png';
import iconSuccess from '@/common/images/icon-check-active.png';
import iconWarn from '@/common/images/icon-warn.png';
import { useRoute, useRouter } from 'vue-router';
import dayjs from 'dayjs';
import request from '@/helpers/request';

export default defineComponent({
  name: 'teacher-list',
  setup() {
    const route = useRoute();
    const router = useRouter();
    const forms = reactive({
      courseId: route.query.courseId,
      teacherId: route.query.teacherId,
      detail: {} as any,
      loading: true
    });

    // schoolTeacherAttendance/getCourseTeacherAttendance

    const onAddressGps = (item: any) => {
      //
      router.push({
        path: '/amap-gps',
        query: {
          sLngLat: item.schoolLongitudeLatitude, // 教学点
          inLngLat: item.signInLongitudeLatitude, // 签到
          outLngLat: item.signOutLongitudeLatitude // 签退
        }
      });
    };

    const getList = async () => {
      try {
        const { data } = await request.get(
          '/api-web/schoolTeacherAttendance/getCourseTeacherAttendance',
          {
            params: {
              courseId: forms.courseId,
              teacherId: forms.teacherId
            }
          }
        );
        forms.detail = data || {};
      } catch {
        //
      } finally {
        forms.loading = false;
      }
    };

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

    return () => (
      <div class={styles['teacher-list']}>
        <Skeleton loading={forms.loading}>
          {{
            template: () => (
              <div class={styles.skeletonGroup}>
                <SkeletonParagraph
                  class={styles.skeletonItem}
                  rowWidth={'50%'}
                />
                <SkeletonParagraph
                  class={styles.skeletonItem}
                  rowWidth={'50%'}
                />
                <SkeletonParagraph
                  class={styles.skeletonItem}
                  rowWidth={'50%'}
                />
                <SkeletonParagraph
                  class={styles.skeletonItem}
                  rowWidth={'50%'}
                />
              </div>
            ),
            default: () => (
              <Cell center>
                <div class={styles.detailGroup}>
                  <div class={styles.detailItem}>
                    <div class={styles.detailStatus}>
                      <span
                        class={[
                          styles.statusName,
                          forms.detail.signInStatus ? '' : styles.error
                        ]}>
                        {forms.detail.signInStatus ? '正常' : '异常'}
                      </span>
                      <img
                        src={forms.detail.signInStatus ? iconSuccess : iconWarn}
                        class={styles.img}
                      />
                    </div>
                    <div class={styles.sign}>
                      <span class={styles.signTime}>
                        签到时间{' '}
                        {forms.detail.signInTime
                          ? dayjs(forms.detail.signInTime).format('HH:mm:ss')
                          : '--'}
                      </span>
                    </div>
                  </div>
                  {forms.detail.teachMode === 'OFFLINE' ? (
                    <div class={styles.detailItem}>
                      <div class={styles.detailStatus}>
                        <span
                          class={[
                            styles.statusName,
                            forms.detail.signInAddressStatus ? '' : styles.error
                          ]}>
                          {forms.detail.signInAddressStatus ? '正常' : '异常'}
                        </span>
                        <img
                          src={
                            forms.detail.signInAddressStatus
                              ? iconSuccess
                              : iconWarn
                          }
                          class={styles.img}
                        />
                      </div>
                      <div class={styles.sign}>
                        <span class={styles.signTime}>签到地点</span>
                        <span
                          class={styles.locate}
                          onClick={() => onAddressGps(forms.detail)}>
                          查看定位
                          <Icon name="arrow" class={styles.iconArrow} />
                        </span>
                      </div>
                    </div>
                  ) : (
                    ''
                  )}

                  <div class={styles.detailItem}>
                    <div class={styles.detailStatus}>
                      <span
                        class={[
                          styles.statusName,
                          forms.detail.signOutStatus ? '' : styles.error
                        ]}>
                        {forms.detail.signOutStatus ? '正常' : '异常'}
                      </span>
                      <img
                        src={
                          forms.detail.signOutStatus ? iconSuccess : iconWarn
                        }
                        class={styles.img}
                      />
                    </div>
                    <div class={styles.sign}>
                      <span class={styles.signTime}>
                        签退时间{' '}
                        {forms.detail.signOutTime
                          ? dayjs(forms.detail.signOutTime).format('HH:mm:ss')
                          : '--'}
                      </span>
                    </div>
                  </div>
                  {forms.detail.teachMode === 'OFFLINE' ? (
                    <div class={styles.detailItem}>
                      <div class={styles.detailStatus}>
                        <span
                          class={[
                            styles.statusName,
                            forms.detail.signOutAddressStatus
                              ? ''
                              : styles.error
                          ]}>
                          {forms.detail.signOutAddressStatus ? '正常' : '异常'}
                        </span>
                        <img
                          src={
                            forms.detail.signOutAddressStatus
                              ? iconSuccess
                              : iconWarn
                          }
                          class={styles.img}
                        />
                      </div>
                      <div class={styles.sign}>
                        <span class={styles.signTime}>签到地点</span>
                        <span
                          class={styles.locate}
                          onClick={() => onAddressGps(forms.detail)}>
                          查看定位
                          <Icon name="arrow" class={styles.iconArrow} />
                        </span>
                      </div>
                    </div>
                  ) : (
                    ''
                  )}
                </div>
              </Cell>
            )
          }}
        </Skeleton>
      </div>
    );
  }
});