<template>
  <view class="page">
		<cu-custom :isBack="true" title="课堂视频"></cu-custom>
		<scroll-view scroll-y="true"
			:style="[{height:'calc(100vh - '+ topHeader+'px)'}]">
			<view class="content">
				<view class="course-img">
					<swiper class="swiper" :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration">
						<swiper-item v-for="(item,index) in detail.course_data.image" :key="index">
							<view class="swiper-item">
								  <image :src="item" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view>
					<view class="title flex align-center">
						<text class="iconfont" style="font-size:24px;">&#xe76d;</text>课堂视频
					</view>
					<view class="list">
						<view class="cu-card case" v-for="(video,index) in detail.moments_data.data" :key="index">
							<view class="cu-item shadow">
								<view class="image">
									<video :src="video" style="width:100%;"></video>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      topHeader: this.globalCustomBarHeight,
      detail: {},
      swiper: {
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500
      }
    }
  },
  onLoad() {
    this.init()
  },
  methods: {
    init() {
      this.detail = JSON.parse(uni.getStorageSync('daily_class'))
    }
  }
}
</script>

<style lang="scss" scoped>
.page{
	height:100vh;
}
</style>
