<template>
	<view class="">
		 <view class="zxkjyr" style="padding: 0  42rpx;padding-top: 12rpx;">
			 
		 	<view :class="['zxkjyra',Inv==0?'zxkjyrff':'']" @click="Inv=0">
		 		<text>直播课程</text>
		 		<view class="zxkjxh"></view>
		 	</view>
			
			<view :class="['zxkjyra',Inv==1?'zxkjyrff':'']" @click="Inv=1">
				<text>录制课程</text>
				<view class="zxkjxh"></view>
			</view>
			
		 	<view :class="['zxkjyra',Inv==2?'zxkjyrff':'']" @click="Inv=2">
		 		<text>失效课程</text>
		 		<view class="zxkjxh"></view>
		 	</view>
			
		 </view>
		 
		<view class=" ">
			<view style="margin-top: 30rpx;">
				<view class="fsxto sclixmy" v-for="(item,index) in list" :key="index">
					<view class="fzctob">
						<view class="sckjert" style="overflow: hidden;">
                            <image :src="item.img" mode="aspectFill" style="width: 100%; height: 100%;"></image>
						</view>
						<view class="fsxto" style="width: 100%;margin-left: 24rpx;">
							<view class="cphrry"><text>{{item.title}}</text></view>
							<view class="cptxtyra" style="margin-bottom: 10rpx;"><text>{{item.lecturer_name}}</text></view>
							<view class="fzctob kcwwerrt">
								<text>{{item.type_title}}</text>
							</view>
						</view>
					</view>
					<view style="border-top: 2rpx dashed #e8e8e8;width: 107%;margin-left: -24rpx;margin-top: 22rpx;"></view>
					<view class="flztoa" style="margin-top: 26rpx;">
						<view class="fzctob">
							<text class="wdjga">¥</text>
							<text class="wdjgb">{{item.price}}</text>
							<!-- <text class="wdjgc">.00</text> -->
							<!-- <text class="scjga">原价¥{{item.line_price}}</text> -->
						</view>
                        <!-- url="../lecturer/kcdd-xq" -->
						<view class="kcdrry" hover-class="none" @click="toDetail(item.course_id)">
							<image v-if="Inv!=2" src="/static/lecturer/kca1.png" style="width: 136rpx;min-width: 136rpx;height: 50rpx;" mode=""></image>
                            <image v-if="Inv==2" src="/static/lecturer/kca2.png" style="width: 136rpx;min-width: 136rpx;height: 50rpx;" mode=""></image>
						</view>
					</view>
				</view>
			</view>
 
		</view>
	</view>
</template>
<style>
	page {
		background: #FAFAFA;
	}
</style>
<script>
	export default {
		data() {
			return {
				Inv: 0,
                list:[],
                course:[],
                fail_live:[],
                live:[],
                lecturer_name:''
			}
		},
        watch:{
            Inv(val){
                if(val==0){
                    this.list = this.live
                } else if(val==1){
                    this.list = this.course
                } else if(val==2){
                    this.list = this.fail_live
                }
            }
        },
        onLoad() {
            this.getList()
        },
		methods: {
            // 获取列表
            getList(){
                this.$post({
                    data:{
                        do:'MyOrderList',
                        data:{
                            user_id:uni.getStorageSync('id'),
                        }
                    }
                }).then(res=>{
                    console.log(res,'pppppppppppp')
                    this.course = res.data.course
                    this.fail_live = res.data.fail_live
                    this.live = res.data.live
                    this.lecturer_name = res.data.lecturer_name
                    if(this.Inv==0){
                        this.list = this.live
                    } else if(this.Inv==1){
                        this.list = this.course
                    } else if(this.Inv==2){
                        this.list = this.fail_live
                    }
                }) 
            },
            // 观看课程
            toDetail(id){
                if(this.Inv!=2){
                    uni.navigateTo({
                        url:'/pages/index/kcxq-x?id='+id
                    })
                }
            }
		}


	}
</script>

<style lang="scss" scoped>
	  
	 
	 
</style>
