<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+4+'px'}">
				<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
				<input class="head_search_input" type="text" placeholder="请输入搜索内容" v-model="searchtext"/>
			</view>
		</view>
		<view class="order_nav">
			<view class="order_nav_item" v-for="(item,index) in navList" :key="index" :class="active == index?'order_nav_active':''" @click="clickOrder(index)">
				<view class="order_nav_name">{{item}}</view>
				<view class="order_nav_m"></view>
			</view>
		</view>
	</view>
	<view class="order_cont" :style="{'padding-top':statusHeight+headerHeight+65+'px'}">
		<view class="order_list" @click="orderDetail()">
			<view class="order_type">已完成</view>
			<view class="order_time">2025/1/15 17:20 周三</view>
			<view class="order_scroll">
				<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
					<view class="order_scroll_li">
						<view class="order_scroll_img">
							<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="order_scroll_li">
						<view class="order_scroll_img">
							<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="order_scroll_li">
						<view class="order_scroll_img">
							<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="order_scroll_li">
						<view class="order_scroll_img">
							<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="order_scroll_li">
						<view class="order_scroll_img">
							<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
			<view class="order_bottom">
				<view class="order_l">更多</view>
				<view class="order_r">
					<view class="order_btn" @click.stop="assDetail()">申请售后</view>
					<view class="order_btn order_bcg">再来一单</view>
				</view>
			</view>
		</view>
		<view class="order_list" @click="orderDetail()">
			<view class="order_type">已完成</view>
			<view class="order_time">2025/1/15 17:20 周三</view>
			<view class="order_scroll">
				<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
					<view class="order_scroll_li">
						<view class="order_scroll_img">
							<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
			<view class="order_bottom">
				<view class="order_l">更多</view>
				<view class="order_r">
					<view class="order_btn" @click.stop="assDetail()">申请售后</view>
					<view class="order_btn order_bcg">再来一单</view>
				</view>
			</view>
		</view>
		<view class="order_list" @click="orderDetail()">
			<view class="order_type">已完成</view>
			<view class="order_time">2025/1/15 17:20 周三</view>
			<view class="order_scroll">
				<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
					<view class="order_scroll_li">
						<view class="order_scroll_img">
							<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
			<view class="order_bottom">
				<view class="order_l">更多</view>
				<view class="order_r">
					<view class="order_btn" @click.stop="assDetail()">申请售后</view>
					<view class="order_btn order_bcg">再来一单</view>
				</view>
			</view>
		</view>
		<view class="order_list" @click="orderDetail()">
			<view class="order_type">已完成</view>
			<view class="order_time">2025/1/15 17:20 周三</view>
			<view class="order_scroll">
				<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
					<view class="order_scroll_li">
						<view class="order_scroll_img">
							<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
			<view class="order_bottom">
				<view class="order_l">更多</view>
				<view class="order_r">
					<view class="order_btn" @click.stop="assDetail()">申请售后</view>
					<view class="order_btn order_bcg">再来一单</view>
				</view>
			</view>
		</view>
		<view class="order_list" @click="orderDetail()">
			<view class="order_type">已完成</view>
			<view class="order_time">2025/1/15 17:20 周三</view>
			<view class="order_scroll">
				<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
					<view class="order_scroll_li">
						<view class="order_scroll_img">
							<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
			<view class="order_bottom">
				<view class="order_l">更多</view>
				<view class="order_r">
					<view class="order_btn" @click.stop="assDetail()">申请售后</view>
					<view class="order_btn order_bcg">再来一单</view>
				</view>
			</view>
		</view>
		<view class="order_list" @click="orderDetail()">
			<view class="order_type">已完成</view>
			<view class="order_time">2025/1/15 17:20 周三</view>
			<view class="order_scroll">
				<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
					<view class="order_scroll_li">
						<view class="order_scroll_img">
							<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
			<view class="order_bottom">
				<view class="order_l">更多</view>
				<view class="order_r">
					<view class="order_btn" @click.stop="assDetail()">申请售后</view>
					<view class="order_btn order_bcg">再来一单</view>
				</view>
			</view>
		</view>
		<view class="order_list" @click="orderDetail()">
			<view class="order_type">已完成</view>
			<view class="order_time">2025/1/15 17:20 周三</view>
			<view class="order_scroll">
				<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
					<view class="order_scroll_li">
						<view class="order_scroll_img">
							<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
			<view class="order_bottom">
				<view class="order_l">更多</view>
				<view class="order_r">
					<view class="order_btn" @click.stop="assDetail()">申请售后</view>
					<view class="order_btn order_bcg">再来一单</view>
				</view>
			</view>
		</view>
		<view class="order_list" @click="orderDetail()">
			<view class="order_type">已完成</view>
			<view class="order_time">2025/1/15 17:20 周三</view>
			<view class="order_scroll">
				<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
					<view class="order_scroll_li">
						<view class="order_scroll_img">
							<image class="order_scroll_img_url" src="../../static/Mask.png" mode="widthFix"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="order_x">共3件、 实付:<text class="order_price">485</text></view>
			<view class="order_bottom">
				<view class="order_l">更多</view>
				<view class="order_r">
					<view class="order_btn" @click.stop="assDetail()">申请售后</view>
					<view class="order_btn order_bcg">再来一单</view>
				</view>
			</view>
		</view>
	</view>
	<view style="height: 100rpx;"></view>
  </view>
</template>

<script setup>
import { ref,computed } 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,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
const navList = ref(['全部','待支付','备货中','待收货','待评价']);
const active = ref(0);
// 定义响应式数据，存储页面宽度
const pageWidth = ref(0);
// 获取页面宽度
const updatePageWidth = () => {
  const systemInfo = uni.getSystemInfoSync();
  pageWidth.value = systemInfo.windowWidth;
};

const searchWidth = computed(() => {
	return pageWidth.value - statusHeight.value - ButtonWidth.value - 35;
});
const assDetail=()=>{
	uni.navigateTo({
		url:`/order/assedit/assedit`
	})
};

// 判断是否有上一页
const getPages = () => {
  const pages = getCurrentPages();
  return pages.length > 1;
};
const handleBack = () => {
  if (getPages()) {
    // 如果有上一页，返回上一页
    uni.navigateBack();
  } else {
    // 如果没有上一页，返回首页
    uni.switchTab({
      url: '/pages/index/index',
    });
  }
};
const clickOrder=(index)=>{
	if(index == 4){
		uni.navigateTo({
			url:`/order/orderevallist/orderevallist?type=0`
		})
		return false
	}
	active.value = index;
}
const orderDetail=()=>{
	uni.navigateTo({
		url:`/order/orderDetail/orderDetail`
	})
};

//使用 uni.onLoad 监听页面加载
onLoad((options) => {
	const { type } = options;
	if(type == 0 || type == 1 || type == 2 || type == 3 || type == 4 ){
		active.value = type;
	}
	updatePageWidth();
});
onShow(() => {
  
});
onPullDownRefresh(()=>{
	uni.stopPullDownRefresh();
})
onReachBottom(()=>{
	
})
</script>

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