<template>
  <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
  <view class="mian">
	<!-- 头部区域 -->
	<view class="head" :style="{'padding-top':headerHeight+4+'px'}">
		<view class="head_search" :style="{'width':searchWidth+'px','height':statusHeight+4+'px'}" @click="onSearch">
			<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
			<input class="head_search_input" disabled="true" type="text" placeholder="请输入搜索内容" />
		</view>
		<view class="head_class" v-if="navList.length">
			<scroll-view 
			:enhanced="true"
			:show-scrollbar="false" 
			scroll-x="true" 
			:scroll-with-animation="true"
			:scroll-left="scrollLefter"
			class="head_class_scroll">
				<view
				v-for="(item,index) in navList"
				:key="index"
				class="head_class_item"
				:class="currentTab == index ? 'head_class_item_active' : '' "
				@click="swichNav(item,index)"
				 >
					<view class="head_class_title">{{ item.name }}</view>
					<view class="head_class_active" :class="currentTab == index ? 'head_class_active_img':''"></view>
				</view>
			</scroll-view>
			<view class="head_class_btn" @click="openCategory()">
				<view class="head_class_arrow_box">
					<image class="head_class_arrow_box_img" src="../../static/down_arrow.png"></image>
				</view>
			</view>
		</view>
	</view>
	
	<!-- 商品区域 -->
	<view class="cont_view">
		<view class="head_fixed" :style="{'height':statusHeight+headerHeight+48+'px'}">
			{{productList.length?'下拉刷新...':''}}
		</view>
		<view class="shop_view">
			<view class="shop_view_ul">
				<block v-for="(item,index) in productList" :key="item.id">
					<block v-if="item.isEven">
						<view class="shop_view_li shop_view_bcg" v-if="item.type == 1">
							<swiper class="shop_view_li_swiper" indicator-dots interval="3000" autoplay indicator-active-color="#FFFFFF" indicator-color="rgba(246, 246, 246, .6)" circular >
								<swiper-item class="shop_view_li_swiper_item" v-for="(swiperitem,swiperkey) in item.homeVos[0].items" :key="swiperkey" >
									<image class="shop_view_li_swiper_img_url" :src="swiperitem.imgUrl" mode="widthFix" @load="imageLoad" lazy-load  @click="JumpType(swiperitem)"></image>
								</swiper-item>
							</swiper>
						</view>
						<view class="shop_view_li" v-if="item.type == 0" @click="JumpType(item.id,1)">
							<view class="shop_view_img">
								<!-- <view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view> -->
								<view class="shop_view_img_u">
									<image class="shop_view_img_url" :src="item.image"  mode="widthFix" lazy-load="true"></image>
								</view>
							</view>
							<view class="shop_view_cont">
								<view class="shop_view_cont_title"><text>{{item.storeName}}</text></view>
								<view class="shop_view_cont_desc"><text>{{item.storeInfo}}</text></view>
								<view class="shop_view_cont_tag">
									<view class="shop_view_cont_tag_text" v-if="item.stock <= 10">仅剩{{item.stock}}份</view>
									<view class="shop_view_cont_tag_text" v-for="(t,g) in item.tagList" :key="g">{{t}}</view>
								</view>
								<view class="shop_view_cont_bottom">
									<view class="shop_view_cont_price price">{{item.price}}<text class="market_name prices">{{item.otPrice}}</text></view>
									<view class="shop_view_cont_cart" @click.stop="addCart(item,1)">
										<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</block>
				</block>
			</view>
			<view class="shop_view_ul">
				<block v-for="(item,index) in productList" :key="item.id">
					<block v-if="!item.isEven">
						<view class="shop_view_li shop_view_bcg" v-if="item.type == 1">
							<swiper class="shop_view_li_swiper" indicator-dots interval="3000" autoplay indicator-active-color="#FFFFFF" indicator-color="rgba(246, 246, 246, .6)" circular >
								<swiper-item class="shop_view_li_swiper_item" v-for="(swiperitem,swiperkey) in item.homeVos[0].items" :key="swiperkey" >
									<image class="shop_view_li_swiper_img_url" :src="swiperitem.imgUrl" mode="widthFix" lazy-load @load="imageLoad"  @click="JumpType(swiperitem)"></image>
								</swiper-item>
							</swiper>
						</view>
						<view class="shop_view_li" v-if="item.type == 0" @click="JumpType(item.id,1)">
							<view class="shop_view_img">
								<!-- <view class="shop_view_tag"><text class="shop_view_tag_text">够辣</text></view> -->
								<view class="shop_view_img_u">
									<image class="shop_view_img_url" :src="item.image" mode="widthFix" lazy-load="true"></image>
								</view>
							</view>
							<view class="shop_view_cont">
								<view class="shop_view_cont_title"><text>{{item.storeName}}</text></view>
								<view class="shop_view_cont_desc"><text>{{item.storeInfo}}</text></view>
								<view class="shop_view_cont_tag">
									<view class="shop_view_cont_tag_text" v-if="item.stock <= 10">仅剩{{item.stock}}份</view>
									<view class="shop_view_cont_tag_text" v-for="(t,g) in item.tagList" :key="g">{{t}}</view>
								</view>
								<view class="shop_view_cont_bottom">
									<view class="shop_view_cont_price price">{{item.price}}<text class="market_name prices">{{item.otPrice}}</text></view>
									<view class="shop_view_cont_cart" @click.stop="addCart(item,1)">
										<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>	
					</block>
				</block>		
			</view>
		</view>
		<view class="load_desc">{{decs}}</view>
	</view>
	<view style="height: 200rpx;"></view>
	<view class="nav_popup" v-if="show">
		<view :style="{'height':headerHeight+42+'px'}"></view>
		<view class="nav_head">
			<view class="nav_head_class">
				<view class="nav_head_name">全部分类</view>
				<view class="nav_head_class_arrow_box" @click="openCategory()">
					<image class="nav_head_class_arrow_box_img" src="../../static/up_arrow.png"></image>
				</view>
			</view>
			<view class="nav_popup_list">
				<view v-for="(item,index) in navList" :key="index" :class="currentTab == index ? 'nav_popup_selected' : '' " @click="swichNav(item,index)" class="nav_popup_item">{{ item.name }}</view>
			</view>
		</view>
	</view>
	<view class="bcg_popup" v-if="show" @click="openCategory()"></view>
	<multi
	ref="shopData"
	@add-success="handleAddSuccess"
	@add-error="handleAddError"
	></multi>
  </view>
</template>

<script setup>
import { loads } from '@/utils/index.js'
import multi from '@/components/multi/multi.vue'
import { computed,ref } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
import { frontcategory,frontproducts,skudetail,cartsave } from '@/server/api';
const counterStore = useCounterStore(); // 使用 Store
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,ButtonWidth } = storeToRefs(counterStore);
const pageWidth = ref(0);
const navList = ref([]);
const currentItem = ref({});
const currentTab = ref(0);
const productList = ref([]);
const pages = ref(0);
const decs = ref("");
const load = ref(true);
const scrollLefter = ref(0);
const windowWidth = ref(0);
const navPopup = ref(null);
const navShow = ref(false);
const show = ref(false);
const shopData = ref({});
const openCategory = ()=>{
	show.value = !show.value
}

const swichNav = (item,index) => {
	const cur = index;
	const scrollLefters = pageWidth.value / 5;
	currentItem.value = item;
	if (currentTab.value == cur) return false
	currentTab.value = cur;
	scrollLefter.value = (cur - 1) * scrollLefters;
	if(show.value){
		show.value = false;
	}
	api_frontproducts(true);
}
const api_frontcategory = () => {
	return frontcategory().then(({data})=>{
		navList.value = data;
		currentItem.value = data[0];
		if(data.length){
			api_frontproducts(false,1)
		}
	})
}
const api_frontproducts = (e,i) => {
	if(e){
		productList.value = [];
		decs.value = '';
		pages.value = 0;
	}
	decs.value = "—— 加载中... ——";
	pages.value = pages.value + 1;
	load.value = false;
	const params = {
		cid:currentItem.value.id,
		page:pages.value,
		limit:10
	}
	if(i == 1){loads('', true)}
	return frontproducts(params).then(({data})=>{
		if(i == 1){uni.hideLoading()}
		decs.value = '—— 上拉加载更多 ——'
		data.list.forEach((item,index)=>{
			item.isEven = index % 2 === 0
		})
		productList.value = productList.value.concat(data.list);
		if(productList.value.length < 10){
			decs.value = '—— 嗷呜，已经到底啦 ——';
		}
	})
	.catch(({message}) => {
		if(i == 1){uni.hideLoading()}
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
}
	//跳转统一处理
	const JumpType=(item,type)=>{
		if(type == 1){
			uni.navigateTo({
				url:`/shopProDetail/detail/detail?id=${item}`//商品详情
			})
		}else{
			const { jumpUrl,jumpIds,jumpType } = item;
			if(jumpType == 0 || jumpType == 2 || jumpType == 4) return false;
			let url = "";
			if(jumpType == 1){
				uni.navigateTo({
					url:`/shopProDetail/detail/detail?id=${jumpIds}`//商品详情
				})
			}else if(jumpType == 3){
				uni.switchTab({
					url:`/pages/classify/classify`//商品列表
				})
			}
		}	
	}
//加购物车
const addCart=(i,type)=>{
	shopData.value.addCart(i,type);
}
// 加入购物车成功回调
const handleAddSuccess = (data) => {
	console.log('加入购物车成功回调:', data)
	//可以在这里更新购物车徽章数量等
}
// 加入购物车失败回调
const handleAddError = (error) => {
	console.error('加入购物车失败回调:', error)
}
// 获取页面宽度
const updatePageWidth = () => {
  const systemInfo = uni.getSystemInfoSync();
  pageWidth.value = systemInfo.windowWidth;
};

const searchWidth = computed(() => {
	return pageWidth.value - ButtonWidth.value - 25;
});

const onSearch=()=>{
	uni.navigateTo({
		url:`/userserve/SearchProduct/SearchProduct`
	})
}
//使用 uni.onLoad 监听页面加载
onLoad((options) => {
	updatePageWidth();
	api_frontcategory();
});
onShow(() => {
  
});
onPullDownRefresh(()=>{
	api_frontproducts(true);
	uni.stopPullDownRefresh();
});
onReachBottom(()=>{
	api_frontproducts(false);
});
</script>

<style lang="scss">
	@import './style.scss';
</style>