<style lang="scss" scoped>
@import url("@/asset/css/flex.css");
.showModalBox{
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	letter-spacing: 2rpx;
}
.showModalImg{
	width: 750rpx;
	height: 400rpx;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
}
.showModalCenterBox{
	width: 100%;
	height: 100%;
	margin-top: 40rpx;
	background: #FFFDFE;
	border-radius: 18rpx;
}
.showModalCenter{
	position: relative;
	z-index: 2;
	padding: 60rpx 52rpx 85rpx 52rpx;
}
.showModalCTitle text{
	font-size: 42rpx;
}
.showModalCTitle text:first-child{
	font-weight: bold;
}
.showModalCTitle text:last-child{
	font-size: 32rpx;
	margin-top: 22rpx;
}
.showModalCTisp{
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#F9E8ED), to(#F7F7F7));
	border-radius: 14rpx 14rpx 14rpx 14rpx;
	padding: 52rpx 40rpx 40rpx 40rpx;
	margin-top: 47rpx;
	
}
.showModalTisp{
	margin-bottom: 34rpx;
	font-size: 32rpx;
	line-height: 50rpx;
}
.showModalTisp text{
	font-weight: bold;
	text-decoration: underline;
}
.showModalCTNK{
	margin-top: 28rpx;
	font-size: 36rpx;
	font-family: PingFang-SC, PingFang-SC;
	font-weight: bold;
}
.showModalCTNK text:first-child{
	color: #FF3367;
}
.showModalCTNK text:last-child{
	
}
.showModalTime{
	font-size: 36rpx;
	color: #BCBCBC;
	margin-top: 26rpx;
	margin-bottom: 50rpx;
	text-align: center;
}
.showModalTime.active{
	color: #000;
}
.showModalBott{
	width: 300rpx;
	height: 98rpx;
	line-height: 98rpx;
	border-radius: 98rpx;
	text-align: center;
	background: #000;
	color: #fff;
	font-size: 32rpx;
}
.showModalBott:last-child{
	color: #FF3367;
}
.showModalBott.active{
	background: #BCBCBC;
	color: #757776;
}
.showModalSel{
	color: #FF3367;
	font-size: 28rpx;
	text-align: center;
	margin-top: 32rpx;
	margin-bottom: 20rpx;
}
.showModalSelBox{
	text-align: center;
}
.showModalSBottom{
	display: inline-block;
	background: #FEEEF2;
	padding: 5rpx 25rpx 8rpx 25rpx;
	border: 1px solid #746E70;
	color: #131414;
	font-size: 28rpx;
	border-radius: 30rpx;
	font-family: PingFang-SC, PingFang-SC;
	font-weight: 500;
}
.showModalSBottom img{
	width: 30rpx;
	height: 30rpx;
	margin-right: 10rpx;
	position: relative;
	top: 6rpx;
}
.showModalSBottom text{
	margin-left: 10rpx;
}
</style>
<template>
    <view class="showModalInfo">
        <u-popup v-model="showModal" 
		mode="bottom" 
		border-radius="18" 
		background-color="#000" 
		:mask-close-able="false">
		 	<view class="showModalBox">
				<img class="showModalImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/cancelTispTY.png"/>
		 		<view class="showModalCenterBox">
					<view class="showModalCenter">
						<view class="showModalCTitle column">
							<Text>取消需服务审批</Text>
							<text>按标准扣除必要的费用</text>
						</view>
						<view class="showModalCTisp">
							<template v-if="CancelPolicy">
								<view class="showModalTisp">
									旅游者在<text>行程开始前提出解除合同，</text>
									将按下列标准扣除必要的费用：
								</view>
								<view class="showModalCTNK column">
									<Text>行程开始前</Text>
									<Text style="max-height: 300rpx;overflow-y: scroll;">
										{{ CancelPolicy!='暂无'?CancelPolicy:'以实际退款为准' }}
									</Text>
								</view>
							</template>
							<template v-else>
								<view class="showModalTisp">
									旅游者在<text>行程开始前7日以内提出解除合同，</text>
									将按下列标准扣除必要的费用：
								</view>
								<view class="showModalCTNK column">
									<Text>行程开始前6日至4日</Text>
									<Text>按旅游费用总额的20%</Text>
								</view>
								<view class="showModalCTNK column">
									<Text>行程开始前3日至1日</Text>
									<Text>按旅游费用总额的40%</Text>
								</view>
								<view class="showModalCTNK column">
									<Text>行程开始当日</Text>
									<Text>按旅游费用总额的60%</Text>
								</view>
							</template>
							
						</view>
						<view class="showModalTime"
						:class="[!submitCancel?'active':'']">请仔细阅读条款<template v-if="submitCancel">{{remainingTime}}s</template>后确认</view>
						<view class="row-sb-n  showModalBottom">
							<view class="showModalBott" @click="cancel">
								<Text>关闭</Text>
							</view>
							<view class="showModalBott" @click="confirm"
							:class="[submitCancel?'active':'']">
								<Text>确定取消</Text>
							</view>
						</view>
						<view class="showModalSel">紧急情况请联系服务人员</view>
						<view class="showModalSelBox">
							<view class="showModalSBottom row" @click="goConnection">
								<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/ServiceTelephoneZK.png"/>
								<text>{{ erpBaseInfo.emName }}</text>
							</view>
						</view>
					</view>
				</view>
		 	</view>
		 </u-popup>
    </view>
</template>
<script>
export default {
    props:['showModal','orderNo','type','CancelPolicy'], 
    data(){
			return{
                Cancelmsg:{
                    Remark: ''
                },
				submitCancel: true,
				erpBaseInfo: null,
				remainingTime: 10, // 初始倒计时时间（秒）
				timerId: null,     // 定时器ID
				isRunning: false,   // 状态标识（防止重复启动）
            }
    },
	watch: {
		// CancelPolicy: {
		// 	handler(newVal, oldVal) {
				
		// 	},
		// 	deep: false,
		// 	immediate: true
		// }	
	},
	created() {
		this.erpBaseInfo = uni.getStorageSync("b2b_user").erpBaseInfo
	},
	mounted() {
		setTimeout(() => {
			this.startCountdown()
		}, 50)
    },
    methods:{
		startCountdown() {
			if (this.isRunning) return;
			this.isRunning = true;
			this.timerId = setInterval(() => {
				this.remainingTime--;
				if (this.remainingTime <= 0) {
					clearInterval(this.timerId);
					this.isRunning = false;
					this.submitCancel = false; // 时间耗尽回调
				}
			}, 1000);
		},
		goConnection(){
			uni.makePhoneCall({
				phoneNumber: this.erpBaseInfo.imAccount
			});
		},
        cancel(){
			clearInterval(this.timerId);
			this.isRunning = false;
            this.$emit('cancel')
        },
        confirm(){
			let that = this
			if(this.submitCancel) return
			uni.showLoading({
				title: "取消中...",
			});
            that.submitCancel = true
			that.apipost(
				"GetCancelOrder_post", {
					OrderNo: this.orderNo,
				},
				(res) => {
					uni.hideLoading()
					that.submitCancel = false
					that.cancel()
					if (res.resultCode == 1) {
						uni.showToast({
							title: "操作成功",
							icon: "success",
						});
						if(that.type) that.$emit('success');
						else uni.navigateTo({
								url: `/pages/AggregateOrders/AggregateOrdersList?OrderStatus=5`,
							});
					}
				},
				(err) => {
					uni.hideLoading()
					uni.showToast({
						title: err.message,
						icon: "none",
					});
					that.submitCancel = false
				}
			);	
        }
    },
}
</script>