import { Icon, Swipe, SwipeItem, Tab, Tabs } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import iconBack from './image/back.svg'
import styles from './index.module.less'
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'

export default defineComponent({
  name: 'CoursewarePlay',
  setup() {
    onMounted(() => {
      const nodeList = document.querySelectorAll('.player')
      console.log('🚀 ~ nodeList', nodeList)
    //   const player = Plyr.setup('.player', {
    //     debug: false,
    //     ratio: '16:9'
    //   })
      const player = new Plyr('#player1', {
        autoplay: true
      })
      setTimeout(() => {
        // player.togglePlay()
      }, 1000)
      console.log('🚀 ~ player', player)
    })
    return () => (
      <div class={styles.coursewarePlay}>
        <div class={styles.backBtn}>
          <Icon name={iconBack} />
          返回
        </div>
        <div class={styles.menu}>
          <Tabs>
            <Tab title="前言"></Tab>
            <Tab title="嘴形+长振"></Tab>
            <Tab title="吐音"></Tab>
            <Tab title="号角发音"></Tab>
            <Tab title="发音练习"></Tab>
            <Tab title="结束语"></Tab>
          </Tabs>
        </div>
        <Swipe vertical>
          <SwipeItem>
            <div class={styles.videoItem}>
              <video class="player" id='player1' autoplay>
                <source
                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
                  type="video/mp4"
                />
              </video>
            </div>
          </SwipeItem>
          <SwipeItem>
            <div class={styles.videoItem}>
              <video class="player" controls>
                <source
                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
                  type="video/mp4"
                />
              </video>
            </div>
          </SwipeItem>
          <SwipeItem>
            <div class={styles.videoItem}>
              <video class="player" controls>
                <source
                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
                  type="video/mp4"
                />
              </video>
            </div>
          </SwipeItem>
          <SwipeItem>
            <div class={styles.videoItem}>
              <video class="player" controls>
                <source
                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
                  type="video/mp4"
                />
              </video>
            </div>
          </SwipeItem>
        </Swipe>
      </div>
    )
  }
})