<template>
	<!-- 骨架屏 -->
	<view v-if="loading" class="skeleton-container">
		<!-- 骨架屏订单状态 -->
		<view class="skeleton-status"></view>

		<!-- 骨架屏订单基本信息 -->
		<view class="skeleton-basic-info">
			<view class="skeleton-row">
				<view class="skeleton-info-half"></view>
				<view class="skeleton-info-half skeleton-right"></view>
			</view>
			<view class="skeleton-line"></view>
			<view class="skeleton-line"></view>
			<view class="skeleton-line"></view>
			<view class="skeleton-row">
				<view class="skeleton-info-third"></view>
				<view class="skeleton-info-btn"></view>
			</view>
		</view>

		<!-- 骨架屏物品清单 -->
		<view class="skeleton-basic-info">
			<view class="skeleton-row">
				<view class="" style="width: 45%;height: 40rpx;border-radius: 4rpx;animation: shimmer 1.5s infinite;">
					<view class="" style="background-color: #e6e6e6; width: 60%;height: 40rpx; ">

					</view>
				</view>
				<view class="skeleton-info-half skeleton-right"></view>
				<view class="skeleton-info-half skeleton-right"></view>
			</view>
			<view class="skeleton-row" v-for="(item,index) in 3" :key="index">
				<view class="" style="width: 45%;height: 40rpx;border-radius: 4rpx;animation: shimmer 1.5s infinite;">
					<view class="" style="background-color: #e6e6e6; width: 90%;height: 40rpx; ">

					</view>
				</view>
				<view class="skeleton-info-half skeleton-right"></view>
				<view class="skeleton-info-half skeleton-right"></view>
			</view>
			<view class="skeleton-list-status"></view>
		</view>

		<!-- 骨架屏地图区域 -->
		<view class="skeleton-map"></view>

		<!-- 骨架屏取餐地址 -->
		<view class="skeleton-address">
			<view class="skeleton-title"></view>
			<view class="skeleton-store-name"></view>
			<view class="skeleton-address-line"></view>
			<view class="skeleton-btn"></view>
			<view class="skeleton-code"></view>
		</view>

		<!-- 骨架屏送餐地址 -->
		<view class="skeleton-address">
			<view class="skeleton-title"></view>
			<view class="skeleton-store-name"></view>
			<view class="skeleton-address-line"></view>
			<view class="skeleton-btn"></view>
			<view class="skeleton-remark"></view>
		</view>

		<!-- 骨架屏底部按钮 -->
		<view class="skeleton-bottom">
			<view class="skeleton-bottom-btn"></view>
		</view>
	</view>
	<!-- 实际内容 -->
	<view v-else class="order-detail">
		<!-- 订单状态 -->
		<view class="order-status"
			:style="{ 'background-color':orderStatus==0?'#E6F7FF':(orderStatus==1?'#FFFBE6':'#FFF2F0') }">
			<text :style="{ 'color':orderStatus==0?'#1890FF':(orderStatus==1?'#FAAD14':'#FF4D4F') }"
				style="font-size: 34rpx; font-weight: 600;">待取餐 · 请尽快到店取餐</text>

		</view>

		<!-- 订单基本信息 -->
		<view class="order-basic-info">
			<view class="info-item">
				<view class="label" style="font-weight: 700; font-size: 30rpx;">
					{{ orderInfo.distribution=='预约订单'?'预计'+orderInfo.makeTime.split(' ')[1]+'送达':orderInfo.makeTime  }}
				</view>
			</view>
			<view class="info-item">
				<text class="label">订单编号 : </text>
				<text class="value">{{ orderId }}</text>
			</view>

			<view class="info-item" style="justify-content: space-between;">
				<view class="label" style="display: flex; align-items: baseline;">
					<u-icon name="clock" size="16" class="clock-icon"></u-icon>
					{{ Service.formatDate(orderInfo.addTime,1) }} 下单
				</view>
				<view class="">
					<button @click="Service.GoPage('/pages/order/abnormal?orderId='+orderInfo.orderId)" class=""
						style="padding: 0rpx 30rpx;  height: 60rpx; font-size: 24rpx;  border-radius: 40rpx; background-color: red; color: #fff; ">提交异常</button>
				</view>
			</view>

		</view>

		<!-- 物品清单 -->
		<view class="order-basic-info">
			<view class="" style="display: flex; align-items: center; ">
				<view class="" style="flex: 1;  font-size: 34rpx; font-weight: 600;  ">
					物品清单
				</view>
				<view class="" style="width: 100rpx; text-align: right; font-size: 30rpx; ">
					数量
				</view>
				<view class="" style="width: 120rpx;  text-align: right; font-size: 30rpx;  ">
					金额
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="" :style="{'height':isShow?'110rpx':'fit-content' }" style="overflow: hidden;">
				<view class="" v-for="(goodsItem,goodsIndex) in JSON.parse(orderInfo.detail) " :key="goodsIndex"
					style="display: flex; align-items: center; margin-top: 15rpx; ">
					<view class="" style="flex: 1;  ">
						{{goodsItem.goodsName}}
					</view>
					<view class="" style="width: 100rpx; text-align: right;  ">
						×{{ goodsItem.count }}
					</view>
					<view class="" style="width: 120rpx;  text-align: right;   ">
						￥{{ goodsItem.count*goodsItem.price }}
					</view>
				</view>
			</view>
			<view class=""
				style="display: flex; align-items: center;justify-content: space-between; margin-top: 10rpx; ">
				<view class="">

				</view>
				<view class="info-item">
					<text class="label" style="font-weight: 700;">配送费</text>
					<text class="value price">¥{{ Number(orderInfo.postage).toFixed(2) }}</text>
				</view>
			</view>
			<view class="" v-if="JSON.parse(orderInfo.detail).length>2" @click="isShow=!isShow"
				style=" margin-top: 20rpx; display: flex; align-items: center; justify-content: center; color: #666; ">
				<up-icon :name="isShow?'arrow-down':'arrow-up'" color="#666" size="18"></up-icon>
				{{isShow?'展开':'收入'}}
			</view>
		</view>
		<!-- 取餐地址 -->
		<view class="address-section">
			<text class="section-title">取餐地址</text>
			<view class="address-content">
				<view class="store-name">{{ storeInfo.name }}</view>
				<text class="address">{{ storeInfo.city }}{{storeInfo.region }}{{ storeInfo.address }}</text>
				<view class="" style="margin-bottom: 20rpx;">
					<up-button @click="call(storeInfo.phone)" icon="phone" type="primary" shape="circle"
						text="拨打商家"></up-button>
				</view>
				<view class="pickup-code">
					<text class="code-label">取餐号：</text>
					<text class="code-value">A123</text>
				</view>
			</view>
		</view>

		<!-- 送餐地址 -->
		<view class="address-section">
			<text class="section-title">送餐地址</text>
			<view class="address-content">
				<text class="user-name">{{ JSON.parse(orderInfo.address).realName }}</text>
				<text class="address">{{ JSON.parse(orderInfo.address).address }}</text>
				<view class="" style="margin-bottom: 20rpx;">
					<up-button @click="call(JSON.parse(orderInfo.address).phone)" icon="phone" type="primary"
						shape="circle" text="拨打用户"></up-button>
				</view>
				<view v-if="orderInfo.remark" class="remark">
					<text class="remark-label">备注：</text>
					<text class="remark-content">{{ orderInfo.remark }}</text>
				</view>
			</view>
		</view>

		<view class="" style="width: 100vw;  height: 140rpx; ">

		</view>

		<!-- 底部按钮 -->
		<view class="bottom-action" style="display: flex; justify-content: space-between;'">
			<up-button @click="upGoods()" color="var(--nav-vice)" class="confirm-btn">{{type==1?'我已取货':'订单完成'}}</up-button>
			<view class="" style="width: 40rpx;">
				
			</view>
			<up-button @click="Service.GoPage('/pages/order/orderChat?orderId='+orderId)" color="#6868ee" class="confirm-btn">联系商家</up-button>
		</view>
	</view>
</template>

<script setup lang="ts"> 
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, onMounted } from 'vue';
	import { Service } from '@/Service/Service';
	import { CNRiderOrderService } from '@/Service/CN/CNRiderOrderService'

	// 加载状态
	const loading = ref(true);

	let orderStatus = ref(0)

	let isShow = ref(true)

	let deliveryTime = ref('')

	let orderInfo = ref<any>({})
	let storeInfo = ref<any>({})
	let storeLocation = ref<any>({})

	let type = ref(1)
	let orderId = ref('')
	onLoad((data : any) => {
		orderId.value = data.orderId
		type.value = data.type
		getData()
	})


	const getData = () => {
		CNRiderOrderService.GetUnitOrderInfo(orderId.value).then(res => {
			loading.value = false
			if (res.data) {
				deliveryTime.value = res.data.deliveryTime
				orderInfo.value = res.data.orderInfo
				storeInfo.value = res.data.storeInfo
				storeLocation.value = res.data.storeLocation
			}

		})
	}

	const call = (phone : string) => {
		uni.makePhoneCall({
			phoneNumber: phone,
			fail(e) {
				console.log( e);
			},
			success(e) {
				console.log('1111', e);
			}
		})
	}

	const upGoods = () => {
		CNRiderOrderService.UpdateRiderOrderTake(orderId.value, type.value).then(res => {
			if (res.data) {
				Service.Msg(  type.value==1? '取餐成功!':'订单已完成!')
				setTimeout(() => {
					Service.GoPageBack()
				}, 1000)
			} else {
				Service.Msg(res.msg)
			}
		})
	}
</script>

<style scoped>
	/* 骨架屏样式 */
	.skeleton-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 140rpx;
	}

	/* 骨架屏导航栏 */
	.skeleton-nav {
		height: 88rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		z-index: 100;
	}

	.skeleton-nav-item {
		width: 32rpx;
		height: 32rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
	}

	.skeleton-nav-title {
		width: 180rpx;
		height: 36rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
	}

	/* 骨架屏订单状态 */
	.skeleton-status {
		height: 100rpx;
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.skeleton-status::after {
		content: '';
		width: 350rpx;
		height: 45rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
	}

	/* 骨架屏订单基本信息 */
	.skeleton-basic-info {
		background-color: #fff;
		margin: 20rpx 20rpx;
		padding: 30rpx;
		border-radius: 20rpx;
	}

	.skeleton-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.skeleton-info-half {
		width: 45%;
		height: 40rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
	}

	.skeleton-right {
		width: 10%;
	}

	.skeleton-line {
		width: 60%;
		height: 40rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		margin-bottom: 20rpx;
		animation: shimmer 1.5s infinite;
	}

	.skeleton-info-third {
		width: 60%;
		height: 40rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
	}

	.skeleton-info-btn {
		width: 20%;
		height: 50rpx;
		background-color: #e6e6e6;
		border-radius: 25rpx;
		animation: shimmer 1.5s infinite;
	}

	/* 列表状态 */
	.skeleton-list-status {
		height: 60rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.skeleton-list-status::after {
		content: '';
		width: 200rpx;
		height: 45rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
	}

	/* 骨架屏地图区域 */
	.skeleton-map {
		margin: 20rpx;
		height: 400rpx;
		background-color: #e6e6e6;
		border-radius: 20rpx;
		animation: shimmer 1.5s infinite;
		position: relative;
		overflow: hidden;
	}

	.skeleton-map::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, transparent 25%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2));
		background-size: 100rpx 100rpx;
		animation: shimmer 1.5s infinite linear;
	}

	/* 骨架屏地址区域 */
	.skeleton-address {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 20rpx;
	}

	.skeleton-title {
		width: 120rpx;
		height: 30rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		margin-bottom: 25rpx;
		animation: shimmer 1.5s infinite;
	}

	.skeleton-store-name {
		width: 70%;
		height: 50rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		margin-bottom: 15rpx;
		animation: shimmer 1.5s infinite;
	}

	.skeleton-address-line {
		width: 90%;
		height: 26rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		margin-bottom: 15rpx;
		animation: shimmer 1.5s infinite;
	}

	.skeleton-btn {
		height: 70rpx;
		background-color: #e6e6e6;
		border-radius: 35rpx;
		margin: 20rpx 0;
		animation: shimmer 1.5s infinite;
	}

	.skeleton-code {
		width: 50%;
		height: 26rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
	}

	.skeleton-remark {
		width: 80%;
		height: 26rpx;
		background-color: #e6e6e6;
		border-radius: 4rpx;
		animation: shimmer 1.5s infinite;
	}

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

	.skeleton-bottom-btn {
		width: 100%;
		height: 90rpx;
		background-color: #e6e6e6;
		border-radius: 45rpx;
		animation: shimmer 1.5s infinite;
	}

	/* 骨架屏动画 */
	@keyframes shimmer {
		0% {
			opacity: 0.6;
		}

		50% {
			opacity: 0.8;
		}

		100% {
			opacity: 0.6;
		}
	}

	/* 骨架屏滑动动画 */
	@keyframes shimmer-slide {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(100%);
		}
	}

	/* end */

	.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: 10rpx 0;
		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;
	}
</style>