<template>
	<!-- <view class="flex-row relative page">
		<view class="aaa">
			<view class="bbb">
				<view class="ccc" 
					  v-for="(item, index) in sort" 
					  :key="index"
					  :style="getBoxStyle(index)"
					  @click="changeTypes(item , index)"
					  >
					<image class="eee"
						:src="item.imgurl" />
					<text class="ddd">{{ item.name }}</text>
				</view>	
			</view>
		</view>
		<view class="pos_5">
				<view class="flex-row section_9 list-item_2 mt-5" v-for="(item, index) in productList" :key="index" @click="goToProduct(item)">
					<image class="self-center image_4"
						:src="item.goodImg" />
					<view style="width: 220rpx;" class="flex-col items-start self-center group_3">
						<text class="font_2 text_5">{{ item.name }}</text>
						<text class="font_3 mt-13">{{ item.intro }}</text>
						<text class="font mt-13">￥{{ item.price }}</text>
					</view>
					<image class="self-start image_5"
						:src="add_img" />
				</view>
		</view>
	</view> -->
	<template>
		<!-- <view v-for="zhuangtai in Status.orders" :key="zhuangtai.id">
			{{zhuangtai.orderStatus}}
		</view> -->
	  <view class="container">
	    <view class="order-tabs">
	      <view class="tab-item" :class="{active: orderStatus === '全部'}" @click="changeTab('全部')">全部</view>
		  <view class="tab-item" :class="{active: orderStatus === '代支付'}" @click="changeTab('代支付')">代支付</view>
	      <view class="tab-item" :class="{active: orderStatus === '代发货'}" @click="changeTab('代发货')">代发货</view>
	      <view class="tab-item" :class="{active: orderStatus === '已发货'}" @click="changeTab('已发货')">已发货</view>
	      <view class="tab-item" :class="{active: orderStatus === '售后'}" @click="changeTab('售后')">售后</view>
	    </view>
	    <view class="order-list">
	       <view v-for="order in Status.orders" :key="order.id" class="order-item">
	             <view v-for="item in order.orderItemList" :key="item.id">
	               {{ item.goodSnapshot.name }}
	             </view>
				 <view v-for="item in order.orderItemList" :key="item.id">
				   {{ item.goodSnapshot.type }}
				 </view>
				 <view v-for="item in order.orderItemList" :key="item.id">
				   {{ item.goodSnapshot.price }}
				 </view>
	        </view>
	    </view>
	  </view>
	</template>
</template>

<script setup>
import {
	ref,onMounted, toRaw
} from 'vue';
import { baseUrl, testUrl , suiUrl} from '@/api/request';
import img1 from '@/pages/store-home/main/img/cailiaobao.png';
import img2 from '@/pages/store-home/main/img/shouchiwu.png';
import img3 from '@/pages/store-home/main/img/toushi.png';
import img4 from '@/pages/store-home/main/img/dingzhi.png';
import img5 from '@/pages/store-home/main/img/jifenduihuan.png';
import product_img from '@/pages/store-home/main/img/shangpingtupian.png';
import add_img from '@/pages/store-home/main/img/tianjia.png';
import sousuokuang from '@/pages/store-home/main/img/sousuokuang.png';

const currentColor = ref(0);
const sort =ref([{}]) //商品类别对象数组
const headerList = ref([{}]) //类别标题和介绍
const productList = ref([{}]) //类别下对应的商品
onMounted( async () => {
  await Getsort()
  await changeTypes( sort.value[0] , 0 )
  await Getorder()
  Status.displayedOrders = Status.orders;
})
const userInfo=ref({
	userInfo:wx.getStorageSync('userInfo')
}) 
const Getorder = async () => {
  const res = await uni.request({
    url: baseUrl + '/order/list',
    method: 'POST',
    data: {
		 // id:userInfo.value.userInfo.id ,
		 id:215
	}
  })
  if (res.data.code === 1) {
	   Status.value.orders=res.data.data;
	   // for(let key in res.data.data){
		  //  Status.value.orders[key]=res.data.data[key]
	   // }
	   console.log(Status.value.orders[0].orderStatus)//待支付
	   console.log(res.data.data[0].orderStatus)//待支付
  }else{
	  console.log("没拿到用户数据")
  }
};
//订单类别
const Status =ref({
	orderStatus: '全部',
	orders:[
		{
			
		}
	],

	displayedOrders: [] 
})
const changeTab = (tab) => {
	for(let key in Status.value.orders){
		tab[key]={
			 Status.value.orders[key].orderStatus
		}
	}
  // Status.value.orders.orderStatus = tab;
  if (tab === '全部') {
    Status.value.displayedOrders = Status.value.orders;
  } else {
    Status.value.displayedOrders = Status.value.orders.filter(order => {
      switch (tab) {
        case '待支付':
          return order.orderStatus === '代支付';
		case '代发货':
		  return order.orderStatus === '代发货';
        case '已发货':
          return order.orderStatus === '已发货';
        case '售后':
          return order.orderStatus === '售后';
        default:
          return false;
      }
    });
  }
}

//console.log(userInfo.value.userInfo.id)//216
//获取商品分类
const Getsort = async ()=>{
	const res = await uni.request({
		url: testUrl + '/category/list',
		method:'POST'
	})
	if(res.data.code === 1){
		for(let key in res.data.data) {
			sort.value[key] = {//类别列表
				name : res.data.data[key].typeName,
				imgurl : res.data.data[key].typeUrl,
				id : res.data.data[key].id
			}//标题列表
			headerList.value[key] = {
				name : res.data.data[key].typeName,
				typeIntro : res.data.data[key].typeIntro
			}
		}
	} else {
		uni.showToast({ //提示请求错误
			title: '请求商品分类错误',
			icon: 'none',
			duration: 2000
		})
	}
}
//更改类别
const changeTypes = async (item , index) =>{
	currentColor.value = index  
	const res = await uni.request({
		url: testUrl + '/category/list/type',
		method: 'POST',
		data: {
			id : item.id
		}
	})
	if(res.data.code === 1) {
		productList.value = res.data.data[item.id]
	} else {
		uni.showToast({ //商品请求错误
			title: '更改类别错误',
			icon: 'none',
			duration: 2000
		})
	}
}
//更改box颜色
const getBoxStyle = (index) => ({
    backgroundColor: currentColor.value === index ? 'brown' : '#fffef8'  
});

const goToProduct = (item) => {
	console.log(item,123);
	uni.navigateTo({
		url: '../../../pages/store-home/ProductDetails/ProductDetails?info=' + JSON.stringify(item)
	})
}
</script>

<style lang="scss" scoped>
// .navbar {
//   background-color: #333;
//   color: #fff;
//   padding: 10px;
// }
// .bbb {
//   display: flex;
//   align-items: center;
// }
// .ccc {
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   margin: 20rpx;
// }
// .eee {
//   width: 30px;
//   height: 30px;
// }
// .ddd {
//   font-size: 14px;
// }
// .flex-row {
//   display: flex;
// }
// .flex-item {
//   flex: 1;
// }
// .ml-15 {
// 	margin-left: 28.13rpx;
// }
// .ml-3 {
// 	margin-left: 5.63rpx;
// }
// .mt-3 {
// 	margin-top: 5.63rpx;
// 	text-align: center;
// }
// .mt-13 {
// 	margin-top: 17.38rpx;
// }
// .mt-5 {
// 	margin-top: 9.38rpx;
// }
// .page {
// 	background-color: #f5f5dc;
// 	// height: 1413.75rpx;
// 	width: 100%;
// 	overflow-y: auto;
// 	overflow-x: hidden;
// 	height: 100vh;
// 	overflow: hidden;
// }
// .section {
// 	padding: 22.5rpx 39.28rpx 16.88rpx;
// 	background-color: #f7de98;
// }
// .pos_8 {
// 	position: absolute;
// 	left: 0;
// 	right: 0;
// 	top: 0;
// }
// .text {
// 	color: #c1651a;
// 	font-size: 37.5rpx;
// 	font-family: STFangsong;
// 	line-height: 36.19rpx;
// }
// .section_2 {
// 	padding: 5.63rpx 15rpx 8.44rpx;
// 	background-color: #ffffff;
// 	border-radius: 28.13rpx;
// 	height: 63.75rpx;
// 	width: 500.69rpx;
// }
// .image {
// 	width: 50.63rpx;
// 	height: 50.63rpx;
// }
// .text-wrapper {
// 	margin-right: 17.42rpx;
// }
// .font {
// 	font-size: 26.25rpx;
// 	font-family: STFangsong;
// 	line-height: 18rpx;
// 	color: #ff0000;
// }
// .image-wrapper {
// 	background-color: #ffffff;
// 	border-radius: 28.13rpx;
// 	overflow: hidden;
// 	border: solid 9.38rpx #ffffff;
// }
// .pos_1 {
// 	position: absolute;
// 	left: 22.5rpx;
// 	right: 24.38rpx;
// 	top: 118.13rpx;
// }
// .image_2 {
// 	width: 91.25vw;
// 	height: 37.5vw;
// }

// .group {
// 	margin: auto;
// 	width: 137.81rpx;
// }
// //类别列表
// .list-item {
// 	padding: 11.25rpx 0 9.94rpx;
// 	background-color: #fffef8;
// 	border-radius: 9.38rpx;
// }
// .list-item:first-child {
// 	margin-top: 0;
// }
// .image_3 {
// 	border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
// 	width: 60rpx;
// 	height: 60rpx;
// }
// .font_4 {
// 	font-size: 25rpx;
// 	font-family: STFangsong;
// 	line-height: 28.26rpx;
// 	color: #c1651a;
// }
// .section_4 {
// 	padding-bottom: 879.38rpx;
// 	background-color: #f8e8c1;
// 	border-radius: 0rpx 18.75rpx 0rpx 0rpx;
// 	width: 600.13rpx;
// }
// .pos_4 {
// 	position: absolute;
// 	right: 0;
// 	top: 440.63rpx;
// }
// .section_5 {
// 	padding: 18.06rpx 16.24rpx 14.94rpx;
// 	background-color: #fffef8;
// 	border-radius: 0rpx 18.75rpx 0rpx 0rpx;
// 	width: 598.13rpx;
// }
// .font_2 {
// 	font-size: 30rpx;
// 	font-family: STFangsong;
// 	line-height: 28.26rpx;
// 	color: #000000;
// }
// .font_3 {
// 	font-size: 22.5rpx;
// 	font-family: STFangsong;
// 	line-height: 21.56rpx;
// 	color: #727272;
// }
// .text_3 {
// 	line-height: 21.15rpx;
// }
// .pos_5 {
// 	position: absolute;
// 	top: 120rpx;
// 	width: 95%;
// 	margin: 2.5%;
// }
// .section_9 {
// 	padding: 20.63rpx 22.88rpx 22.5rpx;
// 	background-color: #fffef8;
// 	border-radius: 9.38rpx;
// 	right: 13.13rpx;
// }
// .list-item_2:first-child {
// 	margin-top: 0;
// }
// .image_4 {
// 	border-radius: 9.38rpx;
// 	width: 131.25rpx;
// 	height: 131.25rpx;
// }
// .group_3 {
// 	margin-left: 24.84rpx;
// }
// .text_5 {
// 	line-height: 28.65rpx;
// }
// .image_5 {
// 	margin: 75rpx 5.63rpx 0 107.96rpx;
// 	border-radius: 9.38rpx;
// 	width: 56.25rpx;
// 	height: 56.25rpx;
// }
.container {
  padding: 20px;
}

.order-tabs {
  display: flex;
  justify-content: space-around;
  background-color: #f5f5f5;
  padding: 10px 0;
}

.tab-item {
  cursor: pointer;
  padding: 5px 10px;
}

.tab-item.active {
  color: blue;
  border-bottom: 2px solid blue;
}

.order-list {
  margin-top: 20px;
}

.order-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
@import url(../../../common/css/global.css);
</style>