<template>
	<view class="flex-col justify-start page">
	  <view class="flex-col section">
	    <view class="flex-row justify-between group">
	      <view class="flex-row items-end">
	        <image
	          class="image"
	          :src="productInfo.goodImg"
	        />
	        <view class="flex-col items-start relative group_2 ml-13">
	          <view class="group_3">
	            <text class="font text_2">￥</text>
	            <text class="text">{{ productInfo.price }}</text>
	          </view>
	          <text class="font_2 text_3">请选择</text>
	          <!-- <text class="font_2 pos_2">数量：20</text> -->
	          <text class="font_2 pos">场次</text>
	        </view>
	      </view>
	      <image
	        class="self-start image_2"
	        src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FTZQhzAYT-close.png"
	      />
	    </view>
	    <view class="flex-col mt-2">
	      <view class="flex-col">
	        <view class="flex-row justify-between items-center section_2">
	          <text class="font text_4">参加日期：2024年11月</text>
	          <text class="font_2 text_5">当前预约人数：10</text>
	        </view>
	        <view class="flex-col group_4 mt-5">
	          <view class="flex-col self-stretch group_5"> 
	            <text class="self-start font_3 text_6">选择预约时间</text>
	            <view class="flex-col justify-start self-stretch view mt-14">
	              <scroll-view class="group_10" :scroll-x="true">
	                <view class="flex-row justify-between items-baseline">
	                  <text :style="{color: textColor[index]}" class="font_4 text_7" v-for="(item, index) in items" :key="index" @click="choose(index)">
											今天12-09
										</text>
	                </view>
	              </scroll-view>
	            </view>
	          </view>
	          <view class="flex-row self-center relative grid">
	            <view class="flex-col justify-start grid-item pos_1">
	              <view class="section_4"></view>
	              <text class="font_5 text_11 pos_3">10:00-12:00</text>
	              <text class="font_3 pos_5">可预约</text>
	            </view>
	            <view class="flex-col justify-start grid-item_2 pos_14">
	              <view class="section_4"></view>
	              <text class="font_5 pos_4">12:00-14:00</text>
	              <text class="font_3 pos_6">可预约</text>
	            </view>
	            <view class="flex-col justify-start items-center grid-item_3 pos_15">
	              <text class="font_3">可预约</text>
	              <view class="flex-col justify-start items-center text-wrapper pos_7">
	                <text class="font_5">14:00-16:00</text>
	              </view>
	            </view>
	            <view class="flex-col justify-start grid-item_2 pos_11">
	              <view class="section_4"></view>
	              <text class="font_5 pos_8">16:00-18:00</text>
	              <text class="font_3 pos_9">可预约</text>
	            </view>
	          </view>
	          <view class="flex-col justify-start self-stretch group_6">
	            <view class="flex-row justify-between section_5">
	              <text class="font_3 text_12">预约时间</text>
	              <view class="flex-row items-center group_7">
	                <text class="font_5">2024-12-09</text>
	                <text class="font_5 ml-22">暂未选择</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col items-start self-stretch section_6">
	            <text class="font">购买须知：本次课程活动最少需要到</text>
	            <text class="font">达5人才能进行授课</text>
	          </view>
	        </view>
	      </view>
	      <view class="flex-col justify-start items-center section_7">
	        <view class="flex-row section_8">
	          <text class="font_4 text_13">加入购物车</text>
	          <!-- <text class="font_4 text_14 ml-21">买</text> -->
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
import { baseUrl } from '../../../api/request';
const cookie = wx.getStorageSync("cookie")  //请求头
const items = ref([null,null,null,null,null,null,null])
const father = defineProps(['pid'])
const pid = ref(0)  //商品id
const productInfo = ref({})  //商品对象
const bookTimeList = ref([])  //时间段数组
const textColor = ref(['#000', '#000', '#000', '#000', '#000', '#000', '#000'])
onLoad((options)=>{
})
onMounted(()=>{
	// console.log('onMounted--->',father.pid);
	getProduct()
})
const choose =(index)=>{}
const getProduct = async ()=>{
	pid.value = father.pid  //父组件传来的商品id
	const res = await uni.request({
		url: baseUrl + '/goods/service/list/id',
		method: 'POST',
		data:{ id: pid.value },
		header: { cookie }
	})
	console.log('后端传来的商品信息--->',res.data.data);
	if(res.data.code === 1 ) {
		productInfo.value = res.data.data
		bookTimeList.value = res.data.data.appointmentDateVOList 
	}
	console.log('商品信息--->',productInfo.value);
	console.log('时间段信息--->',bookTimeList.value);
}
</script>

<style lang="scss" scoped>
.ml-13 {
  margin-left: 24.38rpx;
}
.mt-5 {
  margin-top: 9.38rpx;
}
.ml-21 {
  margin-left: 39.38rpx;
}
.page {
  padding-bottom: 18.75rpx;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  padding: 28.13rpx 0;
  background-color: #ffffff;
  border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;
}
.group {
  padding: 0 30rpx;
}
.image {
  border-radius: 5.63rpx;
  width: 195rpx;
  height: 204.38rpx;
}
.group_2 {
  margin-bottom: 5.29rpx;
  padding-bottom: 28.86rpx;
  width: 157.8rpx;
}
.group_3 {
  margin-left: 17.51rpx;
  line-height: 29.7rpx;
}
.font {
  font-size: 37.5rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 45rpx;
  color: #323232;
}
.text_2 {
  color: #c35c5d;
  line-height: 24.17rpx;
}
.text {
  color: #c35c5d;
  font-size: 45rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 29.7rpx;
}
.font_2 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 31.88rpx;
  color: #818181;
}
.text_3 {
  margin-top: 21.26rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  bottom: 0;
}
.pos {
  position: absolute;
  right: 0;
  bottom: 28.03rpx;
}
.image_2 {
  margin-right: 20.63rpx;
  margin-top: 5.63rpx;
  width: 37.5rpx;
  height: 37.5rpx;
}
.section_2 {
  padding: 30.53rpx 21.86rpx 30.36rpx;
  background-color: #ffffff;
  border-radius: 28.13rpx;
}
.text_4 {
  color: #000000;
  line-height: 36.62rpx;
}
.text_5 {
  margin-right: 16.14rpx;
  line-height: 25.43rpx;
}
.group_4 {
  padding: 0 20.63rpx 35.63rpx;
}
.group_5 {
  padding: 31.76rpx 7.5rpx 0;
  border-top: solid 1.88rpx #d9d9d9;
}
.font_3 {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 27.07rpx;
  color: #000000;
}
.text_6 {
  line-height: 28.01rpx;
}
.view {
  margin-right: 7.5rpx;
  padding: 35.98rpx 0 35.87rpx 20rpx;
  background-color: #faddde;
  border-radius: 18.75rpx;
}
.group_10 {
  // margin-left: 11.78rpx;
  margin-right: 14.83rpx;
}
.font_4 {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 27.07rpx;
  color: #c35c5d;
}
.text_7 {
	// border: 1px solid red;
	margin-right: 20rpx;
  line-height: 27.3rpx;
}
.grid {
  margin-top: 75rpx;
  width: 605.63rpx;
  height: 228.75rpx;
}
.grid-item {
  background-color: #fbdedf;
  border-radius: 18.75rpx;
  background-image: url('https://ide.code.fun/api/image?token=67582be6797f850011f1edb7&name=5f9759dd4fc5b6049913f513ad7248f2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 253.13rpx;
}
.pos_1 {
  position: absolute;
  left: 3.75rpx;
  top: 0;
}
.section_4 {
  background-image: url('https://ide.code.fun/api/image?token=67582be6797f850011f1edb7&name=5f9759dd4fc5b6049913f513ad7248f2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 90rpx;
}
.font_5 {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 20.04rpx;
  color: #000000;
}
.text_11 {
  width: 150rpx;
}
.pos_3 {
  position: absolute;
  left: 50%;
  top: 16.99rpx;
  transform: translateX(-50%);
}
.pos_5 {
  position: absolute;
  left: 74.53rpx;
  bottom: 12.06rpx;
}
.grid-item_2 {
  background-color: #ffffff;
  border-radius: 18.75rpx;
  background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVQSWQJrq-selectbox.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 253.13rpx;
}
.pos_14 {
  position: absolute;
  right: 0;
  top: 0;
}
.pos_4 {
  position: absolute;
  right: 42.83rpx;
  top: 20.74rpx;
}
.pos_6 {
  position: absolute;
  left: 50%;
  bottom: 13.93rpx;
  transform: translateX(-50%);
}
.grid-item_3 {
  padding: 54.62rpx 0 8.31rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
  width: 253.13rpx;
}
.pos_15 {
  position: absolute;
  left: 0;
  top: 138.75rpx;
}
.text-wrapper {
  padding: 22.61rpx 0 47.34rpx;
  background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVQSWQJrq-selectbox.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 256.88rpx;
}
.pos_7 {
  position: absolute;
  left: 3.75rpx;
  right: -7.5rpx;
  top: 0;
}
.pos_11 {
  position: absolute;
  right: 0;
  top: 138.75rpx;
}
.pos_8 {
  position: absolute;
  right: 39.67rpx;
  top: 18.86rpx;
}
.pos_9 {
  position: absolute;
  left: 50%;
  bottom: 8.31rpx;
  transform: translateX(-50%);
}
.group_6 {
  margin-top: 97.5rpx;
  padding-bottom: 9.38rpx;
  border-bottom: solid 1.88rpx #d9d9d9;
}
.section_5 {
  margin-left: 22.5rpx;
  margin-right: 11.27rpx;
  padding: 12.66rpx 14.42rpx 27.9rpx;
  background-color: #ffffff;
}
.text_12 {
  line-height: 28.01rpx;
}
.group_7 {
  margin-right: 13.74rpx;
}
.section_6 {
  margin: 43.13rpx 46.88rpx 0 41.25rpx;
  padding: 25.28rpx 6.62rpx 38.19rpx 12.13rpx;
  background-color: #fff2f2f5;
  border-radius: 18.75rpx;
}
.section_7 {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	// border: 1px solid red;
  margin-left: 7.5rpx;
  margin-right: 5.63rpx;
  padding: 16.88rpx 0;
  background-color: #ffffff;
}
.section_8 {
  padding: 26.14rpx 0 25.07rpx;
  background-color: #fbdedf;
  border-radius: 46.88rpx;
  width: 618.75rpx;
}
.text_13 {
  margin-left: 240.94rpx;
  line-height: 27.54rpx;
}
.text_14 {
  line-height: 27.54rpx;
}
@import url(../../../common/css/global.css);
</style>