import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import { Icon, Image } from 'vant'
import videoStop from '@common/images/icon_video_stop.png'

interface IProps {
  courseTime: string
  coursePlan: string
  videoPosterUrl?: string
  id?: number | string
}

export default defineComponent({
  name: 'CoursePlanStep',
  props: {
    courseId: {
      // 用于判断当前选择哪一节课程
      type: Number,
      default: 0
    },
    courseInfo: {
      type: Array as PropType<IProps[]>,
      default: []
    }
  },
  mounted() {
    console.log(this.courseId, 'courseId 121212')
  },
  render() {
    return (
      <div class={styles['col-steps']}>
        <div class={styles['col-steps__items']}>
          {this.courseInfo.map((item: any, index: number) => (
            <div class={styles['col-step']}>
              <div class={styles['col-step__title']}>
                {this.$slots.content ? (
                  this.$slots.content()
                ) : (
                  <div class={styles.stepSection}>
                    <div class={styles.stepTitle}>
                      <span
                        class={[
                          styles.stepTitleNum,
                          (this.courseId === 0 || this.courseId === item.id) &&
                            styles.active
                        ]}
                      >
                        第 {index + 1} 课时
                      </span>
                      <span class={styles.stepTitleText}>
                        {item.courseTime}
                      </span>
                    </div>
                    <div class={styles.stepContent}>
                      <p>{item.coursePlan}</p>
                      {item.videoPosterUrl && (
                        <div class={styles.videoImg}>
                          <Image src={item.videoPosterUrl} fit="cover" />
                          <Icon
                            class={styles.videoStop}
                            name={videoStop}
                            size={32}
                          />
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>
              <div class={styles['col-step_circle']}>{index + 1}</div>
              <div class={styles['col-step__line']}></div>
            </div>
          ))}
        </div>
      </div>
    )
  }
})
