<template>
  <view class="mian">
		<view class="head" :class="headShow?'head_show':''" :style="{'opacity':headShow?opacity:'1','padding-top':statusBartop+'px'}">
			<view class="head_back"  @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
				<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
			</view>
			<block v-if="headShow">
				<view  class="head_nav" :style="{'height':statusHeight+'px'}">
					<view class="head_item" v-for="(item,index) in navList" :key="index"  :class="currentTab === index ? 'head_item_active':''" @click="switchTab(index)">
						<view class="head_item_name">{{item}}</view>
						<view class="head_item_img"></view>
					</view>
				</view>
				<view class="head_search" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
					<image :style="{'width': statusHeight-15+'px','height':statusHeight-15+'px'}" src="../../static/search_img.png" mode="widthFix"></image>
				</view>
			</block>
		</view>
		
		<!-- 轮播图区域 -->
		<view class="item">
			<view class="shop_swiper" :style="{'height':swiperHeight+'rpx'}" >
				<swiper class="shop_swiper_wrap" interval="3000" :current="currentIndex" circular @change="onSwiperChange" :style="{'height':swiperHeight+'rpx'}">
					<swiper-item class="shop_swiper_marquees" v-if="imglist.length"  v-for="(item,index) in imglist" :key="index">
						<view class="shop_swiper_img">
							<image class="shop_swiper_imgUrl" :src="item" @load="onImageLoad" @click="previewImage(index)"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="currentNumber">
					<view class="item_currentNumber item_currentNumber_width"   v-if="imglist.length"><text>{{currentIndex+1}}/{{imglist.length}}</text></view>
				</view>
			</view>
			<!-- 价格标题区域 -->
			<view class="shop_head">
				<view class="shop_price price">49.9<text class="market_name prices">79.9</text></view>
				<view class="shop_title">新鲜黄牛牛肉200g+9g/份</view>
				<view class="shop_desc">外红里黑属于牛肉内部缺氧导致，切开氧化静置会逐步 氧化发红，不影响食用</view>
			</view>
		</view>
		<!-- 评论区域 -->
		<view class="item">
			<view class="shop_comment">
				<view class="shop_comment_head">
					<view class="shop_comment_head_title">商品评论(1万+)</view>
					<view class="shop_comment_head_arrow">全部</view>
				</view>
				<view class="shop_comment_tag">
					<view class="shop_comment_item">很好吃33</view>
					<view class="shop_comment_item">肉新鲜21</view>
					<view class="shop_comment_item">继续回购9</view>
				</view>
				<view class="shop_comment_cont">
					<view class="shop_comment_cont_ul">
						<view class="shop_comment_cont_l"><image class="shop_comment_cont_userimg" src="" mode="widthFix"></image><view class="shop_comment_cont_username">蓝**v</view><view class="shop_comment_cont_amount">买过3次</view></view>
						<view class="shop_comment_cont_ip">2025-02-25 来自上海</view>
					</view>
					<view class="shop_comment_m">
						<view class="shop_comment_title"><text>速度很快，品质保证，一如既往的支持！就不一一评价了，赞👍👍</text></view>
						<view class="shop_comment_item">
							<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
							<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
							<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
							<image class="shop_comment_itemImg" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 常见问题 -->
			<view class="shop_comment">
				<view class="shop_comment_head">
					<view class="shop_comment_head_title">常见问题(2)</view>
					<view class="shop_comment_head_arrow">全部</view>
				</view>
				<view class="shop_ask shop_padding"><text>有的虾头发黑是为什么?</text></view>
				<view class="shop_ask shop_padding"><text>如何判定虾是否新鲜?</text></view>
				<!-- <view class="shop_answer shop_padding">这里填写回答</view> -->
			</view>
		</view>
		<!-- 图文详情 -->
		<view class="shop_detail item">
			<view class="shop_detail_title">图文详情</view>
			<view class="shop_detail_img">
				<image src="http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20241105-b286a4cf0d1148158e166b858112125a.jpg" mode="widthFix"></image>
			</view>
		</view>
		<view class="item">
		<!-- 推荐区域 -->
		<view class="user_title" >
			<text class="user_name">为您推荐</text>
		</view>
		
		<!-- 商品区域 -->
		<view class="shop_view">
			<view class="shop_view_ul">
				<view class="shop_view_li" @click="goDetail()">
					<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="../../static/Mask.png"></image>
						</view>
					</view>
					<view class="shop_view_cont">
						<view class="shop_view_cont_title">糖醋排骨</view>
						<view class="shop_view_cont_desc">乡下土猪</view>
						<view class="shop_view_cont_tag">
							<view class="shop_view_cont_tag_text">仅剩3份</view>
							<view class="shop_view_cont_tag_text">劲辣胃浓</view>
						</view>
						<view class="shop_view_cont_bottom">
							<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
							<view class="shop_view_cont_cart">
								<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="shop_view_li" @click="goDetail()">
					<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="../../static/Mask.png"></image>
						</view>
					</view>
					<view class="shop_view_cont">
						<view class="shop_view_cont_title">糖醋排骨</view>
						<view class="shop_view_cont_desc">乡下土猪</view>
						<view class="shop_view_cont_tag">
							<view class="shop_view_cont_tag_text">仅剩3份</view>
							<view class="shop_view_cont_tag_text">劲辣胃浓</view>
						</view>
						<view class="shop_view_cont_bottom">
							<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
							<view class="shop_view_cont_cart">
								<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="shop_view_li" @click="goDetail()">
					<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="../../static/Mask.png"></image>
						</view>
					</view>
					<view class="shop_view_cont">
						<view class="shop_view_cont_title">泡椒田鸡</view>
						<view class="shop_view_cont_desc">超大只田鸡</view>
						<view class="shop_view_cont_tag">
							<view class="shop_view_cont_tag_text">仅剩3份</view>
							<view class="shop_view_cont_tag_text">劲辣胃浓</view>
							<view class="shop_view_cont_tag_text">劲辣胃浓</view>
						</view>
						<view class="shop_view_cont_bottom">
							<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
							<view class="shop_view_cont_cart">
								<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="shop_view_ul">
				<view class="shop_view_li" @click="goDetail()">
					<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="../../static/Mask.png"></image>
						</view>
					</view>
					<view class="shop_view_cont">
						<view class="shop_view_cont_title">泡椒田鸡</view>
						<view class="shop_view_cont_desc">超大只田鸡</view>
						<view class="shop_view_cont_tag">
							<view class="shop_view_cont_tag_text">仅剩3份</view>
							<view class="shop_view_cont_tag_text">劲辣胃浓</view>
						</view>
						<view class="shop_view_cont_bottom">
							<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
							<view class="shop_view_cont_cart">
								<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>	
				<view class="shop_view_li" @click="goDetail()">
					<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="../../static/Mask.png"></image>
						</view>
					</view>
					<view class="shop_view_cont">
						<view class="shop_view_cont_title">泡椒田鸡</view>
						<view class="shop_view_cont_desc">超大只田鸡</view>
						<view class="shop_view_cont_tag">
							<view class="shop_view_cont_tag_text">仅剩3份</view>
							<view class="shop_view_cont_tag_text">劲辣胃浓</view>
						</view>
						<view class="shop_view_cont_bottom">
							<view class="shop_view_cont_price price">43.9<text class="market_name prices">59.9</text></view>
							<view class="shop_view_cont_cart">
								<image class="shop_view_cont_cart_img" src="../../static/oncatr02.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>			
			</view>
		</view>
	</view>
	<view style="height: 200rpx;"></view>
	<!-- 底部 -->
	<view class="footer">
		<view class="footer_cont">
			<view class="footer_l">
				<view class="footer_li">
					<view class="footer_icon">
						<image  class="footer_icon_img" src="../../static/shopdetail/collect.png" mode="widthFix"></image>
					</view>
					<view class="footer_name">收藏</view>
				</view>
				<view class="footer_li" @click="goCart()">
					<view class="footer_icon">
						<view class="footer_amount">45</view>
						<image  class="footer_icon_img" src="../../static/shopdetail/cart.png" mode="widthFix"></image>
					</view>
					<view class="footer_name">购物车</view>
				</view>
			</view>
			<view class="footer_r">
				<view class="footer_btn border_l">加入购物车</view>
				<view class="footer_btn footer_btn_bcg border_r" @click="orderConfirm">立即下单</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script setup>
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
const imglist = ref([
	"http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-2cc8b8615d6c4fdeb1ae3b69c384b8f8.jpg",
	"http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-ebe6955a5db9476e9a525042eaba3d0e.jpg",
	"http://zhkjmall.oss-cn-shanghai.aliyuncs.com/mall-20250211-ac78893d51e54074bb7b27227873907a.jpg"
])
const swiperHeight = ref(200);
const imgheights = ref([]);
const currentIndex = ref(0);
const showBack = ref(false);
const headShow = ref(false);
const opacity = ref(1);
const navList = ref(['商品','评论','详情','推荐']);
const currentTab = ref(0); // 当前选中的tab
const scrollTop = ref(0); // 页面滚动的距离
const scrollTimer = ref(null);
const sectionHeights = ref([0]);

//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
//获取图片真实宽度
const onImageLoad = (event) => {
  const { width, height } = event.detail; 
  const imageHeight = 750 / (height / width);
  swiperHeight.value = imageHeight;
};
const onSwiperChange=(event)=>{
  currentIndex.value = event.detail.current;
};
const previewImage=(i)=>{
  uni.previewImage({
      current: i,
      urls:imglist.value
  });
};
// 判断是否有上一页
const getPages = () => {
  const pages = getCurrentPages();
  return pages.length > 1;
};
const goCart=()=>{
	uni.switchTab({
		url:`/pages/cart/cart`
	})
};
const handleBack = () => {
  if (getPages()) {
    // 如果有上一页，返回上一页
    uni.navigateBack();
  } else {
    // 如果没有上一页，返回首页
    uni.switchTab({
      url: '/pages/index/index',
    });
  }
};
 const getSectionHeights = async (e)=>{
	let sections = []
	let sectionHeight = [0]
	let rect = await new Promise(resolve => {
	    const query = uni.createSelectorQuery();
	    query.selectAll('.item').boundingClientRect((res) => {
	        resolve(res)
	    }).exec();
	})
	sections = rect
	for (let i = 0; i < sections.length; i++) {
	    sectionHeight.push(sectionHeight[i] + sections[i].height - statusBartop.value - statusHeight.value)
	}
	sectionHeights.value = sectionHeight;
	if(e == 1){
		let len = sectionHeight.length;
		let currentTabs = 0;
		for (let i = 0; i < len - 1; i++) {
		    if (scrollTop.value >= sectionHeight[i] && scrollTop.value < sectionHeight[i + 1]) {
		        currentTabs = i
		        break
		    }
		}
		currentTab.value = currentTabs;
	}
};
const switchTab = (index) =>{
	if(currentTab.value == index) return false;
	console.log('000');
	currentTab.value = index;
	nextTick(() => {
	    uni.pageScrollTo({
	        scrollTop: sectionHeights.value[currentTab.value],
	        duration: 200,
	    });
	});
};
const orderConfirm = ()=>{
	uni.navigateTo({
		url:`/order/orderConfirm/orderConfirm`
	})
}
onLoad((options) => {
	//初始化时判断是否显示返回按钮
	showBack.value = getPages();
});
onShow(() => {});
onPageScroll((e)=>{
	const top = e.scrollTop;
	// 导航条颜色透明渐变
	if (top <= 50) {
	  headShow.value = false
	} else {
	  if( 50 < top && top <= 200 ){ 
		opacity.value = top / 200
	  }else{
		opacity.value = 1
	  }
	  headShow.value = true
	}
	if (scrollTimer.value) {
	    clearTimeout(scrollTimer.value)
	}
	scrollTimer.value = setTimeout(() => {
	    scrollTop.value = e.scrollTop;
	    getSectionHeights(1);
	}, 300)
}),
onReady(()=>{
	getSectionHeights();
})
onPullDownRefresh(()=>{
	
})
onReachBottom(()=>{
	
})
</script>

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