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}>
          <span>本学期作业</span>
        </div>
        <div class={styles.items}>
          <div class={styles.item}>
            <div>
              <span
                style={{
                  color:
                    item.actualSubmitCount >= item.shouldSubmitCount
                      ? ''
                      : '#FC1A19'
                }}>
                {item.actualSubmitCount}
              </span>
              /{item.shouldSubmitCount}
              <span class={styles.ci}></span>
            </div>
            <div class={styles.label}>作业情况</div>
          </div>

          <div class={styles.item}>
            <div>
              <span style={{ color: '#00B2A7' }}>{item.qualifiedCount}</span>
              <span class={styles.ci}>次</span>
            </div>
            <div class={styles.label}>合格</div>
          </div>

          <div class={styles.item}>
            <div>
              <span style={{ color: '#4498F5' }}>{item.unqualifiedCount}</span>
              <span class={styles.ci}>次</span>
            </div>
            <div class={styles.label}>不合格</div>
          </div>

          <div class={styles.item}>
            <div>
              <span style={{ color: '#F08226' }}>{item.unsubmitCount}</span>
              <span class={styles.ci}>次</span>
            </div>
            <div class={styles.label}>未提交</div>
          </div>
        </div>
      </div>
    );
  }
});
