import { defineComponent, reactive, ref } from 'vue'
import styles from './studnet-course-item.module.less'
import clockIcon from '@/school/attendance/images/clock-icon.png'
import passIcon from '../images/pass-icon.png'
import unpassIcon from '../images/unpass-icon.png'
import msgIcon from '@/school/images/msg-icon.png'
import { Icon, ActionSheet } from 'vant'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
export default defineComponent({
  props: ['item', 'type'],
  name: 'student-course-item',
  setup(props) {
    const router = useRouter()
    const onAdjust = () => {
      router.push({ path: '/course-adjust', query: { id: props.item.id, isBack: 'true' } })
    }
    return () => (
      <>
        <div class={styles.itemWrap}>
          <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>
              <p class={styles.itemWrapBottomMain}>
                {props.item.className}-{props.item.teacherName}
              </p>
              <p class={styles.itemWrapBottomSub}>{props.item.orchestraName}</p>
            </div>
            <div class={styles.itemWrapBottomRight}>
              {props.type == 'STUDENT' ? null : (
                <div class={styles.rejectBtn} onClick={onAdjust}>
                  调整
                </div>
              )}
            </div>
          </div>
        </div>
      </>
    )
  }
})