<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 class="detail bg-white padding">
					<view class="detail-title">{{detail.course_data.attend_name}}</view>
					<view class="detail-item">
						<text class="cuIcon-title text-student"></text>
						<text class="text-gray">周期</text>
						<text class="text-black margin-left-xs">{{detail.course_data.start_at}}</text>
					</view>
					<view class="detail-item flex">
						<text class="text-gray" style="width:40px;"></text>
						<text class="text-black margin-left-xs">{{detail.course_data.end_at}}</text>
					</view>
					<view class="detail-item margin-top-xs">
						<text class="cuIcon-title text-student"></text>
						<text class="text-gray">年级</text>
						<text class="text-black margin-left-xs">{{detail.course_data.grade}}</text>
					</view>
				</view>
				<view class="teacher flex bg-white padding margin-tb-sm">
					<image mode="scaleToFill" :src="teacher_avatar" class="avatar lg"></image>
					<view class="flex-sub margin-left">
						 <view class="teacher-title">{{detail.teacher.username||''}}老师授课</view>
						 <view class="teacher-item">所属机构：{{detail.teacher.agency_name||''}}</view>
						<view class="teacher-exp flex">
							 <view class="exp-item">{{detail.teacher.honor||''}}</view>
							 <view class="exp-item">{{detail.teacher.introduce||''}}</view>
						 </view>
					</view>
				</view>
				<view class="cu-timeline">
					<view class="cu-time">详情</view>
					<view class="cu-item">
						<view class="cu-content time-item flex justify-between">
							<view class="time-left text-black flex-sub">评价</view>
							<view class="time-right text-student" @tap="check('studentEvaluate')">
								查看
							</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="cu-content time-item flex justify-between">
							<view class="time-left text-black flex-sub">上课时间
								<view>{{detail.course_data.start_at}}</view>
							</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="cu-content time-item flex justify-between">
							<view class="time-left text-black flex-sub">课堂签到
								<view>{{detail.call_status.title}}</view>
							</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="cu-content time-item flex justify-between">
							<view class="time-left text-black flex-sub">课堂视频</view>
							<view class="time-right text-student" @tap="check('studentVideo')">
								查看
							</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="cu-content time-item flex justify-between">
							<view class="time-left text-black flex-sub">课堂作品</view>
							<view class="time-right text-student" @tap="check('studentWorks')">
								查看
							</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="cu-content time-item flex justify-between">
							<view class="time-left text-black flex-sub">下课时间
								<view>{{detail.course_data.end_at}}</view>
							</view>
						</view>
					</view>
					<view class="cu-item">
						<view class="cu-content time-item flex justify-between">
							<view class="time-left text-black flex-sub">安全交接</view>
							<view class="time-right text-student" @tap="check('studentSignin')">
								查看
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { _dailiClass } from '@/api/course'
export default {
  data() {
    return {
      topHeader: this.globalCustomBarHeight,
      plan_id: 0,
      detail: {},
      swiper: {
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500
      },
      teacher_avatar: '/static/imgs/class/logo0.png'
    }
  },
  onLoad(options) {
    const id = decodeURIComponent(options.id)
    if (!id) uni.navigateBack()
    this.plan_id = id
    this.init()
  },
  methods: {
    check(page) {
      this.globalNavigateTo(page, { plan_id: this.plan_id })
    },
    init() {
      _dailiClass({ plan_id: this.plan_id }).then(res => {
        this.detail = res.data
        uni.setStorage({
          data: JSON.stringify(this.detail),
          key: 'daily_class'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/common/css/mixin.scss';
.page{
	height:100vh;
}
.detail{
	&-title{
		@include title(10px,22px);
	}
}
.teacher{
	&-title{
		@include title(4px,18px);
	}
}
.time-item{
	line-height:32px;
	.time-left{
	}
	.time-right{
		width:120rpx;
	}
}
</style>
