<template>
<view class="ketang">
	<view style="padding:24rpx">
		<u-search placeholder="搜索视频" bgColor="#ffffff" v-model="keyword" @search="getList" height="90rpx" :showAction="false"></u-search>
	</view>
	<u-tabs :list="catagoryData" keyName="name" lineColor="#EB6100"
	 :activeStyle="{'font-weight': 'bold','font-size': '36rpx','color': '#222222'}"
	 @click="clickHandle"></u-tabs>
	<view class="list" v-if="list.length>0">
		<view class="listItem" v-for="item in list" @click="getDetails(item)" :key="item.id">
			<!-- <image :src="path+item.video_url" class="leftImg" mode="aspectFill"></image> -->
			<video
			  id="myVideo"
			  :src="path+item.video_url"
			  :controls="true"
			  :autoplay="false"
			  style="width: 100%; height: 380rpx;"
			></video>
			<view class="title">
				{{item.class_name}}
			</view>
		</view>
		
	</view>
	<view v-else style="text-align: center;margin-top:20rpx;">
		暂无数据
	</view>
</view>
</template>

<script>
export default{
	data(){
		return{
			keyword:'',
			class_type:null,
			catagoryData:[
				
			],
			path:this.path,
			page:1,
			total:0,
			list:[]
		}
	},
	async onReachBottom(){
		if(this.list.length<this.total){
			this.page++;
			await uni.request({
				url: '/wanlshop/gongyivideo/getvideolist',
				method:'post',
				data:{
					class_type:this.class_type,
					class_name:this.keyword,
					page:this.page,
				},
				success: res => {
					this.list.push(...res.data.data);
				}
			});
		}
	},
	methods:{
		clickHandle(val){
			this.page = 1;
			this.class_type = val.value;
			this.getList()
		},
		async loadData() {
			await uni.request({
				url: '/wanlshop/gongyivideo/gettypelist',
				success: res => {
					this.catagoryData = res.data;
					if(this.catagoryData.length>0){
						this.class_type = this.catagoryData[0].value;
					}
					this.getList()
				}
			});
		},
		async getList() {
			await uni.request({
				url: '/wanlshop/gongyivideo/getvideolist',
				method:'post',
				data:{
					class_type:this.class_type,
					class_name:this.keyword,
					page:this.page,
				},
				success: res => {
					this.list = res.data.data;
					this.total = res.total;
				}
			});
		},
		getDetails(item){
			
			uni.navigateTo({
				url:'/pages/user/ketangDetail?id='+item.id
			})
		}
	},
	onLoad() {
		this.loadData()
		
	}
}
</script>

<style scoped lang="scss">
.ketang{
	background-color: #F2F3F4;
	min-height: calc(100vh);
	
	.list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding:0 24rpx;
		.listItem{
			width:calc(50% - 10rpx);
			background: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			margin: 20rpx 0;
			image{
				width: 340rpx;
				height: 380rpx;
			}
			.title{
				padding:20rpx;
			}
		}
	}
}
</style>