<template>
	<view class="whole" v-if="loading">
		<view class="topHead" :style="{'padding': statusBarHeight + 'px 0 0'}">
			<view class="backBar" @click="toBack()"><up-icon name="arrow-left" color="#333" size="24" /></view>
			<view class="box flex">
				<view class="item" v-for="item in itemList" :key="item.id" :class="curItem === item.id ? 'active' : ''" @click="changeTop(item.id)">{{item.text}}</view>
			</view>
		</view>
		
		<view class="listBox" :style="{height: 'calc(100vh - ' + statusBarHeight + 'px)', marginTop: statusBarHeight + 'px'}">
			<view v-show="curItem === 1" style="padding: 24rpx;">
				<view class="searchBox1">
					<up-icon name="search" size="20" color="#98989F" />
					<input class="input" v-model="inputVal" type="input" placeholder="搜索团购名称" @blur="judgeSearch()" @input="judgeClose()"/>
					<view class="sousuo" @click="searchHandle()">搜索</view>
					<view class="close flex" v-if="showClose" @click="clearInput()"><up-icon name="close-circle-fill" size="20" color="#666" /></view>
				</view>
				<view v-if="!noCollect">
					<view class="item" v-for="(item, index) in groupsList" :key="item.id">
						<view class="left" @click="toGroups(item.extend_id)">
							<image :src="item.extend.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" class="img"></image>
						</view>
						<view class="box">
							<view class="title">
								<view class="tit">{{item.extend.title}}</view>
								<view class="desc">{{item.extend.description}}</view>
							</view>
							<view class="text">
								<view>
									<text class="txt1" v-if="parseFloat(item.extend.min_price) == parseFloat(item.extend.max_price)">￥{{item.extend.min_price}}</text>
									<text class="txt1" v-else>￥{{item.extend.min_price}}~{{item.extend.max_price}}</text>
									<br><text class="txt2" v-if="parseFloat(item.extend.price) != 0">￥{{item.extend.price}}</text>
								</view>
								<view class="btn flex" @click="toGroups(item.extend_id)">立即购买</view>
							</view>
						</view>
					</view>
					<view class="bottom" v-if="page1 >= lastPage1">
						— 没有更多了 —
					</view>
				</view>
				<view class="noCollect" v-if="noCollect">
					<up-empty mode="favor" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/favor.png" text="暂无收藏"></up-empty>
				</view>
			</view>
			
			<view v-show="curItem === 2" class="browseBox" :class="showBtn ? 'padbtm' : ''">
				<view class="topOne" :style="{'top': statusBarHeight + 'px'}">
					<view class="text">
						<text v-if="!showBtn">来逛逛足迹里的宝贝</text>
						<text v-else>请选择要删除的记录</text>
					</view>
					<view class="box">
						<text v-if="!showBtn" @click="clearBrowse()">清空</text>
						<text v-if="!showBtn" @click="openBtn()">管理</text>
						<text v-if="showBtn" @click="completeBtn()">完成</text>
					</view>
				</view>
				
				<view v-show="!noBrowse">
					<view class="britem" v-for="(val, index) in browseList" :key="index">
						<view class="tt">{{val.time == nowDay ? '今天' : val.time}}</view>
						<view class="item" v-for="item in val.list" :key="item.id" :class="showBtn ? 'item1' : ''">
							<view class="xuanzhe flex" v-if="showBtn" @click="addToList(item)">
								<up-icon v-if="item.isChecked" name="checkmark-circle-fill" :color="Color" size="20" />
								<up-icon v-else name="checkmark-circle" color="#ccc" size="20" />
							</view>
							<view class="left" @click="addToList(item)">
								<image :src="item.extend.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" class="img"></image>
							</view>
							<view class="box">
								<view class="title" @click="addToList(item)">
									<view class="tit">{{item.extend.title}}</view>
									<view class="desc">{{item.extend.description}}</view>
								</view>
								<view class="text">
									<view @click="addToList(item)">
										<text class="txt1" v-if="parseFloat(item.extend.min_price) == parseFloat(item.extend.max_price)">￥{{item.extend.min_price}}</text>
										<text class="txt1" v-else>￥{{item.extend.min_price}}~{{item.extend.max_price}}</text>
										<br><text class="txt2" v-if="parseFloat(item.extend.price) != 0">￥{{item.extend.price}}</text>
									</view>
									<view v-if="!showBtn" class="btn flex" @click="toDetail(item.extend)">立即购买</view>
								</view>
							</view>
						</view>
						<view class="bottom" v-if="page2 >= lastPage2">
							— 没有更多了 —
						</view>
					</view>
				</view>
				<view class="noBrowse" v-if="noBrowse">
					<up-empty mode="history" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/record.png" text="暂无浏览记录"></up-empty>
				</view>
				
				<view class="btmbox" v-if="showBtn">
					<view class="num">共<text>{{ selNum }}</text>件</view>
					<view class="addbtn flex" :class="delIds.length === 0 ? 'disabled' : ''" @click="delGroups()">删除</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import { showToast, dateTimeStr } from '@/components/common.js'
	import { Style } from '@/utils/list.js'
	
	export default {
		setup() {
			const data = reactive({
				itemList: [
					{ id: 1, text: '我的收藏' },
					{ id: 2, text: '历史浏览' }
				],
				curItem: 1,
				groupsList: [],
				loading: false,
				lastPage1: 0,
				page1: 1,
				lastPage2: 0,
				page2: 1,
				showBtn: false,
				selNum: 0,
				browseList: [],
				showSearch: false,
				inputVal: '',
				showClose: false,
				focusInput: false,
				delIds: [],
				noCollect: false,
				noBrowse: false,
				nowDay: null,
				Color: uni.getStorageSync('theme_color'),
				priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
				statusBarHeight: 0
			})
			// 收藏列表
			function getCollection() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				get('/api/v1/users/collect', {
					type: 1,
					title: data.inputVal,
					page: data.page1,
					pageSize: 10
				}).then((res) => {
					data.lastPage1 = res.meta.last_page
					data.groupsList = data.groupsList.concat(res.data)
					data.noCollect = data.groupsList.length === 0
					uni.hideLoading()
				})
			}
			
			// 浏览记录
			function getBrowseList() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				get('/api/v1/users/log', {
					type: 1,
					page: data.page2,
					pageSize: 10
				}).then((res) => {
					data.lastPage2 = Math.ceil(res.total / 10)
					for (let key in res.data) {
						if(data.browseList.length !== 0 && data.browseList[data.browseList.length - 1].time == key) {
							data.browseList[data.browseList.length - 1].list = data.browseList[data.browseList.length - 1].list.concat(res.data[key])
						} else {
							data.browseList.push({
								time: key,
								list: res.data[key]
							})
						}
					}
					data.noBrowse = data.browseList.length === 0
					uni.hideLoading()
				})
			}
			
			const toGroups = (id) => {
				uni.navigateTo({
					url: '/pages/groups/index?id=' + id
				})
			}
			
			const toDetail = (item) => {
				if(item.type === 1) {
					uni.navigateTo({
						url: '/pages/groups/index?id=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/productDetails/index?id=' + item.id
					})
				}
			}
			
			const toBack = () => {
				uni.navigateBack({
					delta: 1
				})
			}
			
			const changeTop = (id) => {
				data.curItem = id
			}
			
			// 搜索框失焦时,判断是否显示
			function judgeSearch() {
				if(data.inputVal === '') {
					data.showSearch = false
				}
			}
			
			function judgeClose() {
				data.showClose = data.inputVal === '' ? false : true
			}
			
			// 批量删除
			function delGroups() {
				if(data.delIds.length === 0) {
					showToast('请选择删除项')
					return
				}
				uni.showLoading({
					mask: true,
					title: '删除中'
				})
				post('/api/v1/users/log/delete', { user_log_ids: data.delIds }).then((res) => {
					uni.hideLoading()
					data.selNum = 0
					data.delIds = []
					data.showBtn = false
					data.page2 = 1
					data.browseList = []
					getBrowseList()
				})
			}
			
			// 管理
			function openBtn() {
				if(data.browseList.length !== 0) {
					data.showBtn = true
				}
			}
			
			// 清空浏览记录
			function clearBrowse() {
				if(data.browseList.length !== 0) {
					uni.showModal({
						title: '提示',
						content: '确定清空浏览记录吗？',
						confirmColor: '#42b983',
						success(res) {
							if (res.confirm) {
								confirmRemove()
							}
						}
					})
				}
			}
			function confirmRemove() {
				uni.showLoading({
					mask: true,
					title: '正在删除'
				})
				post('/api/v1/users/log/clear').then((res) => {
					uni.hideLoading()
					data.page2 = 1
					data.browseList = []
					getBrowseList()
				})
			}
			
			// 搜索
			function searchHandle() {
				data.page = 1
				data.groupsList = []
				getCollection()
			}
			
			function clearInput() {
				data.inputVal = ''
				data.showClose = false
				data.focusInput = true
				searchHandle()
			}
			
			// 完成按钮
			function completeBtn() {
				data.browseList.forEach((item) => {
					item.list.forEach((it) => {
						it.isChecked = false
					})
				})
				data.selNum = 0
				data.delIds = []
				data.showBtn = false
			}
			
			function addToList(item) {
				if(data.showBtn) {
					item.isChecked = !item.isChecked
					item.isChecked ? data.selNum += 1 : data.selNum -= 1
					if(item.isChecked) {
						data.delIds.push(item.id)
					} else {
						let i = data.delIds.indexOf(item.id)
						data.delIds.splice(i, 1)
					}
				} else {
					toDetail(item.extend)
				}
			}
			
			return {
				dateTimeStr,
				...toRefs(data),
				getCollection,
				changeTop,
				toBack,
				clearBrowse,
				addToList,
				confirmRemove,
				judgeSearch,
				clearInput,
				searchHandle,
				judgeClose,
				getBrowseList,
				completeBtn,
				delGroups,
				openBtn,
				toGroups,
				toDetail
			}
		},
		async onLoad() {
			// await this.$onLaunched
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight
				}
			})
			this.getBrowseList()
			this.nowDay = dateTimeStr('y-m-d', new Date())
		},
		async onShow() {
			this.page = 1
			this.groupsList = []
			await this.getCollection()
			this.loading = true
		},
		// 上滑加载
		onReachBottom() {
			if(this.curItem === 1) {
				if (this.page1 < this.lastPage1) {
					this.page1 ++
					this.getCollection()
				}
			} else {
				if (this.page2 < this.lastPage2) {
					this.page2 ++
					this.getBrowseList()
				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			if(this.curItem === 1) {
				this.page1 = 1
				this.groupsList = []
				this.getCollection()
			} else {
				this.page2 = 1
				this.browseList = []
				this.getBrowseList()
			}
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.whole{
		width: 100%;
		height: 100vh;
	}
	.topHead{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		height: 80rpx;
		background: #fff;
		.backBar{
			position: fixed;
			left: 30rpx;
			margin-top: 18rpx;
		}
		.box{
			width: 100%;
			height: 100%;
		}
		.item {
			font-size: 30rpx;
			color: #111;
			margin: 0 40rpx;
			&.active{
				font-weight: bold;
				color: v-bind('Color');
			}
		}
	}
	
	.searchBox1{
		width: 100%;
		height: 80rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-radius: 10rpx;
		padding-left: 24rpx;
		position: relative;
		box-sizing: border-box;
		.input{
			width: calc(100% - 150rpx);
			font-size: 28rpx;
			color: #555;
			margin-left: 10rpx;
		}
		.sousuo{
			font-size: 28rpx;
			color: v-bind('Color');
			width: 120rpx;
			border-left: 1px solid #EEEEEE;
			text-align: center;
		}
		.close{
			position: absolute;
			top: 0;
			right: 120rpx;
			z-index: 2;
			width: 80rpx;
			height: 80rpx;
		}
	}
	.listBox{
		padding: 80rpx 0 0;
		box-sizing: border-box;
		.item{
			border-radius: 10rpx;
			margin-top: 24rpx;
			padding: 24rpx;
			display: flex;
			justify-content: space-between;
			background: #fff;
			.left{
				width: 200rpx;
				height: 200rpx;
			}
			.img{
				width: 100%;
				height: 100%;
			}
			.box{
				display: flex;
				width: calc(100% - 220rpx);
				height: 200rpx;
				flex-direction: column;
				justify-content: inherit;
				.tit{
					font-size: 30rpx;
					color: #333;
					line-height: 42rpx;
					font-weight: bold;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.desc{
					font-size: 28rpx;
					color: #9C9C9C;
					line-height: 42rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.text{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: v-bind('priceColor');
				}
				.txt1{
					font-size: 30rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}
				.txt2{
					font-size: 24rpx;
					color: #9C9C9C;
				}
				.btn{
					width: 130rpx;
					height: 50rpx;
					background: v-bind('Color');
					border-radius: 50rpx;
					font-size: 22rpx;
					color: #fff;
				}
			}
			.xuanzhe{
				width: 60rpx;
			}
		}
		.item1{
			.left{
				width: 200rpx;
				height: 200rpx;
			}
			.box{
				width: calc(100% - 280rpx);
			}
		}
	}
	
	.browseBox{
		position: relative;
		padding: 90rpx 24rpx 24rpx;
		&.padbtm{
			padding: 90rpx 24rpx 144rpx;
		}
	}
	
	.topOne{
		padding: 24rpx 0 24rpx 24rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		width: 100%;
		left: 0;
		height: 90rpx;
		box-sizing: border-box;
		margin-top: 80rpx;
		z-index: 1;
		.text{
			text{
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}
		.box{
			text{
				font-size: 26rpx;
				color: #656565;
				padding: 10rpx 24rpx;
			}
		}
	}
	.btmbox{
		position: fixed;
		bottom: 0;
		height: 120rpx;
		box-sizing: border-box;
		width: 100%;
		z-index: 90;
		left: 0;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding: 0 24rpx;
		border-top: 1px solid #e5e5e5;
		box-sizing: border-box;
		.addbtn{
			width: 400rpx;
			height: 90rpx;
			color: #fff;
			background: v-bind('Color');
			font-size: 32rpx;
			border-radius: 10rpx;
			&.disabled{
				opacity: 0.6;
			}
		}
		.num{
			color: #666;
			text{
				color: v-bind('Color');
				margin: 0 4rpx;
			}
		}
	}
	
	.bottom {
		text-align: center;
		font-size: 24rpx;
		color: #999999;
		margin: auto;
		line-height: 80rpx;
	}
	.britem{
		.tt{
			font-size: 28rpx;
			color: #656565;
			padding: 50rpx 0 0;
		}
	}
	.noCollect{
		display: flex;
		align-items: center;
		padding-top: 30%;
		font-size: 24rpx;
		color: #999999;
		flex-direction: column;
		image{
			width: 200rpx;
		}
	}
	.noBrowse{
		display: flex;
		align-items: center;
		padding-top: 30%;
		font-size: 24rpx;
		color: #999999;
		flex-direction: column;
		margin-top: 50rpx;
		image{
			width: 200rpx;
		}
		text{
			margin-top: 20rpx;
		}
	}
</style>