<template>
	<view class="flex-col justify-start relative page">
	  <view class="section"></view>
	  <view class="flex-row equal-division">
	    <view class="flex-col items-center equal-division-item">
	      <image
	        class="image"
	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=98d92598fa059f35ed92af5a9439c9c0.png"
	      />
	      <text class="font text_1 mt-7">写真专区</text>
	    </view>
	    <view class="flex-col items-center equal-division-item_2 ml-48">
	      <image
	        class="image"
	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=96be13306d195949440e67325578de26.png"
	      />
	      <text class="font mt-7">摄影服务</text>
	    </view>
	    <view class="flex-col items-center equal-division-item_3 ml-48">
	      <image
	        class="image"
	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=57485239f24eb48a22be8fce00be610d.png"
	      />
	      <text class="font mt-4">妆造服务</text>
	    </view>
	  </view>
	  <view class="divider pos"></view>
	  <view class="flex-col justify-start section_2 pos_2">
	    <view class="flex-col">
	      <view
	        class="flex-col justify-start items-center relative list-item mt-16" @click="isSelected(item, index)" :style="asideStyle[index]"
	        v-for="(item, index) in categoryList"
	        :key="index"
	      >
	        <text class="font_2 text_2">{{ item.name }}</text>
	      </view>
	    </view>
	  </view>
	  <text class="font_2 text pos_3">{{ categoryName }}</text>
	  <view class="flex-col group pos_4">
	    <view class="flex-row justify-between relative list-item_2 mt-13" @click="jumpToDetail(item)"
		v-for="(item, index) in photoProducts" :key="index">
	      <view class="flex-row self-center">
	        <image
	          class="image_2"
	          :src="item.introImg"
	        />
	        <view class="flex-col items-start ml-12">
	          <text class="font_2 text_3">{{ item.name }}</text>
	          <text class="font_2 text_4 mt-32">{{ item.price.toFixed(2) }}元起</text>
	        </view>
	      </view>
	      <view class="flex-col justify-start items-center self-start text-wrapper_2">
	        <text class="font_3">立即预约</text>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script setup lang="ts">
	import {onMounted, ref} from 'vue'
	import { baseUrl } from '../../../api/request';
	
	const cookie = wx.getStorageSync("cookie")  //请求头
	const categoryList = ref([])
	const photoProducts = ref([])
	const asideStyle = ref([])
	const categoryId = ref(0)
	const categoryName = ref('')
	
	onMounted( async () => {
		await getAllCategory()
		await getPhotoProductsByCategoryId(categoryName.value)
	})
	
	
	const isSelected = (item:any, index:any) => {
		categoryId.value = item.id
		categoryName.value = item.name
		for (var i = 0; i < asideStyle.value.length; i ++ ) {
			if (i == index) {
				asideStyle.value[i].backgroundColor = '#FFB6B9'
			} else {
				asideStyle.value[i].backgroundColor = '#ffb6b936'
			}
		}
		getPhotoProductsByCategoryId(categoryName.value)
	}
	
	
	const getAllCategory = async () => {
		const res = await uni.request({
			url: baseUrl + '/photoCategory/list/users',
			method: 'POST',
			header: {
				cookie
			}
		})
		categoryList.value = res.data.data
		categoryName.value = res.data.data[0].name
		asideStyle.value = Array(categoryList.value.length).fill(null).map(() => ({
			backgroundColor: '#ffb6b936'
		}))
		asideStyle.value[0].backgroundColor = '#FFB6B9'
	}
	
	const getPhotoProductsByCategoryId = async (val:any) => {
		const res = await uni.request({
			url: baseUrl + '/photoCategory/list/type',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				type: val
			}
		})
		photoProducts.value = res.data.data
		console.log(photoProducts.value)
	}
	
	const jumpToDetail = (val:any) => {
		uni.navigateTo({
			url: '../photoProductDetail/photoProductDetail?obj=' + JSON.stringify(val)
		})
	}
	
	
	
</script>

<style scoped lang="scss">
.mt-7 {
  margin-top: 13.13rpx;
}
.mt-13 {
  margin-top: 24.38rpx;
}
.page {
  background-image: url('https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=039df2fe261116bd1bd408f287b060bc.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
.section {
  background-image: url('https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=039df2fe261116bd1bd408f287b060bc.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 750rpx;
}
.equal-division {
  position: absolute;
  left: 12.32rpx;
  right: 22.61rpx;
  top: 8.76rpx;
}
.equal-division-item {
  padding: 8.25rpx 0 9.99rpx;
}
.image {
  width: 176.01rpx;
  height: 176.01rpx;
}
.font {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 28.71rpx;
  color: #323232;
}
.text_1 {
  line-height: 29.18rpx;
}
.equal-division-item_2 {
  padding: 8.25rpx 0 10.35rpx;
}
.equal-division-item_3 {
  padding: 8.25rpx 0 17.85rpx;
}
.divider {
  background-color: #a1a1a1;
  height: 1.88rpx;
}
.pos {
  position: absolute;
  left: 30rpx;
  right: 33.77rpx;
  top: 273.75rpx;
}
.section_2 {
  padding-bottom: 40rpx;
  // background-color: #ffffff96;
  border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
  // box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
  width: 159.38rpx;
  height: 1140rpx;
  overflow-y: auto;
}
.pos_2 {
  position: absolute;
  left: 0;
  top: 309.38rpx;
}

/* 隐藏滚动条，但仍然允许滚动 */
::-webkit-scrollbar {
  display: none;
}

.list-item {
  padding: 47.94rpx 0 49.93rpx;
  background-color: #ffb6b936;
  border-radius: 18.75rpx;
  box-shadow: 0rpx 7.5rpx 7.5rpx #5a5a5a40;
  width: 159.38rpx;
}
.list-item:first-child {
  margin-top: 0;
}
.font_2 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 25.16rpx;
  color: #000000;
}
.text_2 {
  line-height: 24rpx;
}
.text {
  font-size: 28.13rpx;
  line-height: 25.71rpx;
}
.pos_3 {
  position: absolute;
  left: 180.77rpx;
  top: 312.66rpx;
}
.group {
  width: 555rpx;
  height: 1050rpx;
  padding-bottom: 40rpx;
  overflow-y: auto;
}
.pos_4 {
  position: absolute;
  right: 15rpx;
  top: 360rpx;
}
.list-item_2 {
  padding: 31.88rpx 20.63rpx 27.58rpx;
  background-color: #ffffff96;
  border-radius: 18.75rpx;
  box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
}
.list-item_2:first-child {
  margin-top: 0;
}
.image_2 {
  margin-bottom: 2.42rpx;
  width: 99.38rpx;
  height: 108.75rpx;
}
.text_3 {
  line-height: 25.54rpx;
}
.text_4 {
  font-size: 28.13rpx;
}
.text-wrapper_2 {
  margin-right: 5.63rpx;
  margin-top: 50.63rpx;
  padding: 14.91rpx 0 16.71rpx;
  background-color: #ffb6b9;
  border-radius: 28.13rpx;
  width: 108.75rpx;
  height: 48.75rpx;
}
.font_3 {
  font-size: 18.75rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 17.14rpx;
  color: #ffffff;
}
@import url(../../../common/css/global.css);
</style>
