<template>
  <view>
    <VideoStudy :states="states" v-if="showVideo" @handleVideo="handleVideo" />
    <div class="content" v-else>
      <div v-for="(item, index) in studyList" :key="index" @click="handleStudyItem(item)">
        <ListItem :states="item" />
      </div>
    </div>
  </view>
</template>

<script>
import VideoStudy from './components/VideoStudy'
import ListItem from './components/ListItem'

export default {
  components: { VideoStudy, ListItem },
  data() {
    return {
      showVideo: false,
      states: {
        initialTime: 70, // 初始播放时间
        url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
      },
      // 学习列表
      studyList: [
        {
          id: 1,
          // 学习标题
          studyTitle: '送配电线路架设(初级)',
          // 学习进度
          progress: 30,
          // 学习时长
          duration: '00:12:00',
					initialTime: 12,
          url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
        },
        {
          id: 2,
          studyTitle: '送配电线路架设(中级)',
          progress: 50,
          duration: '00:12:00',
					initialTime: 12,
          url: 'http://qp118.bmwae.cn/preview/file?pageCount=4&file_type=pdf&id=1117542&url=https%3A%2F%2Fbmwfileres.bmwax.cn%2Fmqrcode%2Fmqrfile%2F586413%2F1723517907_3080034644_%E6%B5%8B%E8%AF%95.pdf&preview_url=convert%2Fmqrcode%2Fmqrfile%2F586413%2F1723517907_3080034644_%E6%B5%8B%E8%AF%95&short=xmQqgA&domain=w.afbcs.cn&sign=&d=true&t=%E6%B5%8B%E8%AF%95&tips='
        },
        {
          id: 3,
          studyTitle: '送配电线路架设(高级)',
          progress: 70,
          duration: '00:12:00',
					initialTime: 12,
          url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
        }
      ]
    }
  },
  methods: {
    handleVideo(val) {
      console.log('🚀 ~ handleVideo ~ val:', val)
      this.showVideo = false
    },
		handleStudyItem(item) {
      console.log('🚀 ~ handleStudyItem ~ item:', item, item.url.includes('.pdf'))
			if (item.url.includes('.pdf')) {
				uni.navigateTo({
					url: '/pages/YNEduApp/learn/pdfStudy',
				})
			} else {
				this.states = item
				this.showVideo = true
			}
		}
  }
}
</script>

<style lang="scss" scoped>
.content {
	padding: 10px;
}
</style>
