<template>
	<view class="flex-col justify-start relative page">
	  <view class="section"></view>
	  <image
	    class="image pos"
	    :src="obj.introImg"
	  />
	  <view class="flex-col items-start section_2 pos_2">
	    <text class="font text">{{ obj.name }}</text>
	    <text class="mt-18 font text_2">￥{{ obj.totalAmountPrice.toFixed(2) }}起</text>
	  </view>
	  <text class="font_2 pos_3">服务&交付标准</text>
	  <view class="flex-row equal-division">
	    <view class="flex-col items-center group equal-division-item">
	      <image
	        class="image_2"
	        :src="bookUrl + '/photoProductDetail/zx.png'"
	      />
	      <text class="font_3 mt-11">1组造型</text>
	    </view>
	    <view class="ml-38 flex-col items-center group equal-division-item">
	      <image
	        class="image_2"
	        :src="bookUrl + '/photoProductDetail/fz.png'"
	      />
	      <text class="font_3 mt-11">1套服装</text>
	    </view>
	    <view class="ml-38 flex-col items-center group equal-division-item">
	      <image
	        class="image_2"
	        :src="bookUrl + '/photoProductDetail/bj.png'"
	      />
	      <text class="font_3 mt-11">1种背景</text>
	    </view>
	  </view>
	  <image
	    class="image_3 pos_4"
	    src="https://ide.code.fun/api/image?token=67be7f674ae84d0012275313&name=6697ed477f5159bddd4ba87ba7ccd849.png"
	  />
	  <text class="font_2 text_3 pos_5">产品详情</text>
	  <text class="font_2 text_4 pos_6">服务说明</text>
	  <image
	    class="image_4 pos_7"
	    :src="obj.detailImg"
	  />
	  <view class="flex-col justify-start items-end section_3 pos_8">
	    <view class="flex-col justify-start items-center text-wrapper" @click="openBookingPopup">
			<text class="font_3 text_5">立即预约</text></view>
	  </view>
	</view>
	
	
	<uni-popup ref="bookingSelected" :maskClick="false">
		<view class="book-selected">
			<bookingSelectedVue></bookingSelectedVue>
		</view>
	</uni-popup>
	
</template>

<script setup lang="ts">
	import { onLoad } from "@dcloudio/uni-app";
	import {nextTick, onMounted, onUnmounted, ref} from 'vue'
	import emitter from "../../../utils/emitter";
	import bookingSelectedVue from "../component/bookingSelected.vue";
	import { baseUrl } from "../../../api/request";
	import { bookUrl } from "../../../common/globalImagesUrl";
	const cookie = wx.getStorageSync("cookie")  //请求头
	const id = ref({})
	const bookingSelected = ref(null)
	const obj = ref({})
	const type = ref('')
	const bookingDateVOList =ref([])
	
	onLoad((options) => {
		console.log(options)
		id.value = options.id
		if (options.type) {
			type.value = options.type
		}
		getPhotoProductsById()
	})
	
	
	const closeBookingPopupHandler = () => {
		nextTick(() => {
			if (bookingSelected.value) {
				bookingSelected.value.close()
			}
		})
	}
	
	onMounted(() => {
		emitter.on('closeBookingPopup', closeBookingPopupHandler)
	})
	
	onUnmounted(() => {
		emitter.off('closeBookingPopup', closeBookingPopupHandler)
	})
	
	
	const getPhotoProductsById = async () => {
		const res = await uni.request({
			url: baseUrl + '/photoProducts/list/detail',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				id: id.value
			}
		})
		console.log(res.data.data)
		obj.value = res.data.data
		obj.value.totalAmountPrice = obj.value.minNumber * obj.value.price
		bookingDateVOList.value = res.data.data.bookingDateVOList
	}
	
	
	const openBookingPopup = () => {
		if (bookingDateVOList.value.length === 0) {
			uni.showModal({
				title: '提示',
				content: '当前写真产品的所有时段已约满',
				showCancel: false
			})
			return ;
		}
		emitter.emit('getProductObj', obj.value)
		emitter.emit('getProductsType', type.value)
		bookingSelected.value.open('bottom')
	}
	
</script>

<style lang="scss" scoped>
	
.book-selected {
	height: 1100rpx; 
	justify-content: center;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
}
.mt-11 {
  margin-top: 20.63rpx;
}
.page {
  background-color: #ffffff;
  background-image: url(https://carbon2.obs.cn-north-4.myhuaweicloud.com/feiyi/miniProgram/book/photoProductDetail/bkg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  background-image: url(https://carbon2.obs.cn-north-4.myhuaweicloud.com/feiyi/miniProgram/book/photoProductDetail/bkg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 750rpx;
  height: 2726.25rpx;
}
.image {
  width: 100vw;
  height: 106vw;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.section_2 {
  padding: 37.5rpx 56.25rpx 41.25rpx;
  background-color: #ebe6e3;
  border-radius: 18.75rpx;
  box-shadow: 0rpx 7.5rpx 7.5rpx #04040440;
}
.pos_2 {
  position: absolute;
  left: 22.5rpx;
  right: 22.5rpx;
  top: 750rpx;
}
.font {
  font-size: 45rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  color: #000000;
}
.text {
  line-height: 43.76rpx;
}
.text_2 {
  margin-left: 7.5rpx;
  line-height: 40.26rpx;
}
.font_2 {
  font-size: 37.5rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 36.34rpx;
  color: #000000;
}
.pos_3 {
  position: absolute;
  left: 29.74rpx;
  top: 1003.65rpx;
}
.equal-division {
  position: absolute;
  left: 0;
  right: 0;
  top: 1077.51rpx;
}
.image_2 {
  width: 128.01rpx;
  height: 128.01rpx;
}
.font_3 {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 27.3rpx;
  color: #000000;
}
.group {
  flex: 1 1 202.5rpx;
}
.equal-division-item {
  padding: 11.25rpx 0;
}
.image_3 {
  width: 256.88rpx;
  height: 76.88rpx;
}
.pos_4 {
  position: absolute;
  left: 116.25rpx;
  top: 1280.63rpx;
}
.text_3 {
  line-height: 36.62rpx;
}
.pos_5 {
  position: absolute;
  left: 106.61rpx;
  top: 50%;
  transform: translateY(-50%);
}
.text_4 {
  line-height: 35.89rpx;
}
.pos_6 {
  position: absolute;
  right: 103.39rpx;
  top: 50%;
  transform: translateY(-50%);
}
.image_4 {
  width: 100vw;
  height: 150vw;
}
.pos_7 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 183.75rpx;
}
.section_3 {
  padding: 18.75rpx 0;
  background-color: #ffffff;
}
.pos_8 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
}
.text-wrapper {
  margin-right: 11.25rpx;
  padding: 26.25rpx 0;
  background-color: #ffb6b9;
  border-radius: 187.5rpx;
  width: 241.88rpx;
}
.text_5 {
  color: #ffffff;
  line-height: 27.43rpx;
}
@import url(../../../common/css/global.css);
</style>