<template>
	<view class="container">
		<view class="statusBarHG" :style="'height:'+statusBarHeight+'px'"></view>
		<view class="tab-h flex-row sticky flex-y-center" :style="'top:'+statusBarHeight+'px'">
			<view class="item" :class="tabType == 1?'active':''" @click="onTabChange(1)">文案教程</view>
			<!-- <view class="item" :class="tabType == 2?'active':''" @click="onTabChange(2)">文章</view> -->
			<view class="item" :class="tabType == 2?'active':''" @click="onTabChange(2)">视频教程</view>
		</view>
		<view class="statusBarHG" style="height:45px"></view>
		<view class="tab-b">
			<navigator :url="'./detail?id='+item.id+'&tabType='+tabType" class="item flex-row" v-for="(item,index) in list" :key="item.id">
				<image :src="item.thumb" mode="aspectFill" class="img"></image>
				<view class="info">
					<view class="title text-1">{{item.title}}</view>
					<view class="desc text-1">{{item.desc}}</view>
					<view class="time">{{item.create_time}}</view>
				</view>
			</navigator>
		</view>
		<view class="no-more" v-if="list.length<=0">
			暂无内容
		</view>
		<!-- <page-btm-bar :active="2" /> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabType: 1,
				list: [],
				statusBarHeight: 0,
			}
		},
		methods: {
			onTabChange(index) {
				this.tabType = index
				index == 1 ? this.jcdetail() : this.vdlist();
			},
			jcdetail() {
				this.request({
					url: "Content/jclist",
					data: {},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.list = res.data;
					}
				}).catch((res) => {});
			},
			vdlist() {
				this.request({
					url: "Content/vdlist",
					data: {},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.list = res.data;
					}
				}).catch((res) => {});
			},

		},

		onLoad() {
			this.jcdetail();
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},

	}
</script>

<style>
	.tab-h {
		padding: 0rpx 40rpx;
		height: 45px;
		background-color: #fff;
		position: fixed;
		/* top: var(--window-top); */
	}

	.tab-h .item {
		font-size: 40rpx;
		color: #242424;
		font-weight: 500;
		line-height: 67rpx;
		margin-right: 60rpx;
		/* transition: all 0.2s; */
	}

	.tab-h .item.active {
		font-size: 48rpx;
	}

	.tab-b .item {
		padding: 20rpx 40rpx;
		align-items: flex-start;
	}

	.tab-b .item .img {
		flex: none;
		display: block;
		width: 230rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.tab-b .item .info {
		flex: none;
		width: 416rpx;
		min-height: 160rpx;
		padding-left: 24rpx;
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.tab-b .item .info .title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		line-height: 45rpx;
	}

	.tab-b .item .info .desc {
		font-size: 28rpx;
		color: #999;
		font-weight: 400;
		line-height: 40rpx;
		margin-top: 10rpx;
	}

	.tab-b .item .info .time {
		font-size: 26rpx;
		color: #adadad;
		font-weight: 400;
		line-height: 37rpx;
		margin-top: auto;
	}

	.no-more {
		text-align: center;
		font-size: 30rpx;
		color: #999999;
	}
</style>
