import dayjs from 'dayjs'
import { Button } from 'vant'
import { computed, defineComponent, PropType } from 'vue'
import { IStudent } from '../select-students'
import styles from './index.module.less'
import { params as item } from '../class-info'

export default defineComponent({
  name: 'CourseSchedule',
  props: {
    curriculum: {
      type: Array as PropType<any[]>,
      default: []
    },
    onClose: {
      type: Function,
      default: (n: any) => {}
    },
    onComfirm: {
      type: Function,
      default: (n: any) => {}
    }
  },
  setup(props: any) {
    const students = computed(() => {
      let list = item.studentIds.map((n: IStudent) => n.userName)
      return list.join('、')
    })
    return () => {
      const n = item.studentIds.length + 1
      return (
        <div class={styles.box}>
          <div class={styles.title}>
            <div class={styles.leftIcon}></div>
            课程预览
          </div>
          <div class={styles.wrap}>
            <div class={styles.stu}>
              <div>
                您将为学员：
                <span style={{ color: 'var(--van-primary)' }}>
                  {students.value}
                </span>
              </div>
              <div>
                排
                <span style={{ color: '#FF4E19', margin: '0 10px' }}>
                  {item.classNum}节 {item.singleClassTime}分钟
                </span>
                课程
              </div>
            </div>
            <div class={styles.timeBox}>
              <div class={styles.timeTitle}>上课时间：</div>
              {props.curriculum.map((item: any) => (
                <div class={styles.timeItem}>
                  {dayjs(item.startTime || new Date()).format('YYYY-MM-DD')}{' '}
                  {dayjs(item.startTime || new Date()).format('HH:mm')}~
                  {dayjs(item.endTime || new Date()).format('HH:mm')}
                </div>
              ))}
            </div>

            <div style={{ color: '#999999' }}>
              以上课程预计将消耗琴房时长{' '}
              {Math.ceil(
                n * (n - 1) * item.classNum * parseInt(item.singleClassTime)
              )}{' '}
              分钟 <br />
              确认排课后时长冻结 <br />
              实际消耗时长以扣减结果为准 <br />
            </div>
          </div>

          <div class={styles.footer}>
            <Button block round onClick={() => props.onClose()}>
              重新选择
            </Button>
            <Button
              block
              round
              type="primary"
              onClick={() => props.onComfirm()}
            >
              确认排课
            </Button>
          </div>
        </div>
      )
    }
  }
})
