<template>
    <view class="group-purchase-container">
        <!-- 顶部横幅 -->
        <view class="banner">
            <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/gp_index_top.png"></image>
        </view>

        <!-- 商品列表 -->
        <view class="goods-list">
            <!-- 商品项 -->
            <view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
                <view class="goods-image">
                    <image :src="item.image" mode="aspectFill"></image>
                </view>
                <view class="goods-info">
                    <view class="goods-name">{{ item.name }}</view>
                    <view class="goods-desc">{{ item.desc }}</view>
                    <view class="price-container">
                        <view class="group-price">
                            <view class="group-price1">团购价</view>
                            <view class="group-price2">{{ item.groupPrice }}</view>
                        </view>
                        <view class="quantity-control">
                            <view class="decrease-btn" @tap.stop="decreaseQuantity(index)">-</view>
                            <view class="quantity">{{ item.quantity }}</view>
                            <view class="increase-btn" @tap.stop="increaseQuantity(index)">+</view>
                        </view>
                    </view>
                    <view class="original-price">单买价 {{ item.originalPrice }}</view>
                    <view class="countdown">{{ item.countdown }}</view>
                </view>
            </view>
        </view>

        <!-- 购物车按钮 -->
        <view class="shop_car" @click="shopCar">
            <u-badge numberType="limit" type="error" max="99" :value="carNum"></u-badge>
            <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"></image>
        </view>
    </view>
</template>

<script>
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
export default {
    data() {
        return {
            goodsList: [
                {
                    id: 30,
                    name: "泰国金枕榴莲泰国金枕榴莲",
                    desc: "心形榴莲 软糯香甜",
                    image: "/static/logo.png",
                    groupPrice: "¥125.9/个",
                    originalPrice: "¥200/个",
                    countdown: "19天2小时10分钟后结束",
                    quantity: 1
                },
                {
                    id: 30,
                    name: "泰国金枕榴莲泰国金枕榴莲",
                    desc: "心形榴莲 软糯香甜",
                    image: "/static/logo.png",
                    groupPrice: "¥125.9/个",
                    originalPrice: "¥200/个",
                    countdown: "19天2小时10分钟后结束",
                    quantity: 1
                }
            ],
            carNum: 5,
        };
    },
    methods: {
        toDetail(item) {
            console.log("🚀 ~ toDetail ~ toDetail:", '跳转......')
            NavgateTo(`/packages/shop/groupPurchaseDetail/index?item=${JSON.stringify(item)}`)
        },
        increaseQuantity(index) {
            this.goodsList[index].quantity++;
            this.cartCount++;
        },
        decreaseQuantity(index) {
            if (this.goodsList[index].quantity > 1) {
                this.goodsList[index].quantity--;
                this.cartCount--;
            }
        },
        goToCart() {
            // 跳转到购物车页面的逻辑
            uni.showToast({
                title: '跳转到购物车',
                icon: 'none'
            });
        }
    }
};
</script>

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