import { defineComponent, reactive, ref } from 'vue'
import styles from './studentAtt-item.module.less'
import clockIcon from '../images/clock-icon.png'
import goIcon from '../images/go-icon.png'
import passIcon from '../images/pass-icon.png'
import { Icon, ActionSheet } from 'vant'
import { useRouter } from 'vue-router'
export default defineComponent({
  props: ['item'],
  name: 'studentAtt-item',
  setup(props) {
    const router = useRouter()
    const gotoStudentDetail = () => {
      router.push({ path: '/student-att-day', query: { time: props.item.time } })
    }
    return () => (
      <>
        <div class={styles.itemWrap} onClick={gotoStudentDetail}>
          <div class={styles.itemWrapTop}>
            <div class={styles.itemWrapTopLeft}>
              <div class={styles.clockWrap}>
                <img src={clockIcon} alt="" />
              </div>
              <p class={styles.leftTimer}>{props.item.time} </p>
            </div>
            <div class={styles.itemWrapTopRight}>
              <Icon name="arrow"></Icon>
            </div>
          </div>
          <div class={styles.itemWrapBottom}>
            <div class={styles.passWrap}>
              <img src={goIcon} alt="" />
              <div>
                <p class={styles.itemBottomMain}>{props.item.leaveNum}</p>
                <p class={styles.itemBottomSub}>请假人数</p>
              </div>
            </div>
            <div class={styles.goWrap}>
              <img src={passIcon} alt="" />
              <div>
                <p class={styles.itemBottomMain}>{props.item.truancyNum}</p>
                <p class={styles.itemBottomSub}>旷课人数</p>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
})