h5-colexiu/src/teacher/piano-room/model/student-info/student-confirm.tsx

import dayjs from 'dayjs'
import { Button } from 'vant'
import { defineComponent } from 'vue'
import Student from '../../components/student'
import styles from './student-confirm.module.less'

export default defineComponent({
  name: 'studentConfirm',
  props: {
    courseInfo: {
      type: Object,
      default: {}
    },
    studentObject: {
      type: Object,
      default: {}
    },
    onSubmit: {
      type: Function,
      default: (item: any) => {}
    }
  },
  computed: {
    timer() {
      const item: any = this.courseInfo
      return (
        dayjs(item.startTime).format('YYYY/MM/DD HH:mm') +
        ' ~ ' +
        dayjs(item.endTime).format('HH:mm')
      )
    },
    addStudents() {
      const { addStudents } = this.studentObject
      return addStudents || []
    },
    removeStudents() {
      const { removeStudents } = this.studentObject
      return removeStudents || []
    },
    calcTimer() {
      const { addStudents, removeStudents } = this.studentObject
      const { singleCourseTime, studentCount } = this.courseInfo
      const suffix: number = addStudents.length - removeStudents.length
      console.log(suffix, singleCourseTime, this.courseInfo)
      const type = suffix >= 0 ? 'add' : 'remove'
      // n * (n -1) * 分钟数 * 课次数
      // 总分钟数
      const allMinutes = studentCount * singleCourseTime
      //
      const reTime = Math.abs(
        (Math.abs(suffix + studentCount) + 1) *
          Math.abs(suffix + studentCount) *
          singleCourseTime
      )
      return {
        type,
        mins: Math.abs(allMinutes - reTime)
      }
    }
  },
  render() {
    return (
      <div class={styles.studentConfirm}>
        <div class={[styles.confirmTitle, 'van-hairline--bottom']}>
          <p>您将为{this.courseInfo.groupName}</p>
          <p class={styles.timer}>{this.timer}</p>
        </div>

        <div class={styles.studentList}>
          {this.addStudents.length > 0 && (
            <>
              <p class={styles.addTitle}>
                添加学员 <span>{this.addStudents.length}</span> 名
              </p>
              {this.addStudents.map((item: any) => (
                <Student border={false} item={item} />
              ))}
            </>
          )}

          {this.removeStudents.length > 0 && (
            <>
              <p class={styles.addTitle}>
                移除学员 <span>{this.removeStudents.length}</span> 名
              </p>
              {this.removeStudents.map((item: any) => (
                <Student border={false} item={item} />
              ))}
            </>
          )}
        </div>

        <p class={styles.calc}>
          调整后将{this.calcTimer.type === 'remove' ? '释放' : '冻结'}{' '}
          <span>{this.calcTimer.mins}</span> 分钟
        </p>

        <div class={styles.btnGroup}>
          <Button
            type="primary"
            round
            block
            onClick={() => {
              const { userIdList } = this.studentObject
              this.onSubmit(userIdList)
            }}
          >
            确认调整
          </Button>
        </div>
      </div>
    )
  }
})