<template>
	<view class="mall-container">
		<u-navbar :is-fixed="false" title="商城好物" :background="{background: 'transparent' }" :border-bottom="false"
			back-icon-color="#fff" title-color="#fff">
			<template v-slot:right>
				<image src="/static/icon/zhu.png" style="width: 50rpx;height: 50rpx;margin-right: 24rpx;" mode=""></image>
			</template>
		</u-navbar>

		<view class="search">
			<u-search @search="reloadMallData" placeholder="点击查询商品" v-model="params.keyword" :show-action="false"
				bg-color="#FEEFCE" </u-search>
		</view>

		<view class="menu-list">
			<view class="menu-item" v-for="(item, index) in menuList" @click="handleMenuChange(index)">
				<view class="img-box">
					<image class="img" :src="'/static/mall/'+(index+1)+'.png'" mode=""></image>
				</view>
				<view class="menu-text" :class="currentMenu==index?'menu-text-actice':''">
					<view class="text" :class="currentMenu==index?'text-actice':''">
						{{item}}
					</view>
				</view>
			</view>
		</view>

		<view class="mall-list">
			<u-waterfall v-model="mallList" ref="mallListRef">
				<template v-slot:left="{leftList}">
					<view class="mall-item u-m-r-10" v-for="(item, index) in leftList" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image_url)"
							:index="index"></u-lazy-load>
						<view class="mall-title u-m-l-5 u-m-r-5">
							{{item.name}}
						</view>
						<del class="u-m-l-5 u-m-r-5" style="white-space: nowrap;">￥{{item.price}}</del>
						<view class="mall-price u-m-l-5 u-m-r-5" v-if="RDType(item.payment_methods)">
							<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
							{{item.rongdou_price}}
						</view>
						<view class="mall-price u-m-l-5 u-m-r-5" v-if="pointsType(item.payment_methods)">
							<u-icon name="integral"></u-icon>
							{{item.points_price}}
						</view>
						<view class="mall-tag u-m-l-5 u-m-r-5">
							<view class="mall-tag-text" v-if="RDType(item.payment_methods)">
								融豆
							</view>
							<view class="mall-tag-owner" v-if="pointsType(item.payment_methods)">
								积分
							</view>
						</view>
						<view class="mall-shop u-m-l-5 u-m-r-5">
							{{item.category}}
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="mall-item u-m-l-10" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image_url)"
							:index="index"></u-lazy-load>
						<view class="mall-title u-m-l-5 u-m-r-5">
							{{item.name}}
						</view>
						<del class="u-m-l-5 u-m-r-5" style="white-space: nowrap;">￥{{item.price}}</del>
						<view class="mall-price u-m-l-5 u-m-r-5" v-if="RDType(item.payment_methods)">
							<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
							{{item.rongdou_price}}
						</view>
						<view class="mall-price u-m-l-5 u-m-r-5" v-if="pointsType(item.payment_methods)">
							<u-icon name="integral"></u-icon>
							{{item.points_price}}
						</view>
						<view class="mall-tag u-m-l-5 u-m-r-5">
							<view class="mall-tag-text" v-if="RDType(item.payment_methods)">
								融豆
							</view>
							<view class="mall-tag-owner" v-if="pointsType(item.payment_methods)">
								积分
							</view>
						</view>
						<view class="mall-shop u-m-l-5 u-m-r-5">
							{{item.category}}
						</view>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed } from 'vue';
	import { onReachBottom } from '@dcloudio/uni-app'
	import { mallAPI } from '../../api/mall';
	import { getImageUrl } from '../../util/common';

	const params = ref({
		keyword: '',
		page: 1,
		size: 5,
		category: ''
	})

	const mallList = ref([])
	const mallListRef = ref()

	const loadStatus = ref('loadmore') // nomore
	const maxPage = ref(1)

	// 积分兑换
	const pointsType = (val : any) => {
		if (val && val.indexOf("points") >= 0) return true
		return false
	}
	// 融豆兑换
	const RDType = (val : any) => {
		if (val && val.indexOf("rongdou") >= 0) return true
		return false
	}

	// 加载数据
	const loadMallData = () => {
		if (loadStatus.value == 'nomore') return
		mallAPI.getMallList(params.value).then((res) => {
			mallList.value = mallList.value.concat(res.data.products)
			maxPage.value = res.data.pagination.pages
			params.value.page++
			if (maxPage.value < params.value.page) {
				loadStatus.value = 'nomore'
			}
		})
	}

	// 清空选项
	const clearData = () => {
		params.value = {
			keyword: params.value.keyword,
			page: 1,
			size: 5,
			category: ''
		}
		menuCategoryMap(currentMenu.value)
		maxPage.value = 1
		mallList.value = []
		mallListRef.value.clear()
		loadStatus.value = 'loadmore'
	}

	// 重新加载
	const reloadMallData = () => {
		clearData()
		loadMallData()
	}

	// 菜单映射
	const menuCategoryMap = (val) => {
		switch (val) {
			case 0:
				params.value.category = ''
				break
			case 1:
				params.value.category = '服装配饰'
				break
			case 2:
				params.value.category = '日用百货'
				break
			case 3:
				params.value.category = '数码产品'
				break
			case 4:
				params.value.category = '美妆饰品'
				break
			case 5:
				params.value.category = '食品饮料'
				break
		}
	}

	// 菜单
	const menuList = ["全部商品", "精美服饰", "日用百货", "电子数码", "美妆饰品", "食物饮品"]
	const currentMenu = ref(0)
	const handleMenuChange = (val : number) => {
		currentMenu.value = val
		menuCategoryMap(val)
		reloadMallData()
	}

	// 上拉刷新
	onReachBottom(() => {
		loadMallData()
	})

	onMounted(() => {
		loadMallData()
	})
</script>

<style scoped lang="scss">
	.mall-container {
		width: 100%;
		background: linear-gradient(180deg, #FFAE00 0%, #FFF0D0 40.87%, #FFFFFF 58.17%);
		height: 100vh;

		.search {
			padding: 32rpx;
		}

		// 菜单
		.menu-list {
			display: flex;
			margin: 0 30rpx;
			overflow: hidden;
			overflow-x: scroll;

			.menu-item {
				white-space: nowrap;
				margin-right: 30rpx;
				// border: 1px solid #FFAE00;

				.img-box {
					width: 100%;
					display: flex;
					justify-content: center;

					.img {
						width: 66rpx;
						height: 66rpx;
					}
				}

				.menu-text {
					font-family: Work Sans;
					font-weight: 700;
					font-style: Bold;
					font-size: 26rpx;
					leading-trim: NONE;
					line-height: 100%;
					letter-spacing: -2%;
					text-align: center;
					color: #F7F7EF;

					margin-top: 10rpx;
				}

				.menu-text-actice {
					margin-top: 5rpx;
					padding: 4rpx 10rpx 0;
					color: #FA941F;
					background-color: #fee9bb;
					border-radius: 20rpx;
				}

				.text-actice {
					padding: 2rpx 0rpx;
					border-bottom: 4rpx solid #FA941F;
				}

			}
		}

		// 商城列表
		.mall-list {
			margin-top: 20rpx;
			padding: 0 32rpx 20rpx;

			.mall-item {
				border-radius: 16rpx;
				background-color: #ffffff;
				position: relative;
				margin-top: 20rpx;
				box-shadow: 0px 4px 4px 0px #00000040;
				padding-bottom: 10rpx;

				.mall-title {
					font-size: 30rpx;
					margin-top: 10rpx;
					color: $u-main-color;
				}

				.mall-price {
					font-size: 30rpx;
					color: $u-type-error;
					margin-top: 10rpx;

					.icon {
						height: 30rpx;
						width: 30rpx;
					}
				}



				.mall-tag {
					display: flex;
					margin-top: 5px;

					.mall-tag-owner {
						background-color: $u-type-error;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						padding: 4rpx 14rpx;
						border-radius: 50rpx;
						font-size: 20rpx;
						line-height: 1;
					}

					.mall-tag-text {
						margin-right: 10px;
						border: 1px solid $u-type-primary;
						color: $u-type-primary;
						border-radius: 50rpx;
						line-height: 1;
						padding: 4rpx 14rpx;
						display: flex;
						align-items: center;
						border-radius: 50rpx;
						font-size: 20rpx;
					}
				}



				.mall-shop {
					font-size: 22rpx;
					color: $u-tips-color;
					margin-top: 5px;
				}

			}
		}
	}
</style>