<template>
    <view class="detail-container">
        <!-- 商品轮播图 -->
        <view class="swiper-container">
            <swiper indicator-dots :autoplay="false" :interval="3000" :duration="1000" indicator-active-color="#ff4d4f"
                style="height: 100%;">
                <swiper-item v-for="(item, index) in carouselImages" :key="index" style="height: 100%;">
                    <image :src="item" mode="aspectFill" class="swiper-image"></image>
                </swiper-item>
            </swiper>
            <view class="swiper-indicator">{{ currentImageIndex + 1 }}/{{ carouselImages.length }}</view>
        </view>

        <!-- 商品信息 -->
        <view class="product-info">
            <view class="product-price">
                <view>
                    <text class="price-number">{{ selectedGoodsInfo.points }}</text>
                    <text class="price-unit">积分</text>
                </view>
                <view class="exchange-info">已兑{{ productInfo.exchange_count }}件</view>
            </view>
            <view class="product-name">{{ productInfo.commodity_name }}</view>
        </view>

        <!-- 商品详情 -->
        <view class="product-details">
            <view class="detail-title">
                <view class="line"></view>
                <view>商品详情</view>
                <view class="line"></view>
            </view>
            <view class="detail-content">
                <image v-for="(item, index) in detailImages" :key="index" :src="item" mode="widthFix"
                    class="detail-image" />
            </view>
        </view>

        <!-- 底部操作栏 -->
        <view class="bottom-bar">
            <view class="points-info">
                <text class="points-number">{{ selectedGoodsInfo.points }}积分</text>
                <text class="points-label">当前积分{{ userPoints }}</text>
            </view>
            <view v-if="userPoints < selectedGoodsInfo.points" class="insufficient-points">
                <text v-if="!uni.getStorageSync('ctoken')" >暂未登录,请先登录</text>
                <text v-else>积分不足，还差{{ selectedGoodsInfo.points - userPoints }}积分哦</text>
            </view>
            <button v-else class="exchange-btn" @click="showSpecPopup = true">立即兑换</button>
            <!-- <button class="exchange-btn" @click="showSpecPopup = true">立即兑换</button> -->
        </view>

        <!-- 规格选择弹窗 -->
        <view v-if="showSpecPopup" class="spec-popup" @click.self="showSpecPopup = false">
            <view class="popup-content">
                <view class="close-btn" @click="showSpecPopup = false">×</view>
                <view class="popup-header">
                    <view class="spec-image">
                        <image :src="selectedGoodsInfo.goods_info.commodity_pic" class="spec-image-item">
                        </image>
                    </view>
                    <view class="spec-info">
                        <view class="spec-price">
                            <text class="spec-price-number">{{ selectedGoodsInfo.points }}</text>
                            <text class="spec-price-unit">积分</text>
                        </view>
                        <view class="spec-change">
                            <view class="spec-selected">已选：{{ selectedGoodsInfo.goods_info.goods_name }}</view>
                        </view>
                    </view>
                </view>

                <view class="spec-section">
                    <view class="spec-title">规格</view>
                    <view class="spec-options">
                        <view v-for="(spec, index) in productInfo.goods_info_list" :key="index"
                            :class="['spec-option', { active: selectedSpecId === spec.id }]" @click="selectSpec(spec)">
                            {{ spec.goods_info.goods_name }}
                        </view>
                    </view>
                </view>

                <view class="quantity-section">
                    <view class="quantity-title">数量</view>
                    <view class="quantity-control">
                        <button class="quantity-btn" @click="decreaseQuantity" :disabled="quantity <= 1">-</button>
                        <view class="quantity-input">{{ quantity }}</view>
                        <button class="quantity-btn" @click="increaseQuantity">+</button>
                    </view>
                </view>

                <view class="popup-footer">
                    <button class="confirm-btn" @click="confirmExchange">立即兑换</button>
                </view>
            </view>
        </view>
    </view>
</template>

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

export default {
    data() {
        return {
            productInfo: {},
            userPoints: 0,
            currentImageIndex: 0,
            showSpecPopup: false,
            selectedSpecId: 1,
            selectedSpec: '',
            quantity: 1,
            selectedGoodsInfo: {}
        };
    },
    computed: {
        // 处理轮播图数据
        carouselImages() {
            if (this.productInfo.commodity_carousel) {
                return this.productInfo.commodity_carousel.split(',').map(item => picUrl + item);
            }
            return [];
        },
        // 处理详情图片数据
        detailImages() {
            if (this.productInfo.commodity_detail_pic) {
                return this.productInfo.commodity_detail_pic.split(',').map(item => picUrl + item);
            }
            return [];
        }
    },
    methods: {
        // 选择规格
        selectSpec(spec) {
            this.selectedSpecId = spec.id;
            this.selectedSpec = spec.goods_info.goods_name;
            this.selectedGoodsInfo = {
                ...spec,
                goods_info: {
                    ...spec.goods_info,
                    commodity_pic: picUrl + spec.goods_info.commodity_pic
                }
            };
            this.quantity = 1;
        },
        // 减少数量
        decreaseQuantity() {
            if (this.quantity > 1) {
                this.quantity--;
            }
        },
        // 增加数量
        increaseQuantity() {
            if (this.quantity < this.selectedGoodsInfo.goods_info.stock && this.quantity < this.selectedGoodsInfo.goods_info.limit_buy) {
                this.quantity++;
            }
        },
        // 确认兑换
        confirmExchange() {
            const orderInfo = {
                productId: this.productInfo.id,
                specId: this.selectedSpecId,
                specName: this.selectedSpec,
                quantity: this.quantity,
                price: this.selectedGoodsInfo.points,
                goodsInfo: this.selectedGoodsInfo,
            }
            this.showSpecPopup = false;
            NavgateTo('/packages/jfShop/submitOrder/index?orderInfo=' + JSON.stringify(orderInfo));
        },
        // 获取用户积分
        getPointNum() {
            if (!uni.getStorageSync("ctoken")) {
                return 0;
            }
            request(apiArr2.getUserInfo, 'POST', {}, { silent: false }).then(res => {
                this.userPoints = res.points;
            });
        },
    },
    onshow() {
        this.getPointNum();
    },
    onLoad(options) {
        this.getPointNum();
        const orderInfo = JSON.parse(options.product);
        const params = {
            id: orderInfo.id
        }
        request(apiArr.pointGoodInfo, 'POST', params, { silent: false }, false).then(res => {
            this.productInfo = res;
            // 默认选择第一个规格
            if (res.goods_info_list && res.goods_info_list.length > 0) {
                this.selectedSpecId = res.goods_info_list[0].id;
                this.selectedSpec = res.goods_info_list[0].goods_info.goods_name;
                this.selectedGoodsInfo = {
                    ...res.goods_info_list[0],
                    goods_info: {
                        ...res.goods_info_list[0].goods_info,
                        commodity_pic: picUrl + res.goods_info_list[0].goods_info.commodity_pic
                    }
                };
            }
        });
    }
};
</script>
<style>
@import url('./index.css');
</style>