<template>
	<view class="record-container">
		<!-- 动态渲染月份分组 -->
		<view v-for="group in records" :key="group.time" class="month-group">
			<view class="month-header">
				<text class="month-title">{{ group.time }}</text>
				<text class="month-count">{{ group.total }}单兑换商品</text>
			</view>

			<!-- 动态渲染每个记录项 -->
			<view v-for="item in group.orders" :key="item.id" class="record-item">
				<view class="item-left">
					<image class="item-image" :src="item.commodity_order_item_list[0].commodity_pic" mode="aspectFill">
					</image>
					<view class="item-info">
						<text class="item-name">{{ item.commodity_order_item_list[0].goods_name }}</text>
						<view class="item-data">
							<view class="item-label">订单号：</view>
							<view>{{ item.order_no }}</view>
						</view>
						<view class="item-data">
							<view class="item-label">积分变动：</view>
							<view>{{ item.total_amount }}积分</view>
						</view>
						<view class="item-data">
							<view class="item-label">交易日期：</view>
							<view>{{ item.order_time }}</view>
						</view>
						<view class="item-data">
							<view class="item-label">交易地点：</view>
							<view>{{ item.receiving_address }}</view>
						</view>
					</view>
				</view>
				<view class="item-right">
					<button class="nav-btn" @click="navigateToStore(item)">导航</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { request, picUrl, NavgateTo } from "../../../utils";
import { apiArr } from "../../../api/pointShop";

export default {
	data() {
		return {
			records: []
		};
	},
	methods: {
		getList() {
			request(apiArr.pointShopRecord, 'POST', {}, { silent: false }).then(res => {
				// 处理商品图片路径
				res.rows.forEach(item => {
					item.orders.forEach(ite => {
						if (ite.commodity_order_item_list && ite.commodity_order_item_list.length > 0) {
							ite.commodity_order_item_list.forEach(parm => {
								if (parm.commodity_pic) {
									parm.commodity_pic = picUrl + parm.commodity_pic;
								}
							});
						}
					})
				});
				this.records = res.rows;
			});
		},
		navigateToStore(item) {
			// 检查是否有经纬度信息
			if (item.merchant_info.latitude && item.merchant_info.longitude) {
				uni.openLocation({
					latitude: Number(item.merchant_info.latitude),
					longitude: Number(item.merchant_info.longitude),
					name: item.merchant_info.merchant_name,
					address: item.receiving_address,
					success: (res) => {
						console.log('导航成功', res);
					},
					fail: (err) => {
						console.log('导航失败', err);
						uni.showToast({
							title: '导航失败，请检查位置权限',
							icon: 'none'
						});
					}
				});
			} else {
				uni.showToast({
					title: '暂无门店位置信息',
					icon: 'none'
				});
			}
		}
	},
	onLoad() {
		this.getList();
	}
};
</script>
<style>
@import url('./index.css');
</style>