<template>
	<view class="flex-col justify-start relative page">
	  <view class="section"></view>
	  <text class="font text pos_2">选择联系人</text>
	  <image
		class="image pos"
		src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=255ef950c2652260141b1b6866847d29.png"
		@click="openTipsPopup"
	  />
	  <text class="font_2 text_2 pos_3" @click="openTipsPopup">预约须知</text>
	  <view class="flex-row justify-between items-center section_2 pos_4">
	    <view class="flex-row items-center">
	      <image
	        class="shrink-0 image_2"
	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=d756fec34c69604dfbd42c6d155690f0.png"
	      />
	      <text class="font text_3 ml-10">张三 15888610253</text>
	    </view>
	    <view class="flex-row items-center group">
	      <image
	        class="image_3"
	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=3e51d655e35c3c3fd7fbdfab51592143.png"
	      />
	      <text class="font_3 text_4">更换联系人</text>
	    </view>
	  </view>
	  <text class="font text_5 pos_5">请选择拍摄时间</text>
	  <view class="flex-col section_3 pos_6">
	    <text class="self-start font_2 text_6">预约日期：2025-{{ bookingDate }}</text>
	    <text class="self-start font_2 text_7">预约时间：{{ bookingTime }}</text>
	    <view class="self-stretch divider"></view>
	    <view class="flex-row equal-division my-box">
	      <view class="flex-col items-center section_4 equal-division-item" 
		  @click="selectTime(index)" :style="timeSelectedStyle[index]"
		  v-for="(item, index) in 6" :key="index">
	        <text class="font_3" :style="timeFontStyle[index]">星期一</text>
	        <text class="font_4 mt-11" :style="timeFontStyle[index]">12-09</text>
	      </view>
	    </view>
	    <view class="flex-col justify-start self-stretch group_2">
	      <view class="flex-row relative group_1 my_grid">
	        <view
	          class="flex-col justify-start items-center text-wrapper_1 pos_1"
			  :style="tpSelectedStyle[index]"
	          v-for="(item, index) in 15"
	          :key="index" @click="selectTpTime(index)"
	        >
	          <text class="font_5" :style="tpFontStyle[index]">14:00</text>
	        </view>
	      </view>
	    </view>
	  </view>
	  <text class="font pos_7">预约信息</text>
	  <view class="flex-row justify-between items-center section_5 pos_8">
	    <view class="flex-row items-center">
	      <image
	        class="image_4"
	        :src="photoProduct.introImg"
	      />
	      <view class="flex-col items-start ml-11">
	        <text class="font_2 text_8">汉服—曲裾系列</text>
	        <text class="font_6 text_9 mt-10">拍摄人数：1人</text>
	        <text class="font_6 text_10 mt-10">拍摄场地：室外</text>
	        <text class="font_6 text_12 mt-10">预约门店：哈尔滨师范大学</text>
	      </view>
	    </view>
	    <view class="flex-col items-center group_3" @click="nav">
	      <image
	        class="image"
	        src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=d52c7b6dae8656c06b3be0bbcd17f959.png"
	      />
	      <text class="text_11 mt-3">导航</text>
	    </view>
	  </view>
	  <view class="flex-row justify-between items-center section_6 pos_9">
	    <view class="flex-row items-baseline">
	      <text class="font text_13">定金：</text>
	      <text class="font text_14">￥{{ photoProduct.price.toFixed(2) }}</text>
	    </view>
	    <view class="flex-col justify-start items-center text-wrapper_2"><text class="font_2 text_15">确定</text></view>
	  </view>
	</view>
	
	<uni-popup ref="bookingTips" :maskClick="false" :animation="false">
		<view class="booking-tips">
			<bookingTipsVue></bookingTipsVue>
		</view>
	</uni-popup>
	
</template>

<script setup lang="ts">
	import {nextTick, onMounted, ref} from 'vue'
	import emitter from '../../../utils/emitter';
	import bookingTipsVue from '../component/bookingTips.vue';
	import { baseUrl } from '../../../api/request';
	const cookie = wx.getStorageSync("cookie")  //请求头
	const photoProduct = ref({})
	
	
	const timeSelectedStyle = ref(new Array(11).fill(null).map(() => ({
		backgroundColor: '#F3F3F3',
	})))
	
	const timeFontStyle = ref(new Array(11).fill(null).map(() => ({
		color: '#8B8B8B',
	})))
	
	const tpSelectedStyle = ref(new Array(15).fill(null).map(() => ({
		borderColor: '#8B8B8B'
	})))
	
	const tpFontStyle = ref(new Array(15).fill(null).map(() => ({
		color: '#323232',
	})))
	
	
	const bookingDate = ref('请选择')
	const bookingTime = ref('请选择')
	const bookingTips = ref(null)
	const openTipsPopup = () => {
		bookingTips.value.open('center')
	}
	
	
	
	
	onMounted(() => {
		
		getPhotoProductsById()
		emitter.on('closeBookingTips', () => {
			nextTick(() => {
				if (bookingTips.value) {
					bookingTips.value.close()
				}
			})
		})
	})
	
	
	const getPhotoProductsById = async () => {
		const res = await uni.request({
			url: baseUrl + '/photoProducts/list/detail',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				id: 70
			}
		})
		console.log(res.data.data)
		photoProduct.value = res.data.data
	}
	
	const selectTime = (index:any) => {
		for (var i = 0; i < timeSelectedStyle.value.length; i ++ ) {
			if (i == index) {
				timeSelectedStyle.value[i].backgroundColor = '#FFB6B9'
				timeFontStyle.value[i].color = '#C35C5D'
			} else {
				timeSelectedStyle.value[i].backgroundColor = '#F3F3F3'
				timeFontStyle.value[i].color = '#8B8B8B'
			}
		}
	}
	
	const selectTpTime = (index:any) => {
		for (var i = 0; i < tpSelectedStyle.value.length; i ++ ) {
			if (i == index) {
				tpSelectedStyle.value[i].borderColor = '#C35C5D'
				tpFontStyle.value[i].color = '#C35C5D'
			} else {
				tpSelectedStyle.value[i].borderColor = '#8B8B8B'
				tpFontStyle.value[i].color = '#323232'
			}
		}
	}
	
	
	//方法
	const nav = () => {
		wx.openLocation({
			latitude: 45.867741,
			longitude: 126.560037,
			name: '哈尔滨师范大学(松北校区)',
			address: '黑龙江省哈尔滨市呼兰区利民经济开发区师大路1号',
			success: (res) => {
			console.log(res)
			}
		})
	}
		
	

	
</script>

<style scoped lang="scss">
	
.booking-tips {
	justify-content: center;
	background-color: #fff;
	border-radius: 41.1rpx;
	margin-top: -100rpx;
	width: 650rpx;
	overflow-y: auto;
}

.my-box {
	width: 100%;
	overflow-x: auto;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

	
.mt-11 {
  margin-top: 20.63rpx;
}
.ml-11 {
  margin-left: 20.63rpx;
}
.mt-3 {
  margin-top: 5.63rpx;
}
.page {
  background-color: #ffffff;
  background-image: url('https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=c07af569900e34d63f1e91cbbae55df7.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  background-image: url('https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=c07af569900e34d63f1e91cbbae55df7.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 750rpx;
  height: 100vh;
}
.font {
  font-size: 37.5rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 35.01rpx;
  color: #000000;
}
.text {
  line-height: 36.47rpx;
}
.pos_2 {
  position: absolute;
  left: 16.46rpx;
  top: 45.38rpx;
}
.image {
  width: 45rpx;
  height: 45rpx;
}
.pos {
  position: absolute;
  right: 138.13rpx;
  top: 40.25rpx;
}
.font_2 {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 28.01rpx;
  color: #000000;
}
.text_2 {
  line-height: 27.54rpx;
}
.pos_3 {
  position: absolute;
  right: 19.33rpx;
  top: 48.51rpx;
}
.section_2 {
  padding: 20.63rpx 30.58rpx 24.98rpx 35.04rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
}
.pos_4 {
  position: absolute;
  left: 15rpx;
  right: 16.88rpx;
  top: 110.63rpx;
}
.image_2 {
  width: 65.63rpx;
  height: 67.5rpx;
}
.text_3 {
  color: #818181;
  line-height: 32.38rpx;
  font-size: 30rpx;
}
.group {
  width: 167.03rpx;
}
.image_3 {
  margin-left: 129.53rpx;
  width: 37.5rpx;
  height: 37.5rpx;
}
.font_3 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 24.3rpx;
  color: #8b8b8b;
}
.text_4 {
  margin-left: -167.03rpx;
  color: #ffaaa5;
  line-height: 25.54rpx;
}
.text_5 {
  line-height: 36.34rpx;
}
.pos_5 {
  position: absolute;
  left: 16.18rpx;
  top: 255.53rpx;
}
.section_3 {
  padding: 41.36rpx 26.25rpx 32.81rpx 28.13rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
  box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
}
.pos_6 {
  position: absolute;
  left: 15rpx;
  right: 16.88rpx;
  top: 316.88rpx;
}
.text_6 {
  margin-left: 3.17rpx;
  line-height: 27.77rpx;
}
.text_7 {
  margin-left: 3.17rpx;
  margin-top: 33.88rpx;
}
.divider {
  margin-top: 38.66rpx;
  background-color: #a5a5a5;
  height: 1.88rpx;
}
.equal-division {
  align-self: stretch;
  margin-top: 27.19rpx;
}
.section_4 {
  width: 150rpx;
  margin: 0 15rpx;
}
.equal-division-item {
  padding: 14.4rpx 0 19.22rpx;
  background-color: #f3f3f3;
  border-radius: 9.38rpx;
  height: 99.38rpx;
}
.font_4 {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 20.04rpx;
  color: #8b8b8b;
}
.group_2 {
  margin-top: 29.06rpx;
  padding: 34.69rpx 0 30.94rpx;
  border-top: solid 1.88rpx #a5a5a5;
}
.group_1 {
  margin-right: 3.77rpx;
  // height: 373.13rpx;
}

.my_grid {
	margin: 0 auto; 
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(2, 1fr);
	row-gap: 36rpx; 
	column-gap: 36rpx;
	overflow-y: auto;
	height: 250rpx;
}

.text-wrapper_1 {
  padding: 39.38rpx 0 39.96rpx;
  background-color: #ffffff;
  border-radius: 9.38rpx;
  width: 105rpx;
  border: solid 1.88rpx #c35c5d;
}
.pos_1 {
  // position: absolute;
  // left: 0;
  // top: 0;
}
.font_5 {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 20.04rpx;
  color: #323232;
}
.pos_7 {
  position: absolute;
  left: 24.11rpx;
  top: 1020rpx;
}
.section_5 {
  padding: 25.43rpx 35.63rpx 34.01rpx;
  background-color: #ffffff;
  border-radius: 37.5rpx;
  box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
}
.pos_8 {
  position: absolute;
  left: 22.5rpx;
  right: 22.5rpx;
  top: 1080.75rpx;
}
.image_4 {
  width: 120rpx;
  height: 133.13rpx;
}
.text_8 {
  line-height: 29.18rpx;
}
.font_6 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 24.3rpx;
  color: #000000;
}
.text_9 {
  line-height: 23.79rpx;
}
.text_10 {
  line-height: 24.21rpx;
}
.text_12 {
  line-height: 25.33rpx;
}
.group_3 {
  margin-right: 3.02rpx;
}
.text_11 {
  color: #000000;
  font-size: 22.5rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 21.09rpx;
}
.section_6 {
  padding: 26.25rpx 27.15rpx;
  background-color: #ffffff;
}
.pos_9 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.text_13 {
  line-height: 34.42rpx;
}
.text_14 {
  margin-left: -10.14rpx;
  line-height: 25.05rpx;
}
.text-wrapper_2 {
  margin-right: 4.72rpx;
  padding: 24.38rpx 0 24.49rpx;
  background-color: #ffb6b9;
  border-radius: 187.5rpx;
  width: 241.88rpx;
  height: 76.88rpx;
}
.text_15 {
  color: #ffffff;
}
@import url(../../../common/css/global.css);
</style>