<template>
	<!-- 导航栏 -->
	<view class=""
		style="padding:50rpx 20rpx 18rpx; box-sizing: border-box; position: fixed;top: 0; left: 0; width: 100vw; background-color: #fff; display: flex; align-items: center; justify-content: space-between;">
		<view class="" @click="Service.GoPageBack()">
			<up-icon name="arrow-left" size="32rpx"></up-icon>
		</view>
		<view class="">
			收入详情
		</view>
		<view class="" @click="Service.GoPage('/pages/my/myKF')" style="color: var(--nav-banbacor);">
			<image :src="Service.GetIconImg('/static/index/order/message.png')" style="width: 32rpx; height: 32rpx; "
				mode=""></image>
		</view>
	</view>
	<view class="" style="width: 100%; height: 100rpx; ">
	
	</view>
	 <view v-if="loading" class="skeleton-container">
	    <!-- 标题骨架屏 -->
	    <view class="skeleton-section-title"></view>
	    
	    <!-- 收入卡片骨架屏 -->
	    <view class="skeleton-card">
	      <view class="skeleton-row">
	        <view class="skeleton-order-id"></view>
	        <view class="skeleton-status"></view>
	      </view>
	      <view class="skeleton-row"  v-for="item in 3" >
	        <view class="skeleton-order-id" style="width: 30%;"  ></view>
	        <view class="skeleton-status"></view>
	      </view>
	      <view class="skeleton-total-row">
	        <view class="skeleton-total-label"></view>
	        <view class="skeleton-total-amount"></view>
	      </view>
	    </view>
	    
	    <!-- 配送信息标题骨架屏 -->
	    <view class="skeleton-section-title"></view>
	    
	    <!-- 订单信息卡片骨架屏 -->
	    <view class="skeleton-card">
	      <!-- 商家信息骨架屏 -->
	      <view class="skeleton-address-item">
	        <view class="skeleton-address-content">
	          <view class="skeleton-address-text">
	            <view class="skeleton-name"></view>
	            <view class="skeleton-address-line"></view>
	          </view>
	          <view class="skeleton-call-btn"></view>
	        </view>
	      </view>
	      
	      <!-- 用户信息骨架屏 -->
	      <view class="skeleton-address-item">
	        <view class="skeleton-address-content">
	          <view class="skeleton-address-text">
	            <view class="skeleton-name"></view>
	            <view class="skeleton-address-line"></view>
	          </view>
	          <view class="skeleton-call-btn"></view>
	        </view>
	      </view>
	      
	      <!-- 时间信息骨架屏 -->
	      <view class="skeleton-time"></view>
	    </view>
	    
	    <!-- 底部提示骨架屏 -->
	    <view class="skeleton-bottom-tip"></view>
	  </view>

	<!-- 实际内容 -->
	<view  class="order-detail-container">
		<view class="section-title" style="margin: 20rpx 0;" >订单信息</view>
		<!-- 订单收入信息卡片 -->
		<view class="income-card">
			<view class="income-header">
				<text class="order-id">订单 MT20251017123456</text>
				<text class="status">已到账</text>
			</view>

			<view class="income-details">
				<view class="income-item">
					<text class="income-type">配送费</text>
					<text class="income-amount blue">+¥5.50</text>
				</view>
				<view class="income-item">
					<text class="income-type">冲单奖</text>
					<text class="income-amount orange">+¥3.00</text>
				</view>
				<view class="income-item">
					<text class="income-type">恶劣天气补贴</text>
					<text class="income-amount green">+¥2.00</text>
				</view>
			</view>

			<view class="total-income">
				<text class="total-label">总计收入</text>
				<text class="total-amount">¥10.50</text>
			</view>
		</view>

		<!-- 订单信息卡片 -->
		<view class="section-title">配送信息</view>
		<view class="info-card">
			<!-- 商家信息 -->
			<view class="merchant-info">
				<view class="merchant-detail">
					<view class="merchant-text">
						<text class="merchant-name">张亮麻辣烫 (五道口店)</text>
						<text class="merchant-address">成府路28号</text>
					</view>
				</view>
				<view class="call-btn" @click="callMerchant">
					<up-icon name="phone"  color="var(--nav-mian)" size="28rpx"></up-icon>
					<text class="call-text">拨打商家</text>
				</view>
			</view>

			<!-- 用户信息 -->
			<view class="user-info">
				<view class="user-detail">
					<view class="user-text">
						<text class="user-name">张*</text>
						<text class="user-address">XX小区3栋502</text>
					</view>
				</view>
				<view class="call-btn" @click="callUser">
					<up-icon name="phone" color="var(--nav-mian)" size="28rpx"></up-icon>
					<text class="call-text">拨打用户</text>
				</view>
			</view>

			<!-- 订单时间信息 -->
			<view class="order-time-info">
				<text class="time-text">2025-10-17 18:30 下单 · 19:15 送达</text>
			</view>
		</view>

		<!-- 底部提示 -->
		<view class="bottom-tip">
			<text class="tip-text">收入明细如有疑问，请联系客服</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { Service } from '@/Service/Service'
	// 加载状态
	const loading = ref(true)


	// 拨打商家电话
	const callMerchant = () => {
		uni.makePhoneCall({
			phoneNumber: '13800138000'
		})
	}

	// 拨打用户电话
	const callUser = () => {
		uni.makePhoneCall({
			phoneNumber: '13900139000'
		})
	}

	onMounted(() => {
		// 模拟数据加载
		setTimeout(() => {
			loading.value = false
		}, 1500)
	})
</script>

<style scoped>
	

	/* 实际内容样式 */
	.order-detail-container {
		background-color: #f5f5f5;
		padding: 0 20rpx ;
	}

	/* 订单收入信息卡片 */
	.income-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.income-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.order-id {
		font-size: 32rpx;
		color: #333;
	}

	.status {
		font-size: 28rpx;
		color: #52c41a;
	}

	.income-details {
		margin-bottom: 20rpx;
	}

	.income-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.income-type {
		font-size: 28rpx;
		color: #666;
	}

	.income-amount {
		font-size: 32rpx;
		font-weight: 600;
	}

	.income-amount.blue {
		color: #1890ff;
	}

	.income-amount.orange {
		color: #fa8c16;
	}

	.income-amount.green {
		color: #52c41a;
	}

	.total-income {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.total-label {
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
	}

	.total-amount {
		font-size: 36rpx;
		color: #ff4d4f;
		font-weight: 700;
	}

	/* 订单信息卡片 */
	.info-card {
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 34rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 30rpx;
	}

	/* 商家信息 */
	.merchant-info {
		display: flex;
		align-items: baseline;
		margin-bottom: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.merchant-detail {
		flex: 1;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.merchant-text {
		flex: 1;
	}

	.merchant-name {
		display: block;
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.merchant-address {
		display: block;
		font-size: 26rpx;
		color: #666;
	}

	/* 用户信息 */
	.user-info {
		margin-bottom: 20rpx;
		display: flex;
		align-items: baseline;
	}

	.user-detail {
		flex: 1;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.user-text {
		flex: 1;
	}

	.user-name {
		display: block;
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.user-address {
		display: block;
		font-size: 26rpx;
		color: #666;
	}




	/* 拨打电话按钮 */
	.call-btn {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
	}

	.call-text {
		font-size: 24rpx;
		color: #1890ff;
		margin-left: 6rpx;
	}

	/* 订单时间信息 */
	.time-text {
		font-size: 26rpx;
		color: #999;
	}

	/* 底部提示 */
	.bottom-tip {
		text-align: center;
		margin-top: 30rpx;
	}

	.tip-text {
		font-size: 24rpx;
		color: #999;
	}
	.order-detail {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 订单状态样式 */
	.order-status {
		background-color: #fff;
		padding: 30rpx;
		text-align: center;
	}

	/* 订单基本信息样式 */
	.order-basic-info {
		background-color: #fff;
		margin: 20rpx 20rpx;
		padding: 30rpx;
		border-radius: 20rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.label {
		color: #666;
		margin-right: 10rpx;
	}

	.value {
		color: #333;
	}

	.value.highlight {
		color: var(--nav-diluted);
		font-weight: 500;
	}

	.value.price {
		color: var(--nav-diluted);
		font-weight: 700;
	}

	.clock-icon {
		color: #666;
		margin-right: 8rpx;
	}

	/* 地图区域样式 */
	.map-section {
		margin: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.map-placeholder {
		width: 100%;
		height: 400rpx;
		background-color: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		border: 1rpx solid #e8e8e8;
	}

	.map-placeholder::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, #f5f5f5 25%, #e6e6e6 25%, #e6e6e6 50%, #f5f5f5 50%, #f5f5f5 75%, #e6e6e6 75%, #e6e6e6 100%);
		background-size: 20rpx 20rpx;
		opacity: 0.3;
	}

	.map-hint {
		font-size: 28rpx;
		color: #666;
		position: relative;
		z-index: 1;
	}

	/* 地址区域样式 */
	.address-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 20rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: 800;
		color: #333;
		margin-bottom: 25rpx;
	}

	.address-content {
		position: relative;
	}

	.store-name,
	.user-name {
		font-size: 34rpx;
		font-weight: 600;
		margin-bottom: 15rpx;
		display: block;
	}

	.address {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		margin-bottom: 25rpx;
		display: block;
	}

	.pickup-code,
	.remark {
		font-size: 26rpx;
	}

	.code-label,
	.code-value {
		color: var(--nav-mian);
		font-weight: 600;
	}

	.remark-label,
	.remark-content {
		color: #faad14;
		font-weight: 600;
	}

	/* 底部按钮样式 */
	.bottom-action {
		background-color: #fff;
		width: 100vw;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 30rpx;
	}

	.confirm-btn {
		width: 100%;
		height: 90rpx;
		font-size: 32rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
	}
	/* 骨架屏样式 */
	.skeleton-container {
	  min-height: 100vh;
	  background-color: #f5f5f5;
	  padding: 0 20rpx 60rpx;
	}
	
	/* 标题骨架屏 */
	.skeleton-section-title {
	  width: 160rpx;
	  height: 34rpx;
	  background-color: #e6e6e6;
	  margin: 30rpx 0;
	  border-radius: 4rpx;
	  animation: shimmer 1.5s infinite;
	}
	
	/* 卡片骨架屏 */
	.skeleton-card {
	  background-color: #fff;
	  border-radius: 20rpx;
	  padding: 30rpx;
	  margin-bottom: 20rpx;
	}
	
	/* 收入卡片骨架屏 */
	.skeleton-row {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 20rpx;
	}
	
	.skeleton-order-id {
	  width: 60%;
	  height: 32rpx;
	  background-color: #e6e6e6;
	  border-radius: 4rpx;
	  animation: shimmer 1.5s infinite;
	}
	
	.skeleton-status {
	  width: 15%;
	  height: 28rpx;
	  background-color: #e6e6e6;
	  border-radius: 4rpx;
	  animation: shimmer 1.5s infinite;
	}
	
	.skeleton-line {
	  width: 100%;
	  height: 28rpx;
	  background-color: #e6e6e6;
	  margin-bottom: 20rpx;
	  border-radius: 4rpx;
	  animation: shimmer 1.5s infinite;
	}
	
	.skeleton-total-row {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding-top: 20rpx;
	  border-top: 1rpx solid #f0f0f0;
	}
	
	.skeleton-total-label {
	  width: 40%;
	  height: 30rpx;
	  background-color: #e6e6e6;
	  border-radius: 4rpx;
	  animation: shimmer 1.5s infinite;
	}
	
	.skeleton-total-amount {
	  width: 25%;
	  height: 36rpx;
	  background-color: #e6e6e6;
	  border-radius: 4rpx;
	  animation: shimmer 1.5s infinite;
	}
	
	/* 地址信息骨架屏 */
	.skeleton-address-item {
	  margin-bottom: 30rpx;
	  padding-bottom: 30rpx;
	  border-bottom: 1rpx solid #f0f0f0;
	}
	
	.skeleton-address-item:last-child {
	  margin-bottom: 20rpx;
	  padding-bottom: 0;
	  border-bottom: none;
	}
	
	.skeleton-address-content {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.skeleton-address-text {
	  flex: 1;
	}
	
	.skeleton-name {
	  width: 60%;
	  height: 30rpx;
	  background-color: #e6e6e6;
	  margin-bottom: 10rpx;
	  border-radius: 4rpx;
	  animation: shimmer 1.5s infinite;
	}
	
	.skeleton-address-line {
	  width: 80%;
	  height: 26rpx;
	  background-color: #e6e6e6;
	  border-radius: 4rpx;
	  animation: shimmer 1.5s infinite;
	}
	
	.skeleton-call-btn {
	  width: 150rpx;
	  height: 50rpx;
	  background-color: #e6e6e6;
	  border-radius: 25rpx;
	  animation: shimmer 1.5s infinite;
	}
	
	/* 时间信息骨架屏 */
	.skeleton-time {
	  width: 70%;
	  height: 26rpx;
	  background-color: #e6e6e6;
	  margin-top: 20rpx;
	  border-radius: 4rpx;
	  animation: shimmer 1.5s infinite;
	}
	
	/* 底部提示骨架屏 */
	.skeleton-bottom-tip {
	  margin: 0 100rpx;
	  height: 24rpx;
	  background-color: #e6e6e6;
	  margin-top: 30rpx;
	  border-radius: 4rpx;
	  animation: shimmer 1.5s infinite;
	  opacity: 0.6;
	}
	
	/* 骨架屏动画 */
	@keyframes shimmer {
	  0% {
	    background-position: -1000px 0;
	  }
	  100% {
	    background-position: 1000px 0;
	  }
	}
	
	/* 为骨架屏元素添加渐变背景 */
	.skeleton-section-title,
	.skeleton-order-id,
	.skeleton-status,
	.skeleton-line,
	.skeleton-total-label,
	.skeleton-total-amount,
	.skeleton-name,
	.skeleton-address-line,
	.skeleton-call-btn,
	.skeleton-time,
	.skeleton-bottom-tip {
	  background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	  background-size: 1000px 100%;
	}
</style>