<template>
	<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgUrl + ')'}">
	  <view class="flex-row equal-division flex-box">
	    <view class="flex-col items-center group equal-division-item" @click="changeSelectedStatus(true)">
	      <image
	        class="image"
	        :src="xzUrl"
	      />
	      <text class="font text mt-10" :style="xzColor">写真预约</text>
	    </view>
	    <view class="flex-col items-center group equal-division-item" @click="changeSelectedStatus(false)">
	      <image
	        class="image"
	        :src="fzUrl"
	      />
	      <text class="font text_2 mt-10" :style="fzColor">服装租赁</text>
	    </view>
	  </view>
	  <view class="divider pos"></view>
	  <view class="section_2 pos_2"></view>
	  <view class="flex-col pos_3">
	    <view
	      class="flex-col justify-start items-center text-wrapper_1 list-item mt-19" 
	      v-for="(item, index) in typeList"  @click="isSelected(item, index)" :style="asideStyle[index]"
	      :key="index"
	    >
	      <text class="font_2 text_11">{{ item }}</text>
	    </view>
	  </view>
	  <view class="flex-col group_2 pos_4">
	    <view class="flex-row justify-between list-item_2 mt-12" @click="gotoDetailPage(item.id)"
		v-for="(item, index) in pointItemList" :key="index">
	      <view class="flex-row">
	        <image
	          class="image_2" mode="aspectFill"
	          :src="publicPath + (isShow ? item.introImg : item.image)"
	        />
	        <view class="flex-col items-start ml-7">
	          <text class="font_2 text_9">{{ item.name }}</text>
	          <text class="font_2 text_10 mt-50">{{ item.price.toFixed(2) }}元{{ isShow ? '起' : '/天' }}</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>
	import {onMounted, ref} from 'vue'
	import { bookUrl } from '../../../common/globalImagesUrl';
	import { baseUrl } from '../../../api/request';
	import { publicPath } from '../../../common/globalImagesUrl';
	import { getFonts } from '../../../common/globalFont';
	
	const cookie = wx.getStorageSync("cookie")  //请求头
	const bkgUrl = ref(bookUrl + '/myPhotoProducts/bkg.png')
	const xzgl = bookUrl + '/myPhotoProducts/xz-gl.png'
	const xz = bookUrl + '/myPhotoProducts/xz.png'
	const fzgl = bookUrl + '/myPhotoProducts/fz-gl.png'
	const fz = bookUrl + '/myPhotoProducts/fz.png'
	
	const xzUrl = ref(xzgl)
	const fzUrl = ref(fz)
	const isShow = ref(true)
	let clothesMap = null
	let photoProductsMap = null
	let pointMap = ref(null)
	let typeList = ref(null)
	let pointItemList = ref(null)
	let pointIdx = ref(0)
	const asideStyle = ref([])
	const xzColor = ref({ color: '#C35C5D', fontSize: '38.75rpx;', fontWeight: 'bold' })
	const fzColor = ref({ color: '#323232', fontSize: '33.75rpx;', fontWeight: 'normal' })
	
	onMounted(() => {
		getFonts()
		getAllData()
	})
	
	const getAllData = async () => {
		const res = await uni.request({
			url: baseUrl + '/global/getAllProducts',
			method: 'GET',
			header: {
				cookie
			}
		})
		clothesMap = Object.entries(res.data.data['clothesMap'])
		photoProductsMap = Object.entries(res.data.data['photoProductsMap'])
		pointMap.value = photoProductsMap
		typeList.value = pointMap.value.map(item => item[0])
		pointItemList.value = pointMap.value[0][1]
		asideStyle.value = Array(typeList.value.length).fill(null).map(() => ({
			backgroundColor: '#FBDEDF'
		}))
		asideStyle.value[0].backgroundColor = '#FFB6B9'
	}
	
	
	
	
	const changeSelectedStatus = (val) => {
		if (isShow.value && !val) {
			xzUrl.value = xz
			fzUrl.value = fzgl
			isShow.value = !isShow.value
			
			pointMap.value = clothesMap
			typeList.value = pointMap.value.map(item => item[0])
			pointItemList.value = pointMap.value[0][1]
			
			pointIdx.value = 0
			asideStyle.value[0].backgroundColor = '#FFB6B9'
			for (var i = 1; i < asideStyle.value.length; i ++ ) {
				asideStyle.value[i].backgroundColor = '#FBDEDF'
			}
			
			xzColor.value = { color: '#323232', fontSize: '33.75rpx;', fontWeight: 'normal' }
			fzColor.value = { color: '#C35C5D', fontSize: '38.75rpx;', fontWeight: 'bold' }
		} 
		if (!isShow.value && val) {
			xzUrl.value = xzgl
			fzUrl.value = fz
			isShow.value = !isShow.value
			
			pointMap.value = photoProductsMap
			typeList.value = pointMap.value.map(item => item[0])
			pointItemList.value = pointMap.value[0][1]
			
			pointIdx.value = 0
			asideStyle.value[0].backgroundColor = '#FFB6B9'
			for (var i = 1; i < asideStyle.value.length; i ++ ) {
				asideStyle.value[i].backgroundColor = '#FBDEDF'
			}
			xzColor.value = { color: '#C35C5D', fontSize: '38.75rpx;', fontWeight: 'bold' }
			fzColor.value = { color: '#323232', fontSize: '33.75rpx;', fontWeight: 'normal' }
		}
	}
	
	
	const isSelected = (item, index) => {
		if (pointIdx.value === index) return 
		pointIdx.value = index
		for (var i = 0; i < asideStyle.value.length; i ++ ) {
			if (i == index) {
				asideStyle.value[i].backgroundColor = '#FFB6B9'
			} else {
				asideStyle.value[i].backgroundColor = '#FBDEDF'
			}
		}
		pointItemList.value = pointMap.value[pointIdx.value][1]
	}
	
	
	const gotoDetailPage = (val) => {
		uni.navigateTo({
			url: '/pages/book/myPhotoProductDetail/myPhotoProductDetail?isShow=' + isShow.value + '&id=' + val
		})
	}
	

	
	 
	
	
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
  display: none;  /* 隐藏滚动条 */
}
.flex-box {
	display: flex;
	justify-content: space-around;
}
.mt-19 {
  margin-top: 35.63rpx;
}
.ml-7 {
  margin-left: 13.13rpx;
}
.page {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
.equal-division {
  position: absolute;
  left: 23.38rpx;
  right: 25.37rpx;
  top: 18.13rpx;
}
.group {
  // flex: 1 1 350.63rpx;
}
.equal-division-item {
  padding: 7.31rpx 0 9.99rpx;
}
.image {
  width: 176.01rpx;
  height: 176.01rpx;
}
.font {
  font-size: 33.75rpx;
  font-family: FangZhengFonts;
  line-height: 32.83rpx;
}
.text {
  color: #c35c5d;
}
.text_2 {
  color: #323232;
  line-height: 32.44rpx;
}
.divider {
  background-color: #818181;
  height: 1.88rpx;
}
.pos {
  position: absolute;
  left: 31.88rpx;
  right: 31.88rpx;
  top: 280.31rpx;
}
.section_2 {
  background-color: #fff;
  border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
  width: 159.38rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  top: 309.38rpx;
  bottom: 0;
}
.pos_3 {
  position: absolute;
  left: 0;
  top: 309.38rpx;
  bottom: 0;
  overflow-y: auto;
  padding-bottom: 40rpx;
}
.text-wrapper_1 {
  padding: 60.38rpx 0 60.11rpx;
  background-color: #faddde;
  border-radius: 18.75rpx;
  width: 159.38rpx;
}
.list-item:first-child {
  margin-top: 0;
}
.font_2 {
  font-size: 26.25rpx;
  font-family: FangZhengFonts;
  line-height: 25.16rpx;
  color: #323232;
}
.text_11 {
  line-height: 24rpx;
}
.group_2 {
  width: 555rpx;
}
.pos_4 {
  position: absolute;
  right: 16.88rpx;
  top: 309.38rpx;
  bottom: 0;
  overflow-y: auto;
  padding-bottom: 40rpx;
}
.list-item_2 {
  padding: 18.13rpx 19.88rpx 17.58rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
}
.list-item_2:first-child {
  margin-top: 0;
}
.image_2 {
  margin-bottom: 2.42rpx;
  border-radius: 9.38rpx;
  width: 120rpx;
  height: 142.5rpx;
}
.text_9 {
  line-height: 25.54rpx;
}
.text_10 {
  font-size: 28.13rpx;
}
.text-wrapper_2 {
  margin-right: 5.61rpx;
  margin-top: 69.38rpx;
  padding: 14.93rpx 0 16.69rpx;
  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>