<template>
	<view class="contact-support-page">
		<!-- 全新方案：纯 CSS 手动构建的骨架屏 -->
		<view v-if="loading" class="skeleton-wrapper">
			<view class="skeleton-card">
				<view  style="padding: 40rpx 0; ">
					<view class="skeleton-item skeleton-text" style="width: 100%; height: 60rpx;"></view>
				</view>
			</view>
			
		</view>

		<!-- 页面实际内容 -->
		<view v-else class="page-content">

			<view class="page-container">
				<view class="card emergency-card" @click="callEmergency">
					<view class="emergency-title">
						<up-icon name="phone-fill" color="#fa6400" size="18"></up-icon>
						<text>紧急问题？直接拨打人工客服</text>
					</view>
					<text class="phone-number">{{ phone }}</text>
					<text class="service-time">9:00-22:00</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { Service, CNRiderLoginService } from "@/Service/CN/CNRiderLoginService";
	const loading = ref<boolean>(true);

	let phone=ref('')
	
	onLoad(() => {
		getData()
	});
	onShow(() => { });
	
	const getData=()=>{
		
		CNRiderLoginService.GetKefuInfo().then(res=>{
			loading.value = false;
			
			if(res.code==0){
				phone.value=res.data.phone
			}
			
		})
	}
		
	
	const callEmergency = () => {
		uni.makePhoneCall({
			phoneNumber: phone.value
		});
	};	
	
</script>

<style lang="scss" scoped>
	@keyframes skeleton-blink {
		0% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0 50%;
		}
	}

	.skeleton-item {
		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		animation: skeleton-blink 1.5s infinite linear;
	}

	.skeleton-rect {
		border-radius: 12rpx;
	}

	.skeleton-text {
		border-radius: 4rpx;
	}

	.skeleton-wrapper {
		padding: 24rpx;
		background-color: #f7f7f7;

		.skeleton-card {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
		}
	}

	.contact-support-page {
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	.page-container {
		padding: 24rpx;
	}

	.card {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
	}

	.section {
		.section-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
			display: block;
		}
	}

	.notice-box {
		display: flex;
		align-items: center;
		gap: 16rpx;
		border-radius: 16rpx;
		padding: 24rpx;
		font-size: 26rpx;

		&.info-box {
			background-color: #ecf5ff;
			color: #40a9ff;
		}
	}

	.menu-list {
		padding: 0 30rpx;

		:deep(.up-cell-group) {
			.up-cell {
				.up-cell__body {
					padding: 28rpx 0;
				}
			}
		}

		.cell-title {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;

			.title {
				font-size: 30rpx;
				color: #333;
			}

			.desc {
				font-size: 24rpx;
				color: #999;
				margin-top: 4rpx;
			}
		}
	}

	.emergency-card {
		background-color: #ffffff;
		text-align: center;
		padding: 30rpx;

		.emergency-title {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			font-size: 28rpx;
			color: #fa6400;
			font-weight: 500;
		}

		.phone-number {
			display: block;
			font-size: 44rpx;
			font-weight: bold;
			color: #333;
			margin: 16rpx 0;
		}

		.service-time {
			font-size: 26rpx;
			color: #999;
		}
	}
</style>