<template>
	<view class="min-page bg-f7">
		<up-navbar title="积分商城" bgColor="transparent" leftIconColor="#333" titleStyle="color:#333"
			@leftClick="back"></up-navbar>
		<view :style="{ backgroundImage: 'url(' + imgs.bg + ')' }" class="bg">
			<view class="top">
				<view>
					<view class="u-flex">
						<image :src="imgs.wujiaoxing" class="wujiaoxing"></image>
						<view class="u-flex" @click="toDetail">
							<view class="number u-m-l-20 u-m-r-12">{{pointsUser?pointsUser.pointBalance:0}}</view>
							<view class="u-flex">
								<up-icon name="arrow-right" size="18" bold color="#9C571F"></up-icon>
							</view>
						</view>

					</view>
					<view class="u-m-t-10 u-flex color1" style="margin-left: 66rpx">
						<text @click="toPage('/scoreShop/order/index?shopId='+query.shopId)">积分订单</text>
						<text class="u-m-l-44" @click="toDetail">积分明细</text>
					</view>
				</view>
				<view class="u-flex">
					<image :src="imgs.huizhang" class="huizhang"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="tab-box u-flex">
				<view class="tabs u-flex-1 u-flex">
					<view class="tab-item" :class="tabActive === 0 ? 'active' : ''" @click="tabActive = 0">优惠券</view>
					<view class="tab-item" :class="tabActive === 1 ? 'active' : ''" @click="tabActive = 1">其它商品</view>
				</view>
				<view class="u-flex gap-20">
					<view  @click="toggleLayout">
						<image :src="layout === 'block' ? imgs.layout_block : imgs.layout" class="layout" />
					</view>
					<ymfShare size="40rpx" color="#9C571F"></ymfShare>
				</view>
				
			</view>
			<goodsList :pointsUser="pointsUser" :layout="layout" :list="list" @exchange="exchange"></goodsList>

			<view class="">
				<up-loadmore :status="isEnd?'nomore':'loadmore'"></up-loadmore>
			</view>
		</view>
		
		<ymf-share-popup ></ymf-share-popup>
	</view>
</template>
<script setup>
	import ymfShare from '@/components/ymf-components/ymf-share.vue'
	import * as pointGoodsApi from "@/common/api/order/pointGoods.js";
	import goodsList from "./components/goods-list.vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		reactive,
		watch
	} from "vue";
	import {
		onReachBottom
	} from "@dcloudio/uni-app";
	const imgs = {
		bg: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/3716211a58d84fda9ee596a1882c0704.png", //背景图
		huizhang: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/5d07600cc494490aa3adacfe51d8845d.png", //徽章
		wujiaoxing: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/d53e8d88462d4d838b12150062644d03.png", //五角星
		layout: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/cba40ceb38a64bbfbe144f2ab0d6197f.png", //布局
		layout_block: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/3/57a51ee2c74d4a638db2a81c6f6c8954.png",
	};
	const layout = ref("block");

	function toggleLayout() {
		layout.value = layout.value === "block" ? "list" : "block";
	}

	function back() {
		const pages = getCurrentPages();
		if (pages.length < 2) {
			uni.switchTab({
				url: '/pages/index/index'
			})
		} else {
			uni.navigateBack({
				delta: 1,
			});
		}


	}

	// function exchange(item) {
	// 	pointGoodsApi.exchange({
	// 		pointsGoodsId: item.id,
	// 		shopId: item.shopId,
	// 		number: 1,
	// 		price: item.extraPrice
	// 	}).then(res => {
	// 		refresh()
	// 	})
	// }

	function toDetail() {
		if (!pointsUser.value || !pointsUser.value.id) {
			return
		}

		uni.navigateTo({
			url: '/pages/user/member/billDetails?type=2&shopId=' + query.shopId + '&id=' + (pointsUser.value ?
				pointsUser.value.id :
				'')
		})
	}

	function toPage(url) {
		uni.navigateTo({
			url: url,
		});
	}
	const tabActive = ref(0);
	const query = reactive({
		page: 1,
		size: 10,
		shopId: '',
		goodsCategory: ''
	});
	const isEnd = ref(false);
	const pointsUser = ref(null)
	const list = ref([])

	function getList() {
		const goodsCategory = tabActive.value === 1 ? '其它商品' : '优惠券'
		pointGoodsApi.pointGoodsPage({
			...query,
			goodsCategory,
		}).then(res => {
			pointsUser.value = res.pointsUser
			uni.setStorageSync('pointsUser', res.pointsUser)
			const newList = res.pointsGoods.records
			if (query.page == 1) {
				list.value = newList
			} else {
				list.value.push(...newList)
			}
			if (query.page >= res.pointsGoods.totalPage * 1) {
				isEnd.value = true
			}
		})
	}


	import {
		shareMixin,
		handleMixinOnLoad,
		returnQuery,
		jsonToUrl,
		wxShare,returnIndexBg ,
		returnCommonQuery
	} from '@/utils/share.js'
	// defineOptions({
	// 	mixins: [shareMixin],
	// });

	async function onShare() {
		const queryJson = await returnCommonQuery()
		let query = jsonToUrl(queryJson)
		let json = {}

		json.title = '积分乐园，好物兑换'
		json.imageUrl = returnIndexBg()||uni.cache.get('shopInfo').logo || ''
		return wxShare({
			query,
			...json,
			path: '/scoreShop/index/index' + '?' + query
		})
	}

	onShareAppMessage(onShare)
	onShareTimeline(onShare)
	const options = reactive({

	})
	onLoad(async (opt) => {
		Object.assign(options, opt)
		query.shopId = opt.shopId || ''
	})
	watch(() => tabActive.value, (newval, oldval) => {
		refresh()
	})

	function refresh() {
		query.page = 1;
		isEnd.value = false;
		getList();
	}
	onReachBottom(() => {
		if (isEnd.value) {
			return
		}
		query.page++
		getList();
	})
	import {
		productStore
	} from '@/stores/user.js';
	import {
		onShareAppMessage
	} from '@dcloudio/uni-app';
import { onShareTimeline } from '@dcloudio/uni-app';
	const storeuser = productStore();


	onShow(async () => {
		if (!storeuser.isHasLogin) {
			await handleMixinOnLoad(options)
			refresh()
		} else {
			refresh()
		}
	});
</script>
<style scoped lang="scss">
	.bg {
		background-size: cover;
		min-height: 454rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.gap-20 {
		gap: 20rpx;
	}

	.top {
		padding: 138rpx 26rpx 48rpx 42rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		$color: #9c571f;

		.huizhang {
			width: 218rpx;
			height: 212rpx;
		}

		.wujiaoxing {
			width: 68rpx;
			height: 68rpx;
		}

		.color1 {
			color: $color;
		}

		.number {
			color: $color;
			font-size: 64rpx;
			font-weight: 900;
		}
	}

	.layout {
		width: 36rpx;
		height: 36rpx;
	}

	.min-page {
		display: flex;
		flex-direction: column;
	}

	.bottom {
		width: 750rpx;
		flex: 1;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		transform: translateY(-32rpx);
		z-index: 1;
		background: #f7f7f7;

		.tab-box {
			display: flex;
			align-items: center;
			padding: 36rpx 32rpx 14rpx 0;

			.tabs {
				justify-content: center;
				gap: 200rpx;

				.tab-item {
					font-size: 28rpx;
					color: #666;
					padding: 16rpx 0;
					position: relative;

					&::after {
						display: block;
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 0;
						content: "";
						width: 58rpx;
						height: 6rpx;
						background-color: transparent;
						transition: all 0.3s;
					}

					&.active::after {
						background-color: #ffaa62;
					}
				}
			}
		}
	}
</style>