<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="bookUrl + '/photoProducts/type1.png'"
	      />
	      <text class="font text_1 mt-7">写真专区</text>
	    </view>
	    <view class="flex-col items-center equal-division-item_2 ml-48" @click="jumpNextToDetail('摄影')">
	      <image
	        class="image"
	        :src="bookUrl + '/photoProducts/type2.png'"
	      />
	      <text class="font mt-7">摄影服务</text>
	    </view>
	    <view class="flex-col items-center equal-division-item_3 ml-48" @click="jumpNextToDetail('妆造')">
	      <image
	        class="image"
	        :src="bookUrl + '/photoProducts/type3.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.id)"
		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.totalAmountPrice.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';
	import { bookUrl } from '../../../common/globalImagesUrl';
	
	const cookie = wx.getStorageSync("cookie")  //请求头
	const categoryList = ref([])
	const photoProducts = ref([])
	const asideStyle = ref([])
	const categoryId = ref(0)
	const categoryName = ref('')
	const ids = ref([])
	const point = ref(0)
	
	onMounted( async () => {
		getFonts()
		await getAllCategory()
		await getPhotoProductsByCategoryId(categoryName.value)
		getSpecialIds()
	})
	
	const getSpecialIds = async () => {
		const res = await uni.request({
			url: baseUrl + '/photoProducts/special/get',
			method: 'POST',
			header: {
				cookie
			}
		})
		ids.value = res.data.data
	}
	
	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)
		for (var i = 0; i < photoProducts.value.length; i ++ ) {
			let minNumber = photoProducts.value[i].minNumber
			let price = photoProducts.value[i].price
			photoProducts.value[i].totalAmountPrice = minNumber * price
		}
	}
	
	const jumpToDetail = (val:any) => {
		uni.navigateTo({
			url: '../photoProductDetail/photoProductDetail?id=' + val
		})
	}
	
	const jumpNextToDetail = async (type:any) => {
		await getSpecialIds()
		if (type === '摄影') {
			point.value = ids.value[0]
		} else {
			point.value = ids.value[1]
		}
		if (point.value === 0) {
			uni.showModal({
				title: '提示',
				content: '当前写真产品未上架',
				showCancel: false
			})
			return ;
		}
		uni.navigateTo({
			url: '../photoProductDetail/photoProductDetail?id=' + point.value + "&type=" + type
		})
	}
	
	
	//获取字体
	const getFonts =()=>{
		uni.loadFontFace({
			family: 'FangZhengFonts',
			source: `url("https://carbon2.obs.cn-north-4.myhuaweicloud.com/fonts/FangZhengFonts.TTF")`,
			success:(res) =>{
				console.log('success',res);
			},
			fail:(err) => {
				console.log('err',err);
			}
		})
	}
</script>

<style scoped lang="scss">
.mt-7 {
  margin-top: 13.13rpx;
}
.mt-13 {
  margin-top: 24.38rpx;
}
.page {
  background-image: url(https://carbon2.obs.cn-north-4.myhuaweicloud.com/feiyi/miniProgram/book/photoProducts/bkg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
.section {
  background-image: url(https://carbon2.obs.cn-north-4.myhuaweicloud.com/feiyi/miniProgram/book/photoProducts/bkg.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: FangZhengFonts;
  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: FangZhengFonts;
  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: FangZhengFonts;
  line-height: 17.14rpx;
  color: #ffffff;
}
@import url(../../../common/css/global.css);
</style>