<script setup>
	// 历史浏览
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		onReachBottom,
		onPullDownRefresh,
		onShow,
		onLoad,
		onReady,
	} from '@dcloudio/uni-app';
	// 工具库
	import util from '@/common/js/util.js'
	// 
	import api from '@/api/index.js'
	// 列表
	const list = reactive([])

	onLoad(() => {
		// 获取浏览记录
		historyView()
	})

	// 获取浏览记录
	function historyView() {
		api.shop.getHistoryView().then(res => {
			if (res.code == 200) {
				// 今天的年月日
				let todayStr = getDate()
				// 昨天的年月日
				let yesterdayStr = getDate(-1)
				// 列表
				let arr = []
				// 遍历原始数据
				res.data.forEach(item => {
					let date = item.browsingHistoryTime.split(' ')[0];
					if (date == todayStr) date = '今天'
					else if (date == yesterdayStr) date = '昨天'
					let findResult = arr.find(r => r.date === date);

					// 判断是否有时间 有在列表追加 没有追加整个列表
					if (findResult) findResult.list.push(item);
					else arr.push({
						date: date,
						list: [item]
					})
				});
				// 列表
				list.push(...arr)
				return
			}

			util.alert({
				content: res.msg,
				showCancel: false
			})
		})
	}

	// 获取日期
	function getDate(offset = 0) {
		// 创建一个新的 Date 对象，表示当前时间
		let today = new Date();
		// 使用 setDate 方法将日期设置为偏移后的日期，getDate() 获取当前日期，offset 表示偏移量，-1 表示昨天，0 表示今天，1 表示明天，以此类推
		today.setDate(today.getDate() + offset);
		// 获取年
		let year = today.getFullYear();
		// 获取月，需要注意的是 getMonth() 方法返回的月份是从 0 开始的，所以需要加 1
		let month = today.getMonth() + 1;
		// 获取日
		let day = today.getDate();
		// 格式化月和日，如果月或日小于 10，在前面添加 0 以保持格式一致
		month = month < 10 ? '0' + month : month;
		day = day < 10 ? '0' + day : day;
		// 返回格式化后的日期字符串
		return `${year}-${month}-${day}`;
	}

	/**
	 * 跳转详情
	 * @param {Object} secItem
	 */
	function handleItem(secItem) {
		uni.navigateTo({
			url: util.setUrl('/pages/shop/commodity/index', {
				productId: secItem.id
			})
		})
	}
</script>

<template>
	<view class="app">
		<view class="list">
			<view class="item mtb20 bfff" v-for="(item,index) in list" :key="index">
				<view class="date ptb20 plr20 c333 f28">{{item.date}}</view>

				<view class="product line df ptb20 plr20" v-for="(secItem,secIndex) in item.list" :key="index"
					@click="handleItem(secItem)">

					<view class="poster wh160">
						<image class="wh160 br10" :src="secItem.sliderImage.split(',')[0]" mode="aspectFill" />
					</view>

					<view class="info df fdc jcsb f1 ml20">
						<view class="name t2hd c333 f28">{{secItem.name}}</view>

						<view class="other rows">
							<view class="col c333">
								<text class="f20">￥</text>
								<text class="f30">{{secItem.price}}</text>
								<text class="count ml20 fs0 c999 f24">销量：{{secItem.sales}}</text>
							</view>
							<view class="btn ti warmHollow plr20">去购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="fill" style="height: 30rpx;"></view>
	</view>
</template>

<style lang="scss" scoped>
	.list {
		.item {
			.date {
				border-bottom: 2rpx solid #eee;
			}
		}
	}
</style>