<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" :focus="focus" type="text" confirm-type="search" placeholder="请输入搜索内容" v-model="searchtext" @input="onKeyInput" @confirm="confirm"/>
			</view>
		</view>
	</view>
	<view class="cont" :style="{'padding-top':statusHeight+headerHeight+19+'px'}">
		<block v-if="searchList.length">
			<view class="cont_ul">
				<view class="cont_li" v-for="(item,index) in searchList" :key="index" @click="goSearch(item.storeName)">{{item.storeName}}</view>
			</view>
		</block>
		<block v-else>
			<block v-if="searchStorage.length">
				<view class="cont_title">历史搜索</view>
				<view class="cont_keyword">
					<view class="cont_keyword_item" v-for="(item,index) in searchStorage" :key="index" @click="goSearch(item)">{{item}}</view>
				</view>
			</block>
			<block v-if="keyList.length">
				<view class="cont_title">搜索发现</view>
				<view class="cont_keyword">
					<view class="cont_keyword_item" v-for="(item,index) in keyList" :key="index" @click="goSearch(item.title)">{{item.title}}</view>
				</view>
			</block>
		</block>
	</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"
import { searchkeyword,frontproducts } from '@/server/api'
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
// 定义响应式数据，存储页面宽度
const pageWidth = ref(0);
const focus = ref(false);
const searchtext = ref('');
const searchList= ref([]);
const keyList = ref([]);
const searchStorage = 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',
    });
  }
};
const api_searchkeyword = () => {
	return searchkeyword().then(({data})=>{
		keyList.value = data;
	}).catch(({message}) => {
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
}
const onKeyInput=(e)=>{
	if(e.detail.value){
		api_frontproducts()
	}else{
		searchList.value = []
	}
};
const api_frontproducts=()=>{
	const params = {
		page:1,
		limit:10,
		keyword:searchtext.value||""
	}
	return frontproducts(params).then(({data}) => {searchList.value = data.list;})
}
const goSearch=(name)=>{
	uni.navigateTo({
		url:`/userserve/SearchList/SearchList?text=${name}`
	})
}
const confirm=(e)=>{
	let arr = searchStorage.value;
	uni.navigateTo({
		url:`/userserve/SearchList/SearchList?text=${searchtext.value}`,
		success: () => {
			arr.forEach((item,index)=>{
				if(e.detail.value == item){
					arr.splice(index,1)
				}
			})
			if(e.detail.value){
				arr.unshift(e.detail.value)  
				uni.setStorage({
				   key: 'searchStorage',
				   data: arr
				});
			}
		}
		
	})
};
const StorageList=()=>{
	let getlist =  uni.getStorageSync('searchStorage');
	if(getlist.length){
		searchStorage.value = getlist;
	}
}
onLoad((options) => {
	focus.value = true;
	updatePageWidth();
});
onShow(() => {
	StorageList();
	api_searchkeyword();
});
onReady(()=>{})
onPullDownRefresh(()=>{})
onReachBottom(()=>{})
</script>

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