<template>
	<view>
		<view class="sh-title-card mb10">
			<view class="title-box">
				<u-tabs @change="onTabChang" :list="typeList" lineColor="#eb3729" :current="currentTabIndex" 
					activeStyle="font-size: 32rpx;color: #eb3729;"></u-tabs>
				<!-- <div :class="{active: currentType == 0}" class="title-item">免费课程</div>
        <div :class="{active: currentType == 1}" class="title-item">精品课程</div> -->
				<!-- <view class="title-text" :style="{ color: detail.color }">为你推荐</view> -->
			</view>
		</view>
		<view class="hot-goods  mb10">

			<view v-show="currentTabIndex == 0" class="goods-list x-f">
				<uv-waterfall ref="waterfall"
							v-model="freeSubjectList"
							:add-time="10"
							:left-gap="leftGap"
							:right-gap="rightGap"
							:column-gap="columnGap"
							@changeList="changeList">
							<!-- 第一列数据 -->
							<template v-slot:list1>
								<!-- 为了磨平部分平台的BUG，必须套一层view -->
								<view>
									<view class="goods-item" v-for="(item, promotionGoodIndex) in list1"
										:key="promotionGoodIndex">
										<view class="goods-box" @tap="routerGo(item)">
											<view class="img-box">
												<!-- <image class="tag-img" :src="item.image" mode=""></image> -->
												<image class="img" :src="item.poster" lazy-load mode="widthFix"></image>
											</view>
											<view class="tip one-t">{{ item.category.cateName }}</view>
											<view class="title more-t u-line-1">{{ item.subjectName }}</view>
											<view class="price-box">
												<view class="flex x-bc align-end">
													<!-- <view class="current">{{ item.price }} </view> -->
													<view class="sales miso-font u-line-1">{{ item.introduce }}</view>
												</view>
												<view class="x-f tag-box">
													<view class="discount">免费观看</view>
										<!-- <view class="discount">满100减60</view> -->
												</view>
											</view>
										</view>
									</view>
								</view>
							</template>
							<!-- 第二列数据 -->
							<template v-slot:list2>
								<!-- 为了磨平部分平台的BUG，必须套一层view -->
								<view>
									<view class="goods-item" v-for="(item, promotionGoodIndex) in list2"
										:key="promotionGoodIndex">
										<view class="goods-box" @tap="routerGo(item)">
											<view class="img-box">
												<!-- <image class="tag-img" :src="item.image" mode=""></image> -->
												<image class="img" :src="item.poster" lazy-load mode="widthFix"></image>
											</view>
											<view class="tip one-t">{{ item.category.cateName }}</view>
											<view class="title more-t u-line-1">{{ item.subjectName }}</view>
											<view class="price-box">
												<view class="flex x-bc align-end">
													<!-- <view class="current">{{ item.price }} </view> -->
													<view class="sales miso-font u-line-1">{{ item.introduce }}</view>
												</view>
												<view class="x-f tag-box">
													<view class="discount">免费观看</view>
										<!-- <view class="discount">满100减60</view> -->
												</view>
											</view>
										</view>
									</view>
								</view>
							</template>
						</uv-waterfall>
				
			</view>
			
			<view v-show="currentTabIndex == 1" class="goods-list x-f">
			  <uv-waterfall ref="waterfall"
			  			v-model="paySubjectList"
			  			:add-time="10"
			  			:left-gap="leftGap"
			  			:right-gap="rightGap"
			  			:column-gap="columnGap"
			  			@changeList="changeList2">
			  			<!-- 第一列数据 -->
			  			<template v-slot:list1>
			  				<!-- 为了磨平部分平台的BUG，必须套一层view -->
			  				<view>
			  					<view class="goods-item" v-for="(item, promotionGoodIndex) in list3"
			  						:key="promotionGoodIndex">
			  						<view class="goods-box" @tap="routerGo(item)">
			  							<view class="img-box">
			  								<!-- <image class="tag-img" :src="item.image" mode=""></image> -->
			  								<image class="img" :src="item.poster" lazy-load mode="widthFix"></image>
			  							</view>
			  							<view class="tip one-t">{{ item.category.cateName }}</view>
			  							<view class="title more-t u-line-1">{{ item.subjectName }}</view>
			  							<view class="price-box">
			  								<view class="flex x-bc align-end">
			  									<!-- <view class="current">{{ item.price }} </view> -->
			  									<view class="sales miso-font u-line-1">{{ item.introduce }}</view>
			  								</view>
			  								<view class="x-f tag-box">
			  									<view class="discount">免费试看</view>
			  						<!-- <view class="discount">满100减60</view> -->
			  								</view>
			  							</view>
			  						</view>
			  					</view>
			  				</view>
			  			</template>
			  			<!-- 第二列数据 -->
			  			<template v-slot:list2>
			  				<!-- 为了磨平部分平台的BUG，必须套一层view -->
			  				<view>
			  					<view class="goods-item" v-for="(item, promotionGoodIndex) in list4"
			  						:key="promotionGoodIndex">
			  						<view class="goods-box" @tap="routerGo(item)">
			  							<view class="img-box">
			  								<!-- <image class="tag-img" :src="item.image" mode=""></image> -->
			  								<image class="img" :src="item.poster" lazy-load mode="widthFix"></image>
			  							</view>
			  							<view class="tip one-t">{{ item.category.cateName }}</view>
			  							<view class="title more-t u-line-1">{{ item.subjectName }}</view>
			  							<view class="price-box">
			  								<view class="flex x-bc align-end">
			  									<!-- <view class="current">{{ item.price }} </view> -->
			  									<view class="sales miso-font u-line-1">{{ item.introduce }}</view>
			  								</view>
			  								<view class="x-f tag-box">
			  									<view class="discount">免费试看</view>
			  						<!-- <view class="discount">满100减60</view> -->
			  								</view>
			  							</view>
			  						</view>
			  					</view>
			  				</view>
			  			</template>
			  		</uv-waterfall>
			</view>

		</view>
	</view>
</template>
<script>
	export default {
		name: 'PromotionGood',
		props: ['freeSubjectList', 'paySubjectList'],
		data: function() {
			return {
				typeList: [{
					name: '免费课程'
				}, {
					name: '精品课程'
				}],
				currentTabIndex: 1,
				list: [],// 瀑布流全部数据
				list1: [],// 瀑布流第一列数据
				list2: [],// 瀑布流第二列数据
				list3: [],// 瀑布流第一列数据
				list4: [],// 瀑布流第二列数据
				leftGap: '20rpx',
				rightGap: '20rpx',
				columnGap: 0
			}
		},
		methods: {
			onTabChang({
				index,
				name
			}) {
				this.currentTabIndex = index
			},
			routerGo(item) {
				this.$yrouter.push({
					path: "/pages/subject/detail/detail",
					query: {
						sid: item.id
					}
				});
			},
			changeList(e){
				this[e.name].push(e.value);
			},
			changeList2(e){
				if(e.name == 'list1') {
					this.list3.push(e.value);
				}else {
					this.list4.push(e.value);
				}
			},
		},
		mounted() {},
	}
</script>

<style lang="scss">
	.sh-title-card {
		width: 750rpx;
	}

	.title-box {
		width: 710rpx;
		height: 88rpx;
		margin: 0 auto;
		position: relative;
		border-radius: 30rpx;
		display: flex;

		.title-bg {
			width: 100%;
			height: 100%;
		}

		.title-text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-weight: bold;
		}
	}

	.goods-box {
		width: 345rpx;
		background: #fff;
		padding-bottom: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;

		.img-box {
			width: 345rpx;
			// height: 345rpx;
			// height: 163rpx;
			overflow: hidden;
			position: relative;

			.tag-img {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				width: 80rpx;
				height: 40rpx;
			}

			.img {
				width: 345rpx;
				height: 345rpx;
				background-color: #ccc;
			}
		}

		.tip {
			width: 346rpx;
			line-height: 56rpx;
			background: rgba(246, 242, 234, 1);
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(168, 112, 13, 1);
			padding: 0 20rpx;
		}

		.title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 36rpx;
			margin: 20rpx 20rpx 10rpx;
		}

		.price-box {
			padding: 10rpx 20rpx 0;
			width: 344rpx;
			box-sizing: border-box;

			.sales {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				line-height: 20rpx;
				margin-bottom: 20rpx;
			}

			.current {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(225, 33, 43, 1);
				line-height: 30rpx;
				margin-bottom: 20rpx;

				&:before {
					content: '￥';
					font-size: 26rpx;
				}
			}

			.original {
				font-size: 22rpx;
				font-weight: 400;
				text-decoration: line-through;
				color: rgba(153, 153, 153, 1);
				margin-left: 14rpx;
				line-height: 22rpx;
				margin-bottom: 10rpx;

				&:before {
					content: '￥';
					font-size: 20rpx;
				}
			}

			.tag-box {
				.discount {
					line-height: 28rpx;
					border: 1rpx solid rgba(225, 33, 43, 1);
					border-radius: 8rpx;
					font-size: 18rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(225, 33, 43, 1);
					padding: 0 8rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	// 为你推荐
	.hot-goods {
		// background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6);
		// border-radius: 20rpx;

		.goods-list {

			.goods-item {
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				width: 345rpx;
				box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
				border-radius: 10rpx;

				&:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
	}
</style>