<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>

<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 )
})
//获取商品分类
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;
}
@import url(../../../common/css/global.css);
</style>