import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import { Icon, Image, Popup } from 'vant'
import videoStop from '@common/images/icon_video_stop.png'
import VideoList from './video-list'
import request from '@/helpers/request'

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

export default defineComponent({
  name: 'CoursePlanStep',
  props: {
    courseId: {
      // 用于判断当前选择哪一节课程
      type: Number,
      default: 0
    },
    courseInfo: {
      type: Array as PropType<IProps[]>,
      default: []
    }
  },
  data() {
    return {
      videoStatus: false,
      list: []
    }
  },
  mounted() {
    console.log(this.courseId, 'courseId 121212')
  },
  methods: {
    async onLookVideo(item: any) {
      // console.log(item)
      try {
        const res = await request.get('/api-student/liveRoomVideo/queryVideo', {
          params: {
            roomUid: item.roomUid
          }
        })
        console.log(res)
        this.list = res.data || []
        this.videoStatus = true
      } catch {
        //
      }
    }
  },
  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.liveState === 2 && (
                        <div
                          class={styles.videoText}
                          onClick={() => {
                            this.onLookVideo(item)
                          }}
                        >
                          查看回放{'>>'}
                        </div>
                      )}
                      {/* {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>

        <Popup
          v-model:show={this.videoStatus}
          closeable
          round
          style={{ width: '90%' }}
        >
          {this.videoStatus && <VideoList list={this.list} />}
        </Popup>
      </div>
    )
  }
})
