import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import { Cell, CellGroup } from 'vant'
import iconTimer from './images/icon-timer.png'
import groupLogo from './images/group-logo.png'

interface IProps {
  courseTime: string
  coursePlan: string
  roomUid?: string
  teacherName: string
  subjectName: string
  liveState?: number
  id?: number | string
}

export default defineComponent({
  name: 'group-plan-step',
  props: {
    courseId: {
      // 用于判断当前选择哪一节课程
      type: Number,
      default: 0
    },
    courseInfo: {
      type: Array as PropType<IProps[]>,
      default: []
    }
  },
  setup(props) {
    return () =>
      props.courseInfo.map((item: IProps, index: number) => (
        <CellGroup border={false} class={styles.groupPlanStep}>
          <Cell
            center
            border
            v-slots={{
              icon: () => <img src={iconTimer} class={styles.iconTimer} />,
              title: () => <div class={styles.name}>{item.courseTime}</div>
            }}
          ></Cell>
          <Cell center class={styles.contentClass}>
            <div class={styles.top}>
              <img src={groupLogo} class={styles.groupLogo} />
              <div class={styles.topContent}>
                <h2>第{index + 1}课时</h2>
                <div class={styles.desc}>
                  <span class={styles.username}>{item.teacherName}</span>
                  <span class={styles.subjectName}>{item.subjectName}</span>
                </div>
              </div>
            </div>
            <div class={styles.bottom}>
              {item.coursePlan}
            </div>
          </Cell>
        </CellGroup>
      ))
  }
})
