<template>
	<view class="flex-col justify-start relative page">
	  <view class="shrink-0 section"></view>
	  <view class="flex-col section_2 pos">
	    <view class="flex-row justify-between group">
	      <view class="flex-col justify-start items-center text-wrapper" @click="changeState(0)">
			<text class="font text">全部</text>
			<view class="flex-col justify-start items-center" v-if="isShow[0]" style="border: 1.88rpx solid #E79EA1; width: 90rpx; margin-top: 5rpx;"></view>
			</view> 
	      <view class="flex-col justify-start" @click="changeState(1)">
			  <text class="font text_2">待拍摄</text> 
			  <view class="flex-col justify-start items-center" v-if="isShow[1]" style="border: 1.88rpx solid #E79EA1; width: 90rpx; margin-top: 5rpx;"></view>
		  </view>
	      <view class="flex-col justify-start" @click="changeState(2)">
			  <text class="font text_3">已付款</text>
			  <view class="flex-col justify-start items-center" v-if="isShow[2]" style="border: 1.88rpx solid #E79EA1; width: 90rpx; margin-top: 5rpx;"></view>
		  </view>
	    </view>
	    <!-- <view class="flex-col justify-start items-center group_2"><view class="section_3"></view></view> -->
	  </view>
	  <view class="flex-col pos_2">
	    <view class="flex-col mt-20 list-item" v-for="(item, index) in items" :key="index">
	      <view class="flex-col">
	        <view class="flex-row items-center group_3" style="display: flex; justify-content: space-between; align-items: center;">
				
			<view style="display: flex; align-items: center; height: 30rpx;">
	          <view class="group_4">
	            <text class="font_2">订单号</text>
	            <text class="font_3 text_4">：</text>
	          </view>
	          <view><text class="font_4 text_5">E20241005095840091406189</text></view>
			</view>
			
			<view>
	          <text class="font_5 text_6">{{ formattedTime }}</text>
	          <text class="font_6 text_7">待拍摄</text>
			</view>
			
	        </view>
	        <view class="flex-row group_5">
	          <image
	            class="image"
	            src="https://ide.code.fun/api/image?token=67bfb6134ae84d0012276837&name=1c1a8926b9cbd08850c51818af39ae2b.png"
	          />
	          <view class="flex-col items-start flex-1 group_6 ml-19">
	            <text class="font_7 text_8">汉服—曲裾系列</text>
	            <text class="font_8 mt-43">￥138.00</text>
	          </view>
	        </view>
	      </view>
	      <view class="flex-col mt-17">
	        <view class="flex-col section_4">
	          <text class="self-start font_7 text_9">预约信息</text>
	          <view class="mt-8 flex-col self-stretch">
	            <text class="self-start font_7 text_10">预约门店：哈尔滨师范大学</text>
	            <view class="flex-row justify-between items-center self-stretch group_7">
	              <text class="font_7 text_11">到店时间：2025-03-10 16:00</text>
	              <image
	                class="image_2"
	                src="https://ide.code.fun/api/image?token=67bfb6134ae84d0012276837&name=d52c7b6dae8656c06b3be0bbcd17f959.png"
					@click="nav"
	              />
	            </view>
	            <view class="flex-row justify-between items-baseline self-stretch">
	              <text class="font_9">拍摄人数：1人</text>
	              <text class="font_10 text_12" @click="nav">导航</text>
	            </view>
	          </view>
	          <text class="mt-8 self-start font_7 text_13">拍摄场地：室外</text>
	        </view>
	        <view class="flex-row justify-end items-center group_8">
	          <text class="font_2 text_14">实付款：</text>
	          <text class="font_8">￥138.00</text>
	        </view>
	        <view class="flex-row justify-center group_9">
	          <view class="flex-col justify-start items-center text-wrapper_2">
	            <text class="font_6 text_15">联系客服</text>
	          </view>
	          <view class="ml-10 flex-col justify-start items-center text-wrapper_2" @click="openCancelBookingOrderPopup">
	            <text class="font_6">取消订单</text>
	          </view>
	          <view class="ml-10 flex-col justify-start items-center text-wrapper_3">
	            <text class="font_11 text_16">去付款</text>
	          </view>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
	
	<uni-popup ref="cancelBookingOrder" :maskClick="true" :animation="false">
		<view class="cancel-booking-order">
			<cancelOrderVue></cancelOrderVue>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import {computed, nextTick, onMounted, onUnmounted, ref} from 'vue'
    import emitter from '../../../utils/emitter';
	import cancelOrderVue from '../component/cancelOrder.vue';
	const items = ref([null, null, null])
	const isShow = ref([true, false, false])
	const cancelBookingOrder = ref(null)
	
	
	
	
	
	onMounted(() => {
		startCountdown()
		emitter.on('closeCancelOrderPopup', () => {
			nextTick(() => {
				if (cancelBookingOrder.value) {
					cancelBookingOrder.value.close()
				}
			})
		})
	})
	
	
	onUnmounted(() => {
		if (timer) {
			clearInterval(timer)
		}
	})
	
	let timer = null;
	   // 尝试从 localStorage 获取上次保存的倒计时时间
	    const savedTime = wx.getStorageSync('remainingTime');
	    const remainingTime = ref(savedTime ? parseInt(savedTime) : 1800); // 30分钟 (1800秒)
	
	 // 计算分钟和秒
	    const formattedTime = computed(() => {
	      const minutes = Math.floor(remainingTime.value / 60);
	      const seconds = remainingTime.value % 60;
	      return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
	    });
	
	   const startCountdown = () => {
	      // 每秒更新一次倒计时
	      timer = setInterval(() => {
	        if (remainingTime.value > 0) {
	          remainingTime.value--;
			   wx.setStorageSync('remainingTime', remainingTime.value.toString());
	        } else {
	          cancelOrder(); // 倒计时结束，取消订单
	        }
	      }, 1000);
	    };
	
	    const cancelOrder = () => {
	      // 这里调用取消订单的接口
	      // 假设 cancelOrderApi 是一个取消订单的请求
	      console.log('订单已取消'); // 实际取消订单的代码
		  wx.removeStorageSync('remainingTime');
	      clearInterval(timer); // 清除定时器
	    };
	
	
	
	const openCancelBookingOrderPopup = () => {
		cancelBookingOrder.value.open('center')
	}
	
	
	
	
	const changeState = (index:any) => {
		if (!isShow.value[index]) {
			for (var i = 0; i < 3; i ++ ) {
				if (i == index) {
					isShow.value[i] = true
				} else {
					isShow.value[i] = false
				}
			}
		}
	}
	
	const nav = () => {
		wx.openLocation({
			latitude: 45.867741,
			longitude: 126.560037,
			name: '哈尔滨师范大学(松北校区)',
			address: '黑龙江省哈尔滨市呼兰区利民经济开发区师大路1号',
			success: (res) => {
			console.log(res)
			}
		})
	}
	
</script>

<style scoped lang="scss">
.cancel-booking-order {
	// height: 800rpx;
	margin-top: -150rpx;
}
.ml-19 {
  margin-left: 35.63rpx;
}
.mt-43 {
  margin-top: 80.63rpx;
}
.mt-17 {
  margin-top: 31.88rpx;
}
.page {
  background-color: #ffffff;
  overflow: hidden;
  background-image: url('https://ide.code.fun/api/image?token=67bfb6134ae84d0012276837&name=629e4a3490be730bb94900bbb4f3ab0a.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=67bfb6134ae84d0012276837&name=629e4a3490be730bb94900bbb4f3ab0a.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 750rpx;
  height: 100vh;
}
.section_2 {
  padding-left: 80.63rpx;
  padding-right: 71.25rpx;
  background-color: #EBE7E4;
}
.pos {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
}
.group {
  padding: 13.75rpx 0 0rpx;
}
.text-wrapper {
  width: 91.88rpx;
}
.font {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  color: #000000;
}
.text {
  line-height: 48.48rpx;
}
.text_2 {
  line-height: 48.24rpx;
}
.text_3 {
  line-height: 47.43rpx;
}
.group_2 {
  // border-left: solid 99.38rpx #e79ea1;
  // border-right: solid 99.38rpx #e79ea1;
}
.section_3 {
  background-color: #e79ea1;
  width: 99.38rpx;
  height: 5.63rpx;
}
.pos_2 {
  position: absolute;
  left: 37.5rpx;
  right: 37.5rpx;
  top: 112.5rpx;
}
.list-item {
  padding: 22.5rpx 0 22.5rpx;
  background-color: #fffcfa;
  border-radius: 18.75rpx;
}
.list-item:first-child {
  margin-top: 0;
}
.list-item:last-child {
  margin-bottom: 50rpx;
}
.group_3 {
  padding: 0 15rpx 18.75rpx;
  border-bottom: solid 1.88rpx #dbdbdb;
}
.group_4 {
  line-height: 25.84rpx;
  height: 25.84rpx;
}
.font_2 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 25.84rpx;
  color: #323232;
}
.font_3 {
  font-size: 26.25rpx;
  font-family: Open Sans;
  line-height: 17.53rpx;
  color: #323232;
}
.text_4 {
  line-height: 16.8rpx;
}
.font_4 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 17.53rpx;
  color: #323232;
}
.text_5 {
  font-size: 28.13rpx;
  line-height: 25.84rpx;
}
.font_5 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 17.53rpx;
  color: #e79ea1;
}
.text_6 {
  // margin-left: 45rpx;
}
.font_6 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 25.84rpx;
  color: #e79ea1;
}
.text_7 {
  margin-left: 3.75rpx;
  line-height: 24.71rpx;
}
.group_5 {
  padding: 15rpx 15rpx 0;
}
.image {
  width: 120rpx;
  height: 133.13rpx;
}
.group_6 {
  margin-bottom: 3.75rpx;
}
.font_8 {
  font-size: 33.75rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 22.54rpx;
  color: #e79ea1;
}
.section_4 {
  margin: 0 22.5rpx;
  padding: 22.5rpx 18.75rpx;
  background-color: #f4f4f4;
  border-radius: 9.38rpx;
}
.font_7 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 25.84rpx;
  color: #000000;
}
.text_9 {
  font-size: 28.13rpx;
  line-height: 26.25rpx;
}
.text_8 {
  font-size: 28.13rpx;
  line-height: 27.36rpx;
}
.text_10 {
  line-height: 25.33rpx;
}
.group_7 {
  margin-top: 3.75rpx;
}
.text_11 {
  line-height: 24.51rpx;
}
.image_2 {
  // margin-right: 7.5rpx;
  width: 45rpx;
  height: 45rpx;
}
.font_9 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 23.79rpx;
  color: #000000;
}
.font_10 {
  font-size: 22.5rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 21.09rpx;
  color: #000000;
}
.text_12 {
  margin-right: 3.75rpx;
}
.text_13 {
  line-height: 24.21rpx;
}
.group_8 {
  padding: 30rpx 22.5rpx 22.5rpx;
  border-bottom: solid 1.88rpx #dbdbdb;
}
.text_14 {
  font-size: 28.13rpx;
  line-height: 26.7rpx;
}
.group_9 {
  padding: 20.63rpx 22.5rpx 0 150rpx;
}
.text_15 {
  line-height: 25.54rpx;
}
.text-wrapper_2 {
  padding: 15rpx 0;
  background-color: #ffffff;
  border-radius: 75rpx;
  width: 153.75rpx;
  height: 56.25rpx;
  border-left: solid 1.88rpx #e79ea1;
  border-right: solid 1.88rpx #e79ea1;
  border-top: solid 1.88rpx #e79ea1;
  border-bottom: solid 1.88rpx #e79ea1;
}
.text-wrapper_3 {
  padding: 15rpx 0;
  background-color: #e79ea1;
  border-radius: 75rpx;
  width: 153.75rpx;
  height: 56.25rpx;
}
.font_11 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 25.84rpx;
  color: #ffffff;
}
.text_16 {
  line-height: 24rpx;
}

/* 去掉滚动条样式 */
::-webkit-scrollbar {
  display: none;
}
@import url(../../../common/css/global.css);
</style>
