<template>
	<view class="message-container">
		<scroll-view scroll-y="true" :style="'height:'+height+'px'" @scrolltolower="loadMallData"
			:refresher-threshold="50" :refresher-triggered="isRefresher" refresher-background="transparent"
			refresher-enabled="true" @refresherrefresh="reflash">
			<view class="header-search">
				<u-search :action-style="searchBtn" shape="square" bg-color="#CADBFF" placeholder="输入商品名称或商品种类"
					v-model="keyword" @search="handleSearch" @custom="handleSearch"></u-search>
			</view>

			<view class="menu-list">
				<view class="menu-item" @click="handleCategory">
					<u-image src="/static/shop/01.png" :width="iconWidth" mode="widthFix"></u-image>
					<view class="menu-text">
						商品分类
					</view>
				</view>
				<view class="menu-item">
					<u-image src="/static/shop/02.png" :width="iconWidth" mode="widthFix"></u-image>
					<view class="menu-text">
						观看直播
					</view>
				</view>
				<view class="menu-item">
					<u-image src="/static/shop/03.png" :width="iconWidth" mode="widthFix"></u-image>
					<view class="menu-text">
						违规通告
					</view>
				</view>
				<view class="menu-item">
					<u-image src="/static/shop/04.png" :width="iconWidth" mode="widthFix"></u-image>
					<view class="menu-text">
						百亿补贴
					</view>
				</view>
				<view class="menu-item">
					<u-image src="/static/shop/05.png" :width="iconWidth" mode="widthFix"></u-image>
					<view class="menu-text">
						限时秒杀
					</view>
				</view>
				<view class="menu-item">
					<u-image src="/static/shop/06.png" :width="iconWidth" mode="widthFix"></u-image>
					<view class="menu-text">
						会员专区
					</view>
				</view>
				<view class="menu-item">
					<u-image src="/static/shop/07.png" :width="iconWidth" mode="widthFix"></u-image>
					<view class="menu-text">
						商品收藏
					</view>
				</view>
				<view class="menu-item">
					<u-image src="/static/shop/08.png" :width="iconWidth" mode="widthFix"></u-image>
					<view class="menu-text">
						充值缴费
					</view>
				</view>
				<view class="menu-item">
					<u-image src="/static/shop/09.png" :width="iconWidth" mode="widthFix"></u-image>
					<view class="menu-text">
						资质认证
					</view>
				</view>
				<view class="menu-item">
					<u-image src="/static/shop/10.png" :width="iconWidth" mode="widthFix"></u-image>
					<view class="menu-text">
						联系客服
					</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"
							@click="handleCheck(item)">
							<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image)"
								:index="index"></u-lazy-load>
							<view class="mall-title u-m-l-5 u-m-r-5">
								{{item.name}}
							</view>
							<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)">
								<image src="/static/icon/jifen.png" class="icon" mode=""></image>
								{{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"
							@click="handleCheck(item)">
							<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image)"
								:index="index"></u-lazy-load>
							<view class="mall-title u-m-l-5 u-m-r-5">
								{{item.name}}
							</view>
							<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)">
								<image src="/static/icon/jifen.png" class="icon" mode=""></image>
								{{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>
			</view>
			<u-loadmore margin-top="20" :status="loadStatus" color="#fff"></u-loadmore>
			<view class="box-div"></view>
		</scroll-view>
	</view>
	<Tabbar id="tabbarId"></Tabbar>
	<u-toast ref="msgToast" duration="6000" />
</template>
<script setup lang="ts">
	import {
		ref, onMounted, getCurrentInstance
	} from 'vue';
	import { mallAPI } from '../../api/mall';
	import { getImageUrl } from '../../util/common';
	
	const msgToast = ref()
	
	const instance = getCurrentInstance();

	const height = ref(0)
	const loadHeight = () => {
		uni.getSystemInfo({
			success(res) {
				let screenHeight = res.screenHeight
				uni.createSelectorQuery().in(instance.proxy).select("#tabbarId").boundingClientRect((data : any) => {
					height.value = screenHeight - data.height
				}).exec()
			}
		})
	}

	const keyword = ref('')
	const searchBtn = {
		background: 'linear-gradient(100.84deg, #7B99FF 0%, #002CC2 99.52%)',
		width: '128rpx',
		borderRadius: '198rpx',
		color: '#fff',
		fontSize: '28rpx',
		boxShadow: '0px 4px 4px 0px #FFFFFF40 inset',
	}
	const iconWidth = "65%"
	
	const handleSearch = () => {
		if (!keyword.value) {
			msgToast.value.show({
				title: '请输入搜索词',
				type: 'warning'
			})
			return
		}
		uni.navigateTo({
			url: '/pages/home/mallSearch?search=' + keyword.value
		})
		keyword.value = ''
	}

	const handleCategory = () => {
		uni.navigateTo({
			url: '/pages/home/mallCategory'
		})
	}

	const params = ref({
		keyword: '',
		page: 1,
		limit: 10,
		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'
			}
		}).finally(() => {
			isRefresher.value = false
		})
	}
	const isRefresher = ref(false)
	const reflash = () => {
		isRefresher.value = true
		params.value.page = 1
		params.value.category = ''
		params.value.keyword = ''
		loadStatus.value = 'loadmore'
		loadMallData()
	}

	const handleCheck = (item : any) => {
		uni.navigateTo({
			url: '/pages/home/mallDetail?id=' + item.id
		})
	}

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

<style lang="scss" scoped>
	.message-container {
		width: 100%;
		height: 100vh;
		padding: 60rpx 20rpx;
		background: #79AFFF;

		.header-search {
			.search-btn {
				;
				box-shadow: 0px -4px 4px 0px #00000040 inset;

			}
		}

		.menu-list {
			background: #FFFFFF80;
			margin-top: 32rpx;
			padding: 20rpx 0 0 0;
			border-radius: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 20%;
				margin-bottom: 20rpx;

				.menu-text {
					font-family: Work Sans;
					font-weight: 400;
					font-style: Regular;
					font-size: 24rpx;
					leading-trim: NONE;
					line-height: 100%;
					letter-spacing: -2%;
					color: #2B2B2B;
					margin-top: 10rpx;
				}
			}
		}


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

			.mall-item {
				border-radius: 16rpx;
				background: #F0F5FF;
				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;
				}

			}
		}


		.box-div {
			padding: 60rpx 0rpx;
		}
	}
</style>