import { PropType, defineComponent } from 'vue';
import styles from '../index.module.less';
import { IStudentManage } from '../type';

export default defineComponent({
  name: 'Attendance',
  props: {
    item: {
      type: Object as PropType<IStudentManage>,
      default: () => ({})
    }
  },
  setup(props) {
    const item = props.item;
    return () => (
      <div class={styles.attendance}>
        <div class={[styles.attendanceTitle, styles.assignmentTitle]}>
          <span>本学期出勤</span>
        </div>
        <div class={styles.items}>
          <div class={styles.item}>
            <div>
              <span style={{ color: item.actualAttendanceCount >= item.shouldAttendanceCount ? '' : '#FC1A19' }}>
                {item.actualAttendanceCount}
              </span>
              /{item.shouldAttendanceCount}
              <span class={styles.ci}></span>
            </div>
            <div class={styles.label}>出勤情况</div>
          </div>

          <div class={styles.item}>
            <div>
              <span style={{ color: '#00B2A7' }}>{item.normalAttendanceCount}</span>
              <span class={styles.ci}>次</span>
            </div>
            <div class={styles.label}>正常出勤</div>
          </div>

          <div class={styles.item}>
            <div>
              <span style={{ color: '#4498F5' }}>{item.lateCount}</span>
              <span class={styles.ci}>次</span>
            </div>
            <div class={styles.label}>迟到</div>
          </div>

          <div class={styles.item}>
            <div>
              <span style={{ color: '#F08226' }}>{item.leaveCount}</span>
              <span class={styles.ci}>次</span>
            </div>
            <div class={styles.label}>请假</div>
          </div>

          <div class={styles.item}>
            <div>
              <span style={{ color: '#FC1A19' }}>{item.truancyCount}</span>
              <span class={styles.ci}>次</span>
            </div>
            <div class={styles.label}>旷课</div>
          </div>
        </div>
      </div>
    );
  }
});
