<template>
	<view class="order-detail-container">
		<!-- <view class="status-bar" >
			<view class="status-icon">
				<text>{{getStatusIcon(order.status)}}</text>
			</view>
			<view class="status-info">
				<text class="status-text">{{getStatusText(order.status)}}</text>
				<text class="status-desc">{{getStatusDesc(order.status)}}</text>
			</view>
		</view> -->

		<view class="order-card">
			<view class="card-header">
				<text class="card-title">订单信息</text>
			</view>
			<view class="order-info">
				<view class="info-row">
					<text class="info-label">订单编号</text>
					<text class="info-value">{{order.order_id}}</text>
				</view>
				<view class="info-row">
					<text class="info-label">下单时间</text>
					<text class="info-value">{{order.create_time }}</text>
				</view>
				<!-- <view class="info-row">
					<text class="info-label">支付方式</text>
					<text class="info-value">{{order.pay_type || '积分支付'}}</text>
				</view> -->
			</view>
		</view>

		<view class="order-card">
			<view class="card-header">
				<text class="card-title">收货地址</text>
				<view class="address-tag" v-if="order.address_info && order.address_info.is_default">默认</view>
			</view>
			<view class="address-info" v-if="order.address_info">
				<view class="address-user">
					<text class="address-name">{{order.address_info.real_name}}</text>
					<text class="address-phone">{{order.address_info.phone}}</text>
				</view>
				<view class="address-detail">
					{{order.address_info.province}}{{order.address_info.city}}{{order.address_info.district}}{{order.address_info.detail}}
				</view>
			</view>
			<view class="address-empty" v-else>
				<text>暂无收货地址</text>
			</view>
		</view>

		<view class="order-card">
			<view class="card-header">
				<text class="card-title">商品清单</text>
				<!-- <text class="card-count">共{{typeOf(order.cart_info) }}件商品</text> -->
			</view>
			<view class="product-list">
				<view class="product-item" v-for="(item, index) in order.cart_info" :key="index">
					<image :src="item.image" mode="aspectFill" class="product-image"></image>
					<view class="product-info">
						<text class="product-name">{{item.product_name}}</text>
						<text class="product-spec">{{item.unique || ''}}</text>
						<view class="product-bottom">
							<text class="product-price">{{item.price}}积分</text>
							<text class="product-count">×{{item.cart_num}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="order-card">
			<view class="card-header">
				<text class="card-title">费用明细</text>
			</view>
			<view class="fee-list">
				<view class="fee-row">
					<text class="fee-label">商品价值</text>
					<text class="fee-value">{{order.total_price}}积分</text>
				</view>
				<!-- <view class="fee-row">
					<text class="fee-label">运费</text>
					<text class="fee-value">{{order.pay_postage === 0 ? '免运费' : '¥' + order.pay_postage}}</text>
				</view> -->
				<!-- <view class="fee-row" v-if="order.discount_amount">
					<text class="fee-label">优惠金额</text>
					<text class="fee-value discount">-¥{{order.discount_amount}}</text>
				</view> -->
				<view class="fee-row total">
					<text class="fee-label">实付</text>
					<text class="fee-value">{{order.pay_price}}积分</text>
				</view>
			</view>
		</view>

		<!-- <view class="order-card">
			<view class="card-header">
				<text class="card-title">订单状态</text>
			</view>
			<view class="timeline">
				<view 
					class="timeline-item" 
					v-for="(item, index) in timeline" 
					:key="index"
					:class="{active: index <= currentStep, done: index < currentStep}"
				>
					<view class="timeline-dot"></view>
					<view class="timeline-content">
						<text class="timeline-title">{{item.title}}</text>
						<text class="timeline-time">{{item.time}}</text>
					</view>
					<view class="timeline-line" v-if="index < timeline.length - 1"></view>
				</view>
			</view>
		</view> -->

		<view class="bottom-bar">
			<!-- <view class="total-info">
				<text class="total-label">实付款：</text>
				<text class="total-price">¥{{order.total_amount}}</text>
			</view> -->
			<view class="bottom-actions">
				<view class="action-btn btn-outline" v-if="order.status === 1 || order.status === 0"
					@click="cancelOrder">
					<text>取消订单</text>
				</view>
				<!-- <view 
					class="action-btn btn-primary" 
					v-if="order.status === 1" 
					@click="payOrder"
				>
					<text>立即支付</text>
				</view> -->
				<view class="action-btn btn-primary" v-if="order.status === 2" @click="confirmReceipt">
					<text>确认收货</text>
				</view>
				<!-- <view 
					class="action-btn btn-outline" 
					@click="goBack"
				>
					<text>返回列表</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getOrderDetail,
		cancelOrder
	} from '@/api/user.js'
	export default {
		data() {
			return {
				orderId: '',
				order: {
					id: '',
					order_no: '',
					status: 0,
					create_time: '',
					pay_type: '',
					goods_amount: 0,
					shipping_fee: 0,
					discount_amount: 0,
					total_amount: 0,
					address: null,
					items: []
				},
				timeline: []
			}
		},
		computed: {
			...mapState('user', ['userInfo']),
			currentStep() {
				return this.order.status
			}
		},
		filters: {
			showTime(time) {
				console.log(time, 'time');
				return time
			}
		},
		methods: {
			cancelOrder() {
				uni.showModal({
					title: '提示',
					content: '确定要取消该订单吗？',
					success: (res) => {
						if (res.confirm) {

							cancelOrder(this.orderId).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '订单已成功取消',
										icon: 'success'
									})
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/user/jf/order'
										})
									}, 1500)

								}
							})
						}
					}
				})
			},
			getOrderDetail() {
				getOrderDetail(this.orderId).then(res => {
					if (res.data) {
						this.order = res.data
						// this.generateTimeline()
						this.order.create_time = new Date(this.order.create_time * 1000).toLocaleString('zh-CN')
					}
				})
			},
			getStatusText(status) {
				const statusMap = {
					0: '待确认',
					1: '待支付',
					2: '待收货',
					3: '已完成',
					4: '已取消'
				}
				return statusMap[status] || '未知状态'
			},
			getStatusDesc(status) {
				const descMap = {
					0: '等待商家确认订单',
					1: '请尽快完成支付',
					2: '商品已发货，等待收货',
					3: '订单已完成',
					4: '订单已取消'
				}
				return descMap[status] || ''
			},
			getStatusIcon(status) {
				const iconMap = {
					0: '○',
					1: '¤',
					2: '→',
					3: '✓',
					4: '✕'
				}
				return iconMap[status] || '●'
			},
			getStatusClass(status) {
				const classMap = {
					0: 'status-pending',
					1: 'status-unpaid',
					2: 'status-shipping',
					3: 'status-completed',
					4: 'status-canceled'
				}
				return classMap[status] || ''
			},
			generateTimeline() {
				const baseTime = this.order.create_time || new Date().toLocaleString('zh-CN')
				this.timeline = [{
						title: '订单已提交',
						time: baseTime
					},
					{
						title: '订单已确认',
						time: this.order.status >= 1 ? baseTime : ''
					},
					{
						title: '商品已发货',
						time: this.order.status >= 2 ? baseTime : ''
					},
					{
						title: '已确认收货',
						time: this.order.status >= 3 ? baseTime : ''
					}
				]
			},
			payOrder() {
				console.log('支付订单:', this.orderId)
			},
			confirmReceipt() {
				uni.showModal({
					title: '提示',
					content: '确定已收到商品吗？',
					success: (res) => {
						if (res.confirm) {
							confirmOrder(this.orderId).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '订单已成功确认收货',
										icon: 'success'
									})
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/user/jf/order'
										})
									}, 1500)
								}
							})
						}
					}
				})
			},
			goBack() {
				uni.navigateBack()
			}
		},
		onLoad(options) {
			this.orderId = options.id || ''
			this.getOrderDetail()

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.order-detail-container {
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	.status-bar {
		padding: 60rpx 30rpx 40rpx;
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: -50%;
			right: -20%;
			width: 300rpx;
			height: 300rpx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.2);
		}

		.status-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: rgba(255, 255, 255, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 25rpx;
			font-size: 40rpx;
			color: #FFFFFF;
		}

		.status-info {
			flex: 1;

			.status-text {
				display: block;
				font-size: 34rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 8rpx;
			}

			.status-desc {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.85);
			}
		}

		&.status-pending {
			background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%);
		}

		&.status-unpaid {
			background: linear-gradient(135deg, #FF4444 0%, #FF7878 100%);
		}

		&.status-shipping {
			background: linear-gradient(135deg, #0099FF 0%, #4DB8FF 100%);
		}

		&.status-completed {
			background: linear-gradient(135deg, #52C41A 0%, #87E85A 100%);
		}

		&.status-canceled {
			background: linear-gradient(135deg, #999999 0%, #BBBBBB 100%);
		}
	}

	.order-card {
		background-color: #FFFFFF;
		margin: 20rpx;
		border-radius: 15rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 30rpx;
		border-bottom: 1rpx solid #F0F0F0;

		.card-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}

		.card-count {
			font-size: 24rpx;
			color: #999999;
		}

		.address-tag {
			font-size: 20rpx;
			color: #FFFFFF;
			background-color: #FF4444;
			padding: 4rpx 15rpx;
			border-radius: 20rpx;
		}
	}

	.order-info {
		padding: 20rpx 30rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;

		.info-label {
			font-size: 26rpx;
			color: #999999;
		}

		.info-value {
			font-size: 26rpx;
			color: #333333;
		}
	}

	.address-info {
		padding: 20rpx 30rpx;

		.address-user {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;

			.address-name {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				margin-right: 20rpx;
			}

			.address-phone {
				font-size: 28rpx;
				color: #666666;
			}
		}

		.address-detail {
			font-size: 26rpx;
			color: #666666;
			line-height: 36rpx;
		}
	}

	.address-empty {
		padding: 40rpx 30rpx;
		text-align: center;

		text {
			font-size: 26rpx;
			color: #999999;
		}
	}

	.product-list {
		padding: 10rpx 30rpx;
	}

	.product-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F5F5F5;

		&:last-child {
			border-bottom: none;
		}

		.product-image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
			background-color: #F5F5F5;
		}

		.product-info {
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.product-name {
				font-size: 28rpx;
				color: #333333;
				line-height: 36rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.product-spec {
				font-size: 24rpx;
				color: #999999;
			}

			.product-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.product-price {
					font-size: 28rpx;
					font-weight: bold;
					color: #FF4444;
				}

				.product-count {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}

	.fee-list {
		padding: 10rpx 30rpx 20rpx;
	}

	.fee-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;

		.fee-label {
			font-size: 26rpx;
			color: #666666;
		}

		.fee-value {
			font-size: 26rpx;
			color: #333333;

			&.discount {
				color: #52C41A;
			}
		}

		&.total {
			padding-top: 20rpx;
			margin-top: 10rpx;
			border-top: 1rpx dashed #EEEEEE;

			.fee-label {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}

			.fee-value {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF4444;
			}
		}
	}

	.timeline {
		padding: 20rpx 30rpx 20rpx 60rpx;
		position: relative;
	}

	.timeline-item {
		position: relative;
		padding-bottom: 30rpx;

		&:last-child {
			padding-bottom: 0;

			.timeline-line {
				display: none;
			}
		}

		.timeline-dot {
			position: absolute;
			left: -30rpx;
			top: 8rpx;
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #DDDDDD;
			border: 3rpx solid #FFFFFF;
			box-shadow: 0 0 0 2rpx #EEEEEE;
		}

		.timeline-content {
			display: flex;
			flex-direction: column;

			.timeline-title {
				font-size: 26rpx;
				color: #999999;
				margin-bottom: 5rpx;
			}

			.timeline-time {
				font-size: 22rpx;
				color: #CCCCCC;
			}
		}

		.timeline-line {
			position: absolute;
			left: -24rpx;
			top: 30rpx;
			width: 2rpx;
			height: calc(100% - 15rpx);
			background-color: #EEEEEE;
		}

		&.active {
			.timeline-dot {
				background-color: #FF4444;
				box-shadow: 0 0 0 2rpx rgba(255, 68, 68, 0.2);
			}

			.timeline-title {
				color: #333333;
				font-weight: 500;
			}

			.timeline-time {
				color: #999999;
			}

			.timeline-line {
				background-color: #FF4444;
			}
		}

		&.done {
			.timeline-dot {
				background-color: #52C41A;
				box-shadow: 0 0 0 2rpx rgba(82, 196, 26, 0.2);
			}

			.timeline-title {
				color: #333333;
			}

			.timeline-time {
				color: #999999;
			}

			.timeline-line {
				background-color: #52C41A;
			}
		}
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid #EEEEEE;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.total-info {
		display: flex;
		align-items: baseline;

		.total-label {
			font-size: 26rpx;
			color: #666666;
		}

		.total-price {
			font-size: 36rpx;
			font-weight: bold;
			color: #FF4444;
			margin-left: 5rpx;
		}
	}

	.bottom-actions {
		display: flex;
		gap: 20rpx;
	}

	.action-btn {
		padding: 20rpx 40rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: 500;

		&.btn-outline {
			border: 2rpx solid #DDDDDD;
			color: #666666;

			&:active {
				background-color: #F5F5F5;
			}
		}

		&.btn-primary {
			background-color: #FF4444;
			color: #FFFFFF;

			&:active {
				background-color: #E63939;
			}
		}
	}
</style>