<template>
	<view class="jy-shop" v-if="1">
		<view class="jy-shop-header">
			<JyCommonHead background="jb">
				<template #center>
					<JySearch class="plr20"></JySearch>
				</template>
				<template #bottom>
					<JyShopNavigation :list="tabs.list" @tabItemClick="itemClick" marright="25px" activeWeight='600' titalName="categoryName" activeColor="#FF9B27" activeBarColor="#FF9B27" />
				</template>
			</JyCommonHead>
		</view>
		<view @click="checkLink('pages/news/ce')">111</view>
		<!-- 商品卡片组 加载更多 -->
		<JyContent class="mt20" ref="jy_content"></JyContent>
	</view>

	<!--  -->
	<view class="mt90 tac" v-else>
		<text>暂未开放</text>
	</view>

	<!-- 底部导航 -->
	<footerMenu ref="footerMneuRef" page="shop" />
</template>
<script setup>
	/**
	 * 商城
	 */
	// 底部菜单
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	// 顶部搜索
	const {
		checkLink
	} = inject('util')

	import JyCommonHead from '@/components/public/jy-common-head'
	// 搜索
	import JySearch from './components/jy-search'
	//顶部条件栏
	import JyShopNavigation from '@/components/public/jy-shop-navigation'
	// 商品列表
	import JyContent from '@/components/public/jy-shop-content'
	import footerMneu from '@/components/footerMenu/footerMenu'
	import {
		onReachBottom,
		onPullDownRefresh,
		onShow,
		onLoad,
	} from '@dcloudio/uni-app';

	import {
		classification
	} from '@/api/shop'
	// 商品列表组件
	const jy_content = ref(null)
	// 滑动导航栏数据
	const tabs = reactive({
		list: [],
		total: 0
	})
	const getNavigationList = async () => {
		try {
			const {
				data,
				total
			} = await classification.list();
			tabs.list = data;
			tabs.total = total;
		} catch (error) {
			console.log(error);
		}
	};

	const itemClick = (item, index) => {
		// jy_content.value.listProperty.params.navigation = item.value
		jy_content.value.getData(true)
	}

	// 初始化
	const init = () => {
		getNavigationList()

	}

	onLoad(() => {
		init();
	})
	onReachBottom(() => {
		jy_content.value.getData(false, 'onReachBottom')
	})
	onPullDownRefresh(() => {
		jy_content.value.getData(true, 'onPullDownRefresh')
	})
	onShow(() => {
		// 触发自定义tabbar函数
		uni.$emit('changeMine', 'shop')
	})
</script>
<style lang="scss" scoped>
	.jy-shop {
		padding-bottom: 100rpx;
	}

	.jy-shop-header {
		opacity: 1;
		background: linear-gradient(50deg, #DBFCE9 -7%, #FFFBF3 50%, #FEEEDB 82%, #FEE3CD 102%);
	}
</style>