import { Icon, Swipe, SwipeItem, Tab, Tabs } from 'vant'
import { defineComponent, onMounted, reactive, nextTick } from 'vue'
import iconBack from './image/back.svg'
import styles from './index.module.less'
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'
import request from '@/helpers/request'
import { state } from '@/state'
import { useRoute } from 'vue-router'
import { postMessage } from '@/helpers/native-message'

export default defineComponent({
  name: 'CoursewarePlay',
  setup() {
    postMessage({
      api: 'setRequestedOrientation',
      content:{
        orientation: 1
      }
    })
    const route = useRoute()
    const data = reactive({
      detail: null,
      active: '',
      knowledgePointList: [] as any
    })
    const getDetail = async () => {
      try {
        const res: any = await request.get(
          state.platformApi + `/lessonCoursewareDetail/detail/${route.query.id}`
        )
        if (Array.isArray(res?.data)) {
          data.detail = res.data
        }
        if (Array.isArray(res?.data?.knowledgePointList)) {
          data.knowledgePointList = res.data.knowledgePointList
        }
        console.log('数据加载完成')
      } catch (error) {}
      nextTick(() => {
        console.log('开始加载视频')
        videoInit()
      })
    }
    const videoInit = () => {
      console.log(document.querySelectorAll('.player'))
      const player = Plyr.setup('.player', {
        debug: false,
        ratio: '16:9'
      })
      console.log('🚀 ~ player', player)
    }
    onMounted(() => {
      getDetail()
    })
    const goback = () => {
      history.go(-1)
    }
    return () => (
      <div class={styles.coursewarePlay}>
        <div class={styles.backBtn} onClick={() => goback()}>
          <Icon name={iconBack} />
          返回
        </div>
        <div class={styles.menu}>
          <Tabs v-model:active={data.active} ellipsis={false}>
            {{
              default: () => {
                return data.knowledgePointList.map((n: any) => {
                  return <Tab title={n.name} name={n.id}></Tab>
                })
              }
              // 'nav-right': () => <div style={{width: '40%'}} class={styles.menuLine}></div>
            }}
          </Tabs>
        </div>
        <Tabs class={styles.tabsContent} animated lazyRender={false} v-model:active={data.active}>
          {data.knowledgePointList.map((item: any) => {
            return (
              <Tab name={item.id}>
                <Swipe vertical lazyRender={false}>
                  {Array.isArray(item?.materialList) &&
                    item.materialList.map((m: any) => {
                      return (
                        <SwipeItem>
                          {m.type === 'VIDEO' ? (
                            <div class={styles.videoItem}>
                              <video class="player" controls>
                                <source src={m.content} type="video/mp4" />
                              </video>
                            </div>
                          ) : m.type === 'IMG' ? (
                            <div class={styles.imgItem}>
                              <img src={m.content} />
                            </div>
                          ) : (
                            <div class={styles.songItem}>曲谱</div>
                          )}
                        </SwipeItem>
                      )
                    })}
                </Swipe>
              </Tab>
            )
          })}
        </Tabs>
      </div>
    )
  }
})