<template>
	<view class="bg">
		<image :src="headImg" class="topImg" mode="aspectFill"></image>
		
		<view @click="gotoDetailByType(item)" class="item" v-for="(item,index) in list" :key="index">
			<image :src="item.headimg" mode="aspectFill" class="image"></image>
			<view class="content flex-column">
				<view>
					<view class="title text-overflowRows">{{item.title}}</view>
					<view class="tags" v-if="item.display_tags">
						<view class="tag" v-for="(tagItem,tagIndex) in item.display_tags.split(',').slice(0,2)" :key="tagIndex">{{tagItem}}</view>
					</view>
				</view>
				<view class="price">{{item.price / 100}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headImg: '',
				list: [],
				finished: false
			}
		},
		mounted() {
			// 头图
			this.getHeadImg(2374)
			this.getList()
		},
		onReachBottom() {
			setTimeout(() => {
				if(!this.finished) this.getList()
			},1000)
		},
		methods: {
			getHeadImg (id) {
				this.Post({id},'/api/multimedia/detail').then(res => {
					this.headImg = res.data.head_img
					uni.setNavigationBarTitle({
						title:res.data.title
					})
				});	
			},
			getList() {
				this.Post({
					offset: this.list.length,
					limit: 10,
					tag_id: 659,
					title: ''
				}, '/api/product/get_product_by_tag').then(res => {
					if (res) {
						this.list = [...res.data.list, ...this.list]
						
						if (res.data.list.length < 10) {
							this.finished = true
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		padding-bottom: 100rpx;
		background-color: rgba(249, 252, 243, 1);
	}
	
	.topImg {
		width: 100%;
		height: 386.67rpx;
	}
	
	.item {
		margin: 30rpx 26rpx;
		height: 240rpx;
		display: flex;
		
		.image {
			width: 240rpx;
			height: 240rpx;
			border-radius: 20rpx;
			margin-right: 22rpx;
			flex-shrink: 0;
		}
		
		.content {
			flex: 1;
			height: 240rpx;
			padding-top: 10rpx;
			justify-content: space-between;
			
			.title {
				font-weight: bold;
				font-size: 31rpx;
				color: #333333;
			}
			
			.tags {
				display: flex;
				margin-top: 25rpx;
				
				.tag {
					font-size: 24rpx;
					color: #6A8A27;
					margin-right: 11rpx;
				}
				.tag:not(:last-child)::after{
					content: '|';
					display: inline-block;
					margin-left: 11rpx;
				}
			}
			
			.price {
				font-weight: bold;
				font-size: 34rpx;
				color: #DC2525;
				margin-left: auto;
			}
			.price::before {
				content: '￥';
				font-size: 23rpx;
			}
			.price::after {
				content: '起';
				font-size: 23rpx;
				color: rgba(153, 153, 153, 1);
			}
		}
	}
</style>