<script setup>
	/**
	 * 商城首页
	 */
	import {
		ref,
		reactive,
		getCurrentInstance,
		defineExpose,
	} from 'vue'
	// 工具库
	import util from '@/common/js/util.js'
	// 
	import api from '@/api/index.js'
	// 商品列表
	import productList from '@/components/shop/productList/productList'

	const {
		proxy
	} = getCurrentInstance()
	// 分类
	const cateList = reactive([{
		id: '',
		name: '推荐',
	}])
	// 分类下标
	const cateIndex = ref(0)
	// 礼物下标
	const giftCateList = reactive([])
	// 搜索的关键字
	const keyword = ref('')

	// 初始化
	function init() {
		// 获取普通商品分类
		getCategory()
		// 获取礼包分类
		getGiftCate()
		// 获取商品
		proxy.$refs.product.getList()
	}
	// 获取商品分类
	function getCategory() {
		api.shop.getCategory({
			query: {
				// categoryCode: null,
			},
		}).then(rs => {
			if (rs.code === 200) {
				cateList.length = 1
				cateList.push(...rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 获取礼包分类
	function getGiftCate() {
		api.shop.getCategory({
			query: {
				categoryCode: 'GIFT_PACK',
			},
		}).then(rs => {
			if (rs.code === 200) {
				giftCateList.length = 0
				giftCateList.push(...rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 切换分类下标
	 * @param {Object} index
	 */
	function handleCateIndex(index) {
		if (cateIndex.value === index) return
		cateIndex.value = index
		// 分类
		proxy.$refs.product.listPrototype.categoryId = cateList[index].id
		// 重载列表
		proxy.$refs.product.refreshList()
	}

	// 搜索
	function handleSearch() {
		// 分类
		proxy.$refs.product.listPrototype.searchValue = keyword.value
		// 重载列表
		proxy.$refs.product.refreshList()
	}

	/**
	 * 更新
	 * @param {Object} item
	 */
	function handleGiftCate(item) {
		uni.navigateTo({
			url: '/pages/shop/gift'
		})
	}

	defineExpose({
		init,
	})
</script>

<template>
	<!-- 轮播图 -->
	<!-- <swiper class="banner oh" autoplay="true">
			<swiper-item v-for="(item, index) in 3" :key="index">
				<view class="item">
					<image class="poster"
						src="https://img12.360buyimg.com/babel/jfs/t20271206/247554/11/28097/64155/675290e6F829316f2/0722626e5b28b005.jpg.avif"
						mode="aspectFill" />
				</view>
			</swiper-item>
		</swiper> -->

	<view class="gift mt30 bfff">
		<view class="item fdc fmid" :class="{'big': item.categoryCode == 'GIFT_PACK'}"
			v-for="(item,index) in giftCateList" :key="index" @click="handleGiftCate(item)">
			<view class="icon">
				<image class="image" :src="item.image" mode="widthFix" />
			</view>
			<view class="mt10 c333 f28">{{item.name}}</view>
		</view>
	</view>

	<view class="oh bfff">
		<!-- 功能区 -->
		<view class="fn rows mtb30 mlr30">
			<!-- <uni-icons type="scan" class="mr20" size="48rpx" color="#FF7F37" /> -->
			<view class="searchBox rows f1 ptb10 plr20 bar">
				<input type="text" v-model="keyword" class="f1" placeholder="请输入关键字" @blur="handleSearch" />
				<uni-icons type="search" size="30rpx" color="#999" />
			</view>
		</view>

		<!-- 滚动条 -->
		<view class="cate">
			<scroll-view scroll-x="true" class="scroll f30">
				<view class="item" v-for="(item,index) in cateList" :key="index"
					:class="{'active': index === cateIndex}" @click="handleCateIndex(index)">
					<view class="name ptb20 plr40">{{item.name}}</view>
					<view class="line"></view>
				</view>
			</scroll-view>
		</view>
	</view>

	<!-- 商品卡片组 加载更多 -->
	<view class="product oh ptb30 plr30">
		<productList ref="product" />
	</view>
</template>

<style lang="scss">
	// 轮播图
	.banner {
		height: 180rpx;

		.item {
			height: 100%;
		}

		.poster {
			width: 100%;
			height: 100%;
		}
	}

	// 礼包专区
	.gift {
		display: flex;

		.image {
			width: 100%;
			height: 100%;
		}

		.item.big {
			width: 400rpx;

			.icon {
				width: 240rpx;
			}
		}

		.item {
			flex: 1;
		}

		.icon {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			width: 100%;
			height: 200rpx;
		}
	}

	// 功能区
	.fn {
		.searchBox {
			background-color: #f3f3f3;
		}
	}

	// 分类
	.cate {
		.scroll {
			white-space: nowrap;

			.item {
				display: inline-block;
				color: #999;
				transition: .3s;

				.line {
					width: 0;
					margin: 0 auto;
					border-bottom: 3rpx solid #FF7F37;
					opacity: 0;
					transition: .3s;
				}

				&.active {
					color: #FF7F37;
					font-weight: bold;

					.line {
						width: 100%;
						opacity: 1;
					}
				}
			}
		}
	}
</style>