import { openDefaultWebView } from '@/student/home-layout-orchestra/state-orchestra'
import { Image } from 'vant'
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import TheTitle from '../the-title'
import styles from './index.module.less'
import event from '../../event'

export default defineComponent({
  name: 'video-class',
  props: {
    video: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  setup(props) {
    const router = useRouter()
    return () => (
      <>
        {props.video.length > 0 && (
          <TheTitle
            title="精品视频课"
            onDetail={() => {
              // const url = location.origin + location.pathname + '#/videoClass'
              // openDefaultWebView(url, () => {
              //   router.push('/videoClass')
              // })
              event.emit('downloadApp')
            }}
          />
        )}

        <div class={styles.videoContainer}>
          {props.video.map((item: any) => (
            <div
              class={styles.videoItem}
              onClick={() => {
                // const url =
                //   location.origin +
                //   location.pathname +
                //   '#/videoDetail?groupId=' +
                //   item.videoGroupId
                // openDefaultWebView(url, () => {
                //   router.push({
                //     path: '/videoDetail',
                //     query: {
                //       groupId: item.videoGroupId
                //     }
                //   })
                // })
                event.emit('downloadApp')
              }}
            >
              <div style={{ position: 'relative' }}>
                <Image
                  class={styles.viCover}
                  fit="cover"
                  src={item?.lessonCoverUrl}
                />
                <span class={styles.subjectName}>{item?.subjectName}</span>
              </div>

              <div class={styles.viSection}>
                <div class={[styles.viTitle, 'van-ellipsis']}>
                  {item?.videoGroupName}
                </div>

                <div class={styles.viUser}>
                  <div class={styles.viUserName}>{item.teacherName}</div>
                  <div class={styles.viUserNum}>{item?.buyCount}人在学</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </>
    )
  }
})
