<template>
	<view class="whole">
		<search-input @searchBtn="searchBtn" :searchValue="keyword" :show="false" />
		<view class="banner">
			<view class="box">
				<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/02/27/OBhoSI438LwCuN2KOa0zToktkPBfgS2gsDbJwG39.png" mode="widthFix" class="img"></image>
			</view>
		</view>
		<view class="goodbox">
			<view class="item" v-for="item in goodsList" :key="item.id">
				<image :src="item.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" class="img" @click="toGroups(item.id)"></image>
				<view class="box">
					<view class="tit" @click="toGroups(item.id)">{{item.title}}</view>
					<view class="text">
						<view class="btn flex" @click="toWant(item)" :class="item.is_collect ? 'hui' : ''">
							<text v-if="item.is_collect">已想要</text>
							<template v-else>
								<up-icon name="heart-fill" color="#fff" size="14" />&nbsp;想要
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="btnBox">
			<button class="btn flex">
				<up-icon name="share" :color="Color" />&nbsp;我要分享
			</button>
			<view class="btn flex on" @click="toPage">
				<up-icon name="heart-fill" color="#fff" />&nbsp;发布心愿
			</view>
		</view>
		
		<view class="bottom" v-if="goodsList.length && page >= last_page && !loading">— 没有更多了 —</view>
		<view v-if="!goodsList.length && !loading" class="empty">
			<up-empty mode="list" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/list.png" text="暂无数据"></up-empty>
		</view>
		<view v-if="loading" class="loadbox">
			<up-loading-icon text="加载中..." textSize="18"></up-loading-icon>
		</view>
		
		<!-- 返回顶部 -->
		<div @click="handleTop" v-if="showTop" class="top">
			<up-icon name="arrow-upward" color="#000" size="24" />
		</div>

	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { toMiniProgram } from '@/components/common.js'
	import { get, post } from '@/Api/request.js'
	import { Style } from '@/utils/list.js'
	import searchInput from '@/components/searchInput/index.vue'
	import { sp2 } from '@/components/img.js'
	
	export default {
		components: {
			searchInput
		},
		setup() {
			const data = reactive({
				sp2: sp2,
				orign_id: '',
				page: 1,
				last_page: 0,
				goodsList: [],
				loading: true,
				showTop: false,
				shareUrl: '',
				Color: '',
				priceColor: '',
				keyword: '',
				canClick: true
			})
			
			function searchBtn(e) {
				data.orign_id = ''
				data.keyword = e
				data.page = 1
				getFetchList(0)
			}
			
			function getFetchList(val) {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				let params = {
					collect_type: 1,
					page: data.page,
					pageSize: 20,
					title: data.keyword,
					shop_goods_id: data.orign_id
				}
				get('/api/app/wish/goods', params).then((res) => {
					data.last_page = res.meta.last_page
					data.goodsList = val == 0 ? res.data : data.goodsList.concat(res.data)
					uni.hideLoading()
					data.loading = false
				}).catch(() => {
					data.loading = false
				})
			}
			
			const handleTop = () => {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			}
			
			const toGroups = (id) => {
				uni.navigateTo({
					url: '/pages/groups/index?id=' + id
				})
			}
			
			const toPage = () => {
				uni.navigateTo({
					url: '/pages/mine/wise/add'
				})
			}
			
			const toWant = (item) => {
				// 取消提醒
				if(item.is_collect) {
					post(`/api/v1/goods/remind/cancel/${item.id}`, {type: 1}).then((res) => {
						item.is_collect = false
						uni.showToast({
							title: '已取消到货提醒',
							icon: 'none'
						})
					})
				} else {
					toMiniProgram('pages/mine/wise/index')
				}
			}
			
			return {
				toMiniProgram,
				...toRefs(data),
				getFetchList,
				handleTop,
				toGroups,
				searchBtn,
				toWant,
				toPage
			}
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page ++
				this.getFetchList(1)
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 300) {
				this.showTop = true
			} else {
				this.showTop = false
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			this.orign_id = options.id || ''
			this.Color = uni.getStorageSync('theme_color')
			this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
			await this.getFetchList(0)
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		position: relative;
		padding-bottom: 120rpx;
		background-color: $uni-bg-color;
		.banner{
			padding: 0 24rpx;
			margin: 10rpx 0;
			.box{
				background-color: v-bind('Color');
				border-radius: 20rpx;
				width: 100%;
				.img{
					width: 100%;
					vertical-align: bottom;
				}
			}
		}
	}
	.goodbox{
		padding: 0 24rpx;
		margin-top: 24rpx;
		.item{
			padding: 20rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			.img{
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
			.box{
				display: flex;
				width: calc(100% - 220rpx);
				height: 200rpx;
				flex-direction: column;
				justify-content: inherit;
				.tit{
					font-size: 30rpx;
					color: #000;
					line-height: 44rpx;
					height: 140rpx;
				}
				.text{
					display: flex;
					align-items: flex-end;
					justify-content: flex-end;
					.share{
						background-color: #F5F5F5;
						border-radius: 50%;
						width: 54rpx;
						height: 54rpx;
						.icon{
							background-position: -166px -62.25px;
							width: 20.5px;
							height: 20.5px;
							background-repeat: no-repeat;
							background-size: 339px 306px;
							transform: scale(0.65);
						}
					}
				}
				.btn{
					background: v-bind('Color');
					border-radius: 54rpx;
					font-size: 24rpx;
					color: #fff;
					height: 54rpx;
					width: 130rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 24rpx;
					line-height: 1;
					&.hui{
						background-color: #E2E2E2;
					}
				}
			}
		}
	}
	.empty{
		width: 100%;
	}
	.top {
		position: fixed;
		bottom: 15%;
		right: 5%;
		background: #fff;
		width: 80rpx;
		height: 80rpx;
		line-height: 107rpx;
		border-radius: 50%;
		text-align: center;
		box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
		z-index: 10;
	}
	.bottom {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		margin: auto;
		padding: 0 0 30rpx;
		width: 100%;
	}
	.loadbox{
		padding: 30rpx 0;
		text-align: center;
		color: #666;
	}
	.btnBox{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		position: fixed;
		background-color: #fff;
		bottom: 0;
		left: 0;
		z-index: 10;
		.btn{
			color: v-bind('Color');
			font-size: 28rpx;
			width: 36%;
			height: 32px;
			border: 1px solid v-bind('Color');
			border-radius: 10rpx;
			box-sizing: border-box;
			line-height: 1;
			border-radius: 32px 0 0 32px;
			position: relative;
			&.on{
				background: v-bind('Color');
				color: #fff;
				border-radius: 0 32px 32px 0;
				border-left: none;
				&::before{
					position: absolute;
					top: 0;
					left: -16px;
					content: '';
					height: 0;
					border: 15px solid #fff;
					border-right-color: v-bind('Color');
					border-bottom-color: v-bind('Color');
				}
			}
		}
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
