<template>
	<view class="order-page">
		<!-- 收货地址 -->
		<view class="address-section" @click="showAddressPicker">
			<view v-if="selectedAddress" class="address-card">
				<view class="address-header">
					<text class="receiver-name">{{ selectedAddress.receiver_name }}</text>
					<text class="receiver-phone">{{ selectedAddress.phone }}</text>
				</view>
				<view class="address-detail">
					<text class="address-text">{{ formatAddress(selectedAddress) }}</text>
				</view>
				<view class="address-arrow">
					<text class="iconfont icon-arrow-right">›</text>
				</view>
			</view>
			<view v-else class="address-empty">
				<text class="iconfont icon-location">📍</text>
				<text class="empty-text">请选择收货地址</text>
				<text class="iconfont icon-arrow-right">›</text>
			</view>
		</view>

		<!-- 地址选择弹窗 -->
		<view class="address-picker-mask" v-if="showAddressList" @click="hideAddressPicker">
			<view class="address-picker" @click.stop>
				<view class="picker-header">
					<text class="picker-title">选择收货地址</text>
					<text class="picker-close" @click="hideAddressPicker">×</text>
				</view>
				<scroll-view scroll-y class="picker-content">
					<view 
						class="picker-item" 
						v-for="(item, index) in addressList" 
						:key="item.id || index"
						@click="chooseAddress(item)"
					>
						<view class="picker-item-header">
							<text class="picker-receiver">{{ item.receiver_name }}</text>
							<text class="picker-phone">{{ item.phone }}</text>
							<view class="picker-tag" v-if="Number(item.is_default) === 1">默认</view>
						</view>
						<view class="picker-item-detail">
							<text class="picker-address">{{ formatAddress(item) }}</text>
						</view>
						<view class="picker-item-check" v-if="selectedAddress && selectedAddress.id === item.id">
							<text class="iconfont icon-gou">✓</text>
						</view>
					</view>
					<view v-if="addressList.length === 0" class="picker-empty">
						<text class="empty-text">暂无地址，请先添加</text>
					</view>
				</scroll-view>
				<view class="picker-footer">
					<view class="picker-btn" @click="goToAddressManage">管理地址</view>
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="goods-section">
			<view class="section-title">商品信息</view>
			<view class="goods-list">
				<view class="goods-item" v-for="(item, index) in orderItems" :key="index">
					<view class="goods-image">
						<image :src="item.product_image || item.main_image_url" mode="aspectFill"></image>
					</view>
					<view class="goods-info">
						<view class="goods-name">{{ item.product_name || item.name }}</view>
						<view class="goods-spec" v-if="item.sku_name">{{ item.sku_name }}</view>
						<view class="goods-price-row">
							<view class="goods-price">
								<text class="price-symbol">￥</text>
								<text class="price-value">{{ formatPrice(item.price) }}</text>
							</view>
							<view class="goods-quantity">x{{ item.quantity }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单备注 -->
		<view class="remark-section">
			<view class="section-title">订单备注</view>
			<textarea 
				class="remark-input" 
				v-model="orderRemark" 
				placeholder="选填，对本次购买的说明（如：请尽快发货）"
				maxlength="200"
				auto-height
			></textarea>
		</view>

		<!-- 价格明细 -->
		<view class="price-section">
			<view class="price-item">
				<text class="price-label">商品总价</text>
				<text class="price-value">￥{{ formatPrice(totalPrice) }}</text>
			</view>
			<view class="price-item">
				<text class="price-label">运费</text>
				<text class="price-value">￥{{ formatPrice(shippingFee) }}</text>
			</view>
			<view class="price-item total" v-if="discountAmount > 0">
				<text class="price-label">优惠</text>
				<text class="price-value discount">-￥{{ formatPrice(discountAmount) }}</text>
			</view>
			<view class="price-item total">
				<text class="price-label">实付金额</text>
				<text class="price-value total-price">￥{{ formatPrice(finalPrice) }}</text>
			</view>
		</view>

		<!-- 底部提交栏 -->
		<view class="order-footer">
			<view class="footer-total">
				<text class="total-label">合计：</text>
				<text class="total-price">￥{{ formatPrice(finalPrice) }}</text>
			</view>
			<view class="footer-btn" :class="{ disabled: !canSubmit }" @click="submitOrder">
				{{ submitting ? '提交中...' : '提交订单' }}
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/api/request.js';
import { fetchAddressList } from '@/api/address.js';

export default {
		data() {
		return {
			orderItems: [], // 订单商品列表
			selectedAddress: null, // 选中的收货地址
			addressList: [], // 地址列表
			showAddressList: false, // 是否显示地址选择弹窗
			orderRemark: '', // 订单备注
			shippingFee: 0, // 运费（单位：分）
			discountAmount: 0, // 优惠金额（单位：分）
			submitting: false, // 是否正在提交
			app_id: ''
		};
	},
	computed: {
		// 商品总价（单位：分）
		totalPrice() {
			let total = 0;
			this.orderItems.forEach(item => {
				const price = parseFloat(item.price || 0);
				const quantity = parseInt(item.quantity || 1);
				total += price * quantity;
			});
			return total;
		},
		// 最终支付金额（单位：分）
		finalPrice() {
			return Math.max(0, this.totalPrice + this.shippingFee - this.discountAmount);
		},
		// 是否可以提交订单
		canSubmit() {
			return this.selectedAddress && this.orderItems.length > 0 && !this.submitting;
		}
	},
	onLoad(options) {
		// 从购物车传递过来的商品数据
		if (options.items) {
			try {
				this.orderItems = JSON.parse(decodeURIComponent(options.items));
			} catch (error) {
				console.error('解析商品数据失败:', error);
				uni.showToast({
					title: '商品数据错误',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
				return;
			}
		}

		// 加载地址列表
		this.loadAddressList();
	},
	methods: {
		// 格式化价格（分转元）
		formatPrice(value) {
			if (!value && value !== 0) {
				return '0.00';
			}
			// 分转换为元
			value = value / 100;
			// 保留两位小数
			return value.toFixed(2);
		},

		// 格式化地址
		formatAddress(address) {
			if (!address) return '';
			const region = [
				address.province || '',
				address.city || '',
				address.district || ''
			].filter(Boolean).join('');
			return region + (address.detail_address || '');
		},

		// 加载地址列表
		async loadAddressList() {
			try {
				this.addressList = await fetchAddressList();
				// 自动选择默认地址
				const defaultAddress = this.addressList.find(addr => Number(addr.is_default) === 1);
				if (defaultAddress) {
					this.selectedAddress = defaultAddress;
				} else if (this.addressList.length > 0) {
					// 如果没有默认地址，选择第一个
					this.selectedAddress = this.addressList[0];
				}
			} catch (error) {
				console.error('加载地址列表失败:', error);
			}
		},

		// 显示地址选择弹窗
		showAddressPicker() {
			if (this.addressList.length === 0) {
				// 如果没有地址，直接跳转到地址管理页面
				this.goToAddressManage();
			} else {
				this.showAddressList = true;
			}
		},

		// 隐藏地址选择弹窗
		hideAddressPicker() {
			this.showAddressList = false;
		},

		// 选择地址
		chooseAddress(address) {
			this.selectedAddress = address;
			this.hideAddressPicker();
		},

		// 跳转到地址管理页面
		goToAddressManage() {
			uni.navigateTo({
				url: '/pages/address/index'
			});
		},

		// 提交订单
		async submitOrder() {
			if (!this.canSubmit) {
				if (!this.selectedAddress) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					});
				}
				return;
			}

			this.submitting = true;
			// 获取小程序的appid
			if (!this.app_id) {
				const accountInfo = wx.getAccountInfoSync && wx.getAccountInfoSync();
				this.app_id = accountInfo && accountInfo.miniProgram && accountInfo.miniProgram.appId
					? accountInfo.miniProgram.appId
					: '';
			}
			try {
				// 构建订单数据
				const orderData = {
					app_id: this.app_id,
					address_id: this.selectedAddress.id,
					items: this.orderItems.map(item => ({
						cart_id: item.cart_id,
						product_id: item.product_id,
						sku_id: item.sku_id,
						quantity: item.quantity,
						price: item.price
					})),
					remark: this.orderRemark,
					total_price: this.totalPrice,
					shipping_fee: this.shippingFee,
					discount_amount: this.discountAmount,
					final_price: this.finalPrice
				};

				// 调用创建订单接口
				const result = await request('xcx/order', 'POST', orderData);
				
				uni.showToast({
					title: '订单提交成功',
					icon: 'success',
					duration: 2000
				});

				// 跳转到订单详情或订单列表页面
				setTimeout(() => {
					// 根据实际路由调整
					uni.redirectTo({
						url: `/pages/order/detail?id=${result.order_id || result.id}`
					});
				}, 2000);

			} catch (error) {
				console.error('提交订单失败:', error);
				uni.showToast({
					title: error.message || '提交订单失败，请重试',
					icon: 'none',
					duration: 2000
				});
			} finally {
				this.submitting = false;
			}
		}
	},
	onShow() {
		// 页面显示时，重新加载地址列表（从地址管理页面返回时）
		this.loadAddressList();
	}
};
</script>

<style scoped>
.order-page {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
}

/* 收货地址区域 */
.address-section {
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 30rpx 24rpx;
	position: relative;
}

.address-card {
	display: flex;
	flex-direction: column;
}

.address-header {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.receiver-name {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-right: 24rpx;
}

.receiver-phone {
	font-size: 28rpx;
	color: #666;
}

.address-detail {
	margin-bottom: 8rpx;
}

.address-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
}

.address-arrow {
	position: absolute;
	right: 24rpx;
	top: 50%;
	transform: translateY(-50%);
}

.address-arrow .iconfont {
	font-size: 32rpx;
	color: #999;
}

.address-empty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
}

.address-empty .iconfont {
	font-size: 36rpx;
	color: #999;
}

.empty-text {
	flex: 1;
	margin-left: 16rpx;
	font-size: 28rpx;
	color: #999;
}

/* 商品区域 */
.goods-section {
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 30rpx 24rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 24rpx;
}

.goods-list {
	display: flex;
	flex-direction: column;
}

.goods-item {
	display: flex;
	margin-bottom: 24rpx;
}

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

.goods-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 16rpx;
	overflow: hidden;
	margin-right: 24rpx;
	background-color: #f5f5f5;
}

.goods-image image {
	width: 100%;
	height: 100%;
}

.goods-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.goods-name {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.goods-spec {
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #999;
}

.goods-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16rpx;
}

.goods-price {
	color: #e7000b;
	font-weight: bold;
}

.price-symbol {
	font-size: 24rpx;
}

.price-value {
	font-size: 32rpx;
}

.goods-quantity {
	font-size: 28rpx;
	color: #666;
}

/* 备注区域 */
.remark-section {
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 30rpx 24rpx;
}

.remark-input {
	width: 100%;
	min-height: 120rpx;
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
	padding: 20rpx;
	background-color: #f8f8f8;
	border-radius: 12rpx;
	box-sizing: border-box;
}

/* 价格明细 */
.price-section {
	background-color: #fff;
	padding: 30rpx 24rpx;
}

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

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

.price-label {
	color: #666;
}

.price-value {
	color: #333;
}

.price-item.total {
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 2rpx solid #f5f5f5;
}

.price-item.total .price-label {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.total-price {
	font-size: 36rpx;
	font-weight: bold;
	color: #e7000b;
}

.discount {
	color: #e7000b;
}

/* 底部提交栏 */
.order-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24rpx;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
	z-index: 100;
}

.footer-total {
	display: flex;
	align-items: baseline;
}

.total-label {
	font-size: 28rpx;
	color: #333;
}

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

.footer-btn {
	min-width: 200rpx;
	height: 72rpx;
	line-height: 72rpx;
	text-align: center;
	background: linear-gradient(135deg, #9810fa 0%, #7a0bc7 100%);
	color: #fff;
	border-radius: 36rpx;
	font-size: 28rpx;
	padding: 0 40rpx;
}

.footer-btn.disabled {
	background: #ccc;
	color: #999;
}

/* 地址选择弹窗 */
.address-picker-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: flex-end;
}

.address-picker {
	width: 100%;
	max-height: 80vh;
	background-color: #fff;
	border-radius: 32rpx 32rpx 0 0;
	display: flex;
	flex-direction: column;
	animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

.picker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 24rpx;
	border-bottom: 2rpx solid #f5f5f5;
}

.picker-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
}

.picker-close {
	font-size: 48rpx;
	color: #999;
	line-height: 1;
}

.picker-content {
	flex: 1;
	max-height: 60vh;
	padding: 20rpx 0;
}

.picker-item {
	position: relative;
	padding: 24rpx;
	border-bottom: 2rpx solid #f5f5f5;
}

.picker-item:active {
	background-color: #f8f8f8;
}

.picker-item-header {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}

.picker-receiver {
	font-size: 30rpx;
	font-weight: 500;
	color: #333;
	margin-right: 24rpx;
}

.picker-phone {
	font-size: 28rpx;
	color: #666;
	margin-right: 16rpx;
}

.picker-tag {
	display: inline-block;
	padding: 4rpx 12rpx;
	background-color: #9810fa;
	color: #fff;
	font-size: 20rpx;
	border-radius: 8rpx;
}

.picker-item-detail {
	margin-top: 8rpx;
}

.picker-address {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
}

.picker-item-check {
	position: absolute;
	right: 24rpx;
	top: 50%;
	transform: translateY(-50%);
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #9810fa 0%, #7a0bc7 100%);
	border-radius: 50%;
}

.picker-item-check .iconfont {
	color: #fff;
	font-size: 24rpx;
}

.picker-empty {
	padding: 80rpx 24rpx;
	text-align: center;
}

.picker-empty .empty-text {
	font-size: 28rpx;
	color: #999;
}

.picker-footer {
	padding: 24rpx;
	border-top: 2rpx solid #f5f5f5;
}

.picker-btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background: linear-gradient(135deg, #9810fa 0%, #7a0bc7 100%);
	color: #fff;
	border-radius: 40rpx;
	font-size: 28rpx;
}
</style>
