<template>
  <view class="main">
	  <!-- 头部区域 -->
		<view class="head" :style="{'padding-top':headerHeight+'px'}" >
			<view class="head_location" :class="storeName?'head_location_active':''" @click="location()"><text class="location_title">{{storeName||'正在获取定位'}}</text></view>
			<view class="head_search" :style="{'height':statusHeight+8+'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 class="head_search_btn">搜索</view>
			</view>
		</view>
		<!-- 推荐区域 -->
		<view class="grid_top">
			<view class="head_fixed" :style="{'height':statusHeight+headerHeight+47+'px'}">下拉刷新...</view>
			<view class="grid_wrap">
				<view class="grid_wrap_l">
					<image class="grid_wrap_live" src=""></image>
					<view class="grid_wrap_live_title"><image class="grid_wrap_live_img" src="../../static/index/v.png"></image>直播</view>
				</view>
				<view class="grid_wrap_r">
					<view class="grid_wrap_li" @click="goAi()">
						<view class="grid_wrap_li_l">
							<view class="grid_wrap_li_title"><text>学做菜</text></view>
							<view class="grid_wrap_li_desc">简单又快捷</view>
						</view>
						<image class="grid_wrap_li_r" src="../../static/index/AI.png" mode="widthFix"></image>
					</view>
					<view class="grid_wrap_li grid_wrap_top" @click="goAssList()">
						<view class="grid_wrap_li_l">
							<view class="grid_wrap_li_title"><text>极速退款</text></view>
							<view class="grid_wrap_li_desc">食材有问题？</view>
						</view>
						<image class="grid_wrap_li_r" src="../../static/index/refund_img.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 滚动区域 -->
		<view class="scroll_view">
			<scroll-view class="typescoll" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
				<view class="scroll_view_li" v-for="(item,index) in homeList" :key="index">
					<view class="scroll_view_banner" @click="JumpType(item)">
						<image class="scroll_view_bannerimg" :src="item.imgUrl" mode="widthFix" lazy-load="true"></image>
					</view>
					<view class="scroll_view_shop" v-for="(i,dex) in item.items" :key="dex" @click="JumpType(i)">
						<view class="scroll_view_shop_l">
							<image class="scroll_view_shop_no" :src="`../../static/index/no${dex+1}.png`"></image>
							<image class="scroll_view_shop_img" :src="i.imgUrl" mode="widthFix" lazy-load="true"></image>
						</view>
						<view class="scroll_view_shop_r">
							<view class="scroll_view_shop_title">{{i.name}}<text class="scroll_view_shop_desc">{{i.title}}</text></view>
							<view class="scroll_view_shop_tag" v-if="i.productInfo.tagList.length">
								<view class="scroll_view_shop_li" v-for="(t,g) in i.productInfo.tagList" :key="g">{{t}}</view>
							</view>
							<view class="scroll_view_shop_bottom">
								<view class="scroll_view_shop_price price">{{i.productInfo.price}}<text class="market_name prices">{{i.productInfo.otPrice}}</text></view>
								<view class="scroll_view_shop_cart" @click.stop="addCart(i)">
									<image class="scroll_view_shop_cart_img" src="../../static/oncatr01.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 商品区域 -->
		<recomGoods v-if="token" :apiType="1"></recomGoods>
		
		<view style="height: 200rpx;"></view>
		<view class="footer">
			<view class="footer_cont">
				<view class="footer_cont_l" @click="goCarts()">
					<view class="footer_cont_cart">
						<view class="footer_cont_num">3</view>
						<image class="footer_cont_img" src="../../static/index/cart_img.png" mode="widthFix"></image>
					</view>
					<view class="footer_cont_m">
						<view class="footer_cont_m_price">43.9</view>
						<view class="footer_cont_m_desc">已优惠20元</view>
					</view>
				</view>
				<view class="footer_cont_btn" @click="orderConfirm">去下单</view>
			</view>
		</view>
  </view>
</template>

<script setup>
import { frontindex,frontproduct,frontstorelist } from '@/server/api';
import recomGoods from '@/components/recomGoods/recomGoods.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"
const counterStore = useCounterStore(); // 使用 Store
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,nikeName,key,token,phone,uid,storeName } = storeToRefs(counterStore);
const homeList = ref([]);
const shopList = ref([]);
const total = ref(0);
const pages = ref(0);
const limits = ref(10);
const decs = ref('')
const latitude = ref('');
const longitude = ref('')

//获取经纬度
const getLocation = () => {
	//授权成功，获取位置
	uni.getLocation({
		type: 'gcj02',
		success(res){
			latitude.value = res.latitude;
			longitude.value = res.latitude;
		},
		fail(err){
			console.error('获取位置失败:', err);
		},
		complete(){
			api_frontstorelist();
		}
	});
};
//门店
const api_frontstorelist=()=>{
	if(latitude.value && longitude.value){
		const params = {
			latitude:latitude.value,
			longitude:longitude.value,
			page:1,
			limit:1
		}
		return frontstorelist(params).then(({data}) => {
			if(!storeName.value){storeName.value = data.list[0].name;}
		})
		.then(()=>api_index())
		.catch(({message}) => {
			uni.showModal({
				content:message,
				showCancel: false
			})
		})
	}else{
		api_index();
	}
}
//首页楼层接口
const api_index=()=>{
	return frontindex().then(({data}) => {
		homeList.value = data.homeList;
	})
	.catch(({message}) => {
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
}
//跳转统一处理
const JumpType=(item)=>{
	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)=>{
	const { jumpIds,productInfo,specType } = i;
	let specTypes = false;
	if(type){
		specTypes = specType;
	}else{
		specTypes = productInfo.specType;
	}
	if(specTypes){
		console.log('多规格弹窗选类加购');
	}else{
		console.log('单规格直接加购')
	}
}
const orderConfirm=()=>{
	uni.navigateTo({
		url:`/order/orderConfirm/orderConfirm`
	})
}
const goAi=()=>{
	uni.navigateTo({
		url:`/userserve/aiserve/aiserve`
	})
};
const goAssList=()=>{
	uni.navigateTo({
		url:`/order/assList/assList`
	})
}
const goCarts=()=>{
	uni.switchTab({
		url:`/pages/cart/cart`
	})
}
const location=()=>{
	uni.navigateTo({
		url:`/userserve/location/location`
	})
}
const onSearch=()=>{
	uni.navigateTo({
		url:`/userserve/SearchProduct/SearchProduct`
	})
}
onLoad((options) => {
	// wxlogin()
	getLocation()
});
onShow(() => {});
onPullDownRefresh(()=>{
	api_index();
	uni.stopPullDownRefresh();
});
onReachBottom(()=>{});
</script>

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