<template>
  <view class="main">
	<view class="head" :style="{'padding-top':headerHeight+4+'px'}">
		<view class="head_top">
			<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>
			<view class="head_search" :style="{'width':searchWidth+'px','height':statusHeight+5+'px'}">
				<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
				<input class="head_search_input"  type="text" v-model="searchtext" disabled="true" @click="handleBack()"/>
			</view>
		</view>
	</view>
	<view class="cont" :style="{'padding-top':statusHeight+headerHeight+19+'px'}">
		<!-- 商品区域 -->
		<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>
</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();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
// 定义响应式数据，存储页面宽度
const pageWidth = ref(0);
const searchtext = ref('');
const searchList= ref([]);
// 获取页面宽度
const updatePageWidth = () => {
  const systemInfo = uni.getSystemInfoSync();
  pageWidth.value = systemInfo.windowWidth;
};

const searchWidth = computed(() => {
	return pageWidth.value - statusHeight.value - ButtonWidth.value - 35;
});
// 判断是否有上一页
const getPages = () => {
  const pages = getCurrentPages();
  return pages.length > 1;
};
const handleBack = () => {
  if (getPages()) {
    // 如果有上一页，返回上一页
    uni.navigateBack();
  } else {
    // 如果没有上一页，返回首页
    uni.switchTab({
      url: '/pages/index/index',
    });
  }
};


onLoad((options) => {
	const { text } = options;
	
	if(searchtext){
		searchtext.value = text;
	}
	updatePageWidth();
});
onShow(() => {});
onReady(()=>{})
onPullDownRefresh(()=>{})
onReachBottom(()=>{})
</script>

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