import { defineComponent, reactive, ref } from 'vue'
import styles from './teacherAtt-item.module.less'
import clockIcon from '@/school/attendance/images/clock-icon.png'
import errorIcon from '@/school/attendance/images/error-icon.png'
import successIcon from '@/school/attendance/images/success-icon.png'
import { Icon, ActionSheet } from 'vant'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
export default defineComponent({
  props: ['item'],
  name: 'teacherAtt-item',
  setup(props) {
    const router = useRouter()
    const gotoTeacherDetail = () => {
      router.push({
        path: '/teacher-attendDetail',
        query: { courseScheduleId: props.item.courseScheduleId }
      })
    }
    return () => (
      <>
        <div class={styles.itemWrap} onClick={gotoTeacherDetail}>
          <div class={styles.itemWrapTop}>
            <div class={styles.itemWrapTopLeft}>
              <div class={styles.clockWrap}>
                <img src={clockIcon} alt="" />
              </div>
              <p class={styles.leftTimer}>
                {dayjs(props.item.startTime).format('YYYY-MM-DD HH:mm')}
                {'-'}
                {dayjs(props.item.endTime).format('HH:mm')}
              </p>
            </div>
          </div>
          <div class={styles.itemWrapBottom}>
            <div class={styles.courseInfo}>
              <div class={styles.infoMsg}>
                <p class={styles.infoMsgMain}>{props.item.classGroupName}</p>
                <p class={styles.infoMsgSub}>{props.item.orchestraName}</p>
              </div>
              {/* {props.item.subsidyFlag ? (
                <div class={styles.typeTag}>补助课</div>
              ) : (
                <div class={styles.typeTagNo}>非补助课</div>
              )} */}
            </div>
            <div class={styles.itemWrapBottomRight}>
              <div class={styles.attInfo}>
                {/* */}
                <div class={styles.goWrap}>
                  <p class={styles.goWrapMain}>
                    {props.item.signInStatus === 'NORMAL' ? (
                      <span>正常</span>
                    ) : (
                      <span style={{ color: '#F44541' }}>异常</span>
                    )}
                  </p>
                  <p class={styles.goWrapSub}>签到</p>
                </div>
                <div class={styles.goWrap}>
                  <p class={styles.goWrapMain}>
                    {props.item.signOutStatus === 'NORMAL' ? (
                      <span>正常</span>
                    ) : (
                      <span style={{ color: '#F44541' }}>异常</span>
                    )}
                  </p>
                  <p class={styles.goWrapSub}>签退</p>
                </div>
              </div>
              <div class={styles.itemWrapTopRight}>
                <Icon name="arrow"></Icon>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
})
