<template>
    <view class="success-container">
        <!-- 成功图标和标题 -->
        <view class="success-header">
            <view class="success-icon">
                <image class="header_top" src="https://static.hshuishang.com/jf_order_sucess.png" mode="" />
            </view>
            <h1 class="success-title">兑换成功</h1>
            <p class="points-consumed">消耗 {{ storeInfo.total_amount }} 积分</p>
        </view>

        <!-- 门店信息卡片 -->
        <view class="store-card">
            <view class="store-info">
                <h2 class="store-name">{{ storeInfo.merchant_info.merchant_name }}</h2>
                <p class="store-address">{{ storeInfo.receiving_address }}</p>
            </view>
            <view class="nav-btn" @click="navigateToStore">
                <image class="nav-image" src="https://static.hshuishang.com/jfNav.png" mode="" />
                <span>导航</span>
            </view>
        </view>

        <!-- 提示信息 -->
        <p class="reminder">请前往线下门店兑换商品</p>

        <!-- 操作按钮 -->
        <view class="action-buttons">
            <button class="primary-btn" @click="viewOrder">查看订单</button>
            <button class="secondary-btn" @click="backToHome">返回首页</button>
        </view>
    </view>
</template>

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

export default {
    data() {
        return {
            storeInfo: {},
            order_id: ''
        };
    },
    onLoad(options) {
        if (options.order_id) {
            this.order_id = options.order_id;
            const params = {
                order_id: this.order_id
            }
            request(apiArr.pointOrderInfo, "POST", params).then(res => {
                this.storeInfo = res;
            });
        }
    },
    methods: {
        // 导航到门店
        navigateToStore() {
            // 检查是否有经纬度信息
            if (this.storeInfo.merchant_info.latitude && this.storeInfo.merchant_info.longitude) {
                uni.openLocation({
                    latitude: Number(this.storeInfo.merchant_info.latitude),
                    longitude: Number(this.storeInfo.merchant_info.longitude),
                    name: this.storeInfo.merchant_info.merchant_name,
                    address: this.storeInfo.receiving_address,
                    success: (res) => {
                        console.log('导航成功', res);
                    },
                    fail: (err) => {
                        console.log('导航失败', err);
                        uni.showToast({
                            title: '导航失败，请检查位置权限',
                            icon: 'none'
                        });
                    }
                });
            } else {
                uni.showToast({
                    title: '暂无门店位置信息',
                    icon: 'none'
                });
            }
        },

        // 查看订单
        viewOrder() {
            NavgateTo(`/packages/jfShop/myOrder/index?order_id=${this.order_id}`);
        },

        // 返回首页
        backToHome() {
            NavgateTo('/pages/index/index');
        }
    }
};
</script>

<style>
@import url('./index.css');
</style>